Linting 一直是 Vue 的一个痛点。由于单文件组件模型,尝试 lint 脚本部分的 linter 必须首先能够通过它周围的 HTML 语法。直到现在,对 HTML 结构和样式的 Linting 也基本上被忽略了。输入eslint-plugin-vue,Vue 组件的官方 linting 插件。以前,可以使用 Eslint 使用eslint-plugin-html和一些肮脏的 hack 来对脚本进行 lint,但现在可以正确地对 Vue 文件进行 lint。结构和所有。让我们来看看如何做到这一点。

安装

首先,安装eslint和eslint-plugin-vue。

# Yarn
$ yarn add eslint eslint-plugin-vue --save-dev
# NPM
$ npm install eslint eslint-plugin-vue --save-dev

用法

现在,更新(或创建)您的.eslintrc.json文件。确保扩展 eslint-plugin-vue 的可用 linting 级别之一。

可用的级别是:

• plugin:vue/base- 只是使解析工作的基本规则。还没有 lint 任何东西。

• plugin:vue/essential- 以上,加上仅用于防止 Vue 中的错误或意外行为的规则。

• plugin:vue/strongly-recommended- 以上,加上通常被认为是最佳实践的规则。

• plugin:vue/recommended- 以上,加上一些经常被建议的样式规则。

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/recommended"
  ],
}

这些规则检测到的许多问题都可以使用 eslint 的--fix选项自动修复。

编辑器配置

现在,如果你在编辑器中打开一个带有某种 eslint 集成的 Vue 文件,你可能会看到......什么也没有。那是因为您需要将vue文件类型与 linter 相关联。以前在使用像 HTML 这样的 Vue 文件时这不是问题,因为大多数集成已经支持 HTML 文件。

以下是解决 Atom 和 VSCode 问题的方法。我们仍在等待 Sublime Text 3 的支持。跟踪此 PR:https://github.com/roadhump/SublimeLinter-eslint/pull/169

对于 Atom + linter eslint:

进入 Settings -> Packages -> linter-eslint 并将text.html.vue添加到“运行 eslint 的范围列表”选项中。您可能需要重新启动 Atom。

结果:

对于 VSCode + Eslint:

打开您的用户设置文件并添加

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
        "language": "vue",
        "autoFix": true
    }
],

如果您已经修改了eslint.validate属性,只需将上面列表的最后一项添加到它。

结果:

现在 eslint 现在应该按预期运行,并为您的所有 Vue 组件产生漂亮的小警告和错误。万岁!