Javascript 如何使用Vue组件进行eslint？

我有一个定义组件的.vue文件。 对于linter，其他.vue文件似乎无法正确查看它。 我遇到许多ES Lint错误，如：

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

我已经完成了以下步骤：

在我的组件上方添加一个自定义的

/@vue/component

确保未包含

html

插件

最新的eslint和插件

“eslint”：“^5.3.0”，
“eslint插件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>

请注意，该文件可以通过webpack编译，这只是一个linting问题

---

谢谢

eslint配置的

parser

属性应该在根目录下，而不是

parserOptions

中

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

也没有必要在

插件中指定
vue
，因为继承的
plugin:vue/base
config已经这样做了

还要注意的是

配置文件格式
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文件，就像使用相同的网页包配置一样，需要在eslint配置文件中明确指定
import/resolver
设置

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

该模块也应该安装。
为什么不使用es2017的导出默认/导入语法？我也尝试过，同样的问题。我想说得更清楚可能会有帮助，但不……那会改变情况，但更糟。现在，linter在任何类似Vue的代码（例如
@dcsan）上都会失败。我已经添加了更多信息来帮助进行默认配置，下一步是调整规则，以便它只对需要的代码进行lint。导入/解析程序的东西去了哪里？进入.eslint.js或某个网页配置文件？FWIW我正在使用一个来自@dcsan的相当复杂的模板。它在eslint配置中，您需要指定Web包配置的位置，以便eslint可以验证导入语句。
settings: {
    'import/resolver': {
        webpack: {
            config: 'webpack.conf.js', // if at the project root
        },
    },
},