如何在Vue组件中使用ESLint？

Question

如何在Vue组件中使用ESLint？

3

我有一个定义组件的.vue文件。其他的.vue文件好像不能正确地看到它以供linter使用。我会得到很多ES Lint错误，如：

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

我已经按如下步骤进行了操作：

在我的组件上方添加自定义// @vue/component标记，请参考此链接： https://github.com/vuejs/eslint-plugin-vue#attention
确保未包含html插件，请参考此链接： https://github.com/vuejs/eslint-plugin-vue#why-doesnt-it-work-on-vue-file
使用最新版本的eslint和plugin

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

不确定还要尝试什么。我的客户端 .eslintrc 内容如下。

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
  }
}
```

组件定义如下：

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

module.exports = {LinkButton}

</script>

并且使用import命令导入

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

请注意，该文件在webpack中编译没有问题，这只是一个代码检查问题。

谢谢！

- dcsan

为什么不直接使用es2017的export default / import语法呢？ - Philip Feldmann

我也尝试过了，问题还是一样。我以为更明确可能会有所帮助，但是没有…… - dcsan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Emile Bergeron · Accepted Answer

在eslint配置中，parser属性应该在根级别，而不是在parserOptions内部。

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

在plugins中指定vue是不必要的，因为继承的plugin:vue/base配置已经完成了。

此外，请注意必须在文件名中指定配置文件格式。

配置文件格式

ESLint支持多种格式的配置文件：

JavaScript - 使用.eslintrc.js并导出包含您的配置的对象。

YAML - 使用.eslintrc.yaml或.eslintrc.yml定义配置结构。

JSON - 使用.eslintrc.json定义配置结构。ESLint的JSON文件还允许JavaScript样式的注释。

已弃用 - 使用.eslintrc，可以是JSON或YAML。

package.json - 在package.json文件中创建一个eslintConfig属性，并在其中定义您的配置。

在您的情况下，应将文件命名为.eslintrc.js，因为您正在导出一个节点模块。

为了使ESLint正确加载Vue文件，就像使用相同的webpack配置一样，需要在ESLint配置文件中明确指定import/resolver设置。

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

这是由eslint-import-resolver-webpack模块使用的，需要一起安装。