how to eslint with Vue components?

Question

I have a .vue file that defines a component. Other .vue files cannot seem to see it properly for the linter. I get many ES Lint errors like:

Cannot find module '../components/LinkButton'.

I have been through the steps such as

1. Add a custom // @vue/component just above my component https://github.com/vuejs/eslint-plugin-vue#attention

2. make sure the html plugin isn't included https://github.com/vuejs/eslint-plugin-vue#why-doesnt-it-work-on-vue-file

3. latest eslint and plugin

"eslint": "^5.3.0", "eslint-plugin-vue": "^5.0.0-beta.3",

Not sure what else to try. My client .eslintrc is as below.

module.exports = {
  root: true,
  env: {
    browser: true,
  },

  "parserOptions": {
    "parser": "babel-eslint",
    "ecmaVersion": 2017,
    "sourceType": "module"
  },
  // extends: 'vue',
  extends: 'plugin:vue/base',

  // required to lint *.vue files
  plugins: [
    'vue',
  ],
  // add your custom rules here
  'rules': {
    'space-before-function-paren': "off",
    'no-multi-spaces': 'off',
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    "no-multiple-empty-lines": 0,
    "comma-dangle": 0,
    "padded-blocks": 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
}
```

and the component is defined as follows

<script>
// @vue/component
const LinkButton = {
  name: 'LinkButton',
  props: [
    'label',
    'link',
    'type',
    'icon'
  ],
  data () {
    return {
      msg: 'NLP testing'
    }
  }
}

module.exports = {LinkButton}

</script>

and imported with

import {LinkButton} from '../components/LinkButton'

Note that the file compiles OK with webpack, this is just a linting issue.

Thanks!

Answer 1

The parser property of the eslint configuration should be at the root, not within parserOptions.

module.exports = {
  // ...
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2017,
    "sourceType": "module"
  }
  // ...

It's also unnecessary to specify vue in the plugins as it's already done by the inherited plugin:vue/base config.

Also note that the configuration file format must be specified in the file name.

Configuration File Formats

ESLint supports configuration files in several formats:

• JavaScript - use .eslintrc.js and export an object containing your configuration.
• YAML - use .eslintrc.yaml or .eslintrc.yml to define the configuration structure.
• JSON - use .eslintrc.json to define the configuration structure. ESLint’s JSON files also allow JavaScript-style comments.
• Deprecated - use .eslintrc, which can be either JSON or YAML.
• package.json - create an eslintConfig property in your package.json file and define your configuration there.

In your case, you should name the file .eslintrc.js since you're exporting a node module.

For eslint to load Vue files correctly, as in using the same webpack configuration, it's needed to explicitely specify the import/resolver setting within the eslint configuration file.

settings: {
    'import/resolver': {
        webpack: {
            config: 'webpack.conf.js', // if at the project root
        },
    },
},

This is used by the eslint-import-resolver-webpack module which should be installed as well.