使用 eslint-plugin-vue 对 Vue.js 组件进行线迹分析

由于单个文件组件模型,一个试图嵌入脚本部分的 linter 必须首先能够通过它周围的 HTML 语法。 嵌入 HTML 结构和风格也被大多地忽略,直到现在。 输入 eslint-plugin-vue,Vue 组件的官方嵌入插件。 以前,可以用eslint-plugin-html和一系列脏的黑客来嵌入 Eslint 脚本,但现在可以正确嵌入 Vue 文件。 结构和所有这些。 让我们来看看如何做到这一点。

安装

其次,要先看《古兰经》和《古兰经》。

1# Yarn
2$ yarn add eslint eslint-plugin-vue --save-dev
3# NPM
4$ npm install eslint eslint-plugin-vue --save-dev

使用

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

可用的水平是:

• plugin:vue/base - 只是基本规则,使分析工作. 还没有链接任何东西.
• plugin:vue/essential - 上面的,加上规则只存在于防止Vue中的错误或意想不到的行为
• plugin:vue/强烈推荐 - 上面的,加上规则通常被认为是最佳实践
• plugin:vue/recommended - 上面的,加上一些常被建议的风格规则

1[label .eslintrc.json]
2{
3  "extends": [
4    "eslint:recommended",
5    "plugin:vue/recommended"
6  ],
7}

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

编辑配置

现在,如果你在编辑器中打开一个Vue文件,使用某种类型的eslint集成,你可能会看到......没有什么。这是因为你需要将vue文件类型与linter相关联。

这里是如何解决问题与 Atom 和 VSCode. 我们仍然在等待支持 Sublime 文本 3. 跟踪这个 PR: https://github.com/roadhump/SublimeLinter-eslint/pull/169

对于Atom + linter-eslint:

转到设置 ->包 ->linter-eslint,并将text.html.vue添加到List of scope to run eslint on选项中,您可能需要重新启动Atom。

结果:**

对于 VSCode + Eslint:

打开用户设置文件并添加

1"eslint.validate": [
2    "javascript",
3    "javascriptreact",
4    {
5        "language": "vue",
6        "autoFix": true
7    }
8],

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

结果:**

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