Linting

You may have been wondering how do you lint your code inside *.vue files, since they are not JavaScript. We will assume you are using ESLint (if you are not, you should!).

You will also need the official eslint-plugin-vue which supports linting both the template and script parts of Vue files.

Make sure to use the plugin's included config in your ESLint config:

{
  "extends": [
    "plugin:vue/essential"
  ]
}

Then from the command line:

eslint --ext js,vue MyComponent.vue

Another option is using eslint-loader so that your *.vue files are automatically linted on save during development:

npm install eslint eslint-loader --save-dev

Make sure it's applied as a pre-loader:

// webpack.config.js
module.exports = {
  // ... other options
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      }
    ]
  }
}