如何使用 Vue 組件進行 eslint？

Question

我有一個定義組件的 .vue 文件。 對於 linter，其他 .vue 文件似乎無法正確查看它。 我收到許多 ES Lint 錯誤，例如：

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

我已經完成了諸如

1. 在我的組件上方添加一個自定義// @vue/component component https://github.com/vuejs/eslint-plugin-vue#attention

2. 確保不包含html插件https://github.com/vuejs/eslint-plugin-vue#why-doesnt-it-work-on-vue-file

3. 最新的 eslint 和插件

"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 {LinkButton} from '../components/LinkButton'

請注意，該文件可以通過 webpack 編譯，這只是一個 linting 問題。

謝謝！

Answer 1

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模塊使用，該模塊也應該安裝。