ESLint - Vue 项目配置
eslint-plugin-vueopen in new window，是针对 Vue.js 的官方 ESLint 插件。
该插件允许我们使用 ESLint 来检查.vue文件里的<template>和<script>模块。
- 发现语法错误
- 发现Vue.js 指令open in new window的使用错误
- 发现违反Vue.js 样式指南open in new window的用法
ESLint 编辑器集成对实时检查代码是非常有用的。
安装依赖
npm install -S eslint eslint-plugin-vue babel-eslint
1
.eslintrc 配置
{
"root": true,
"extends": [
// add more generic rulesets here, such as:
// 'eslint:recommended',
// 使用 eslint-plugin-vue 插件，并继承 eslint-config-vue 的 recommended 配置
"plugin:vue/recommended"
],
// 自定义 parser，详见 https://eslint.vuejs.org/user-guide/#how-to-use-custom-parser
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
// 覆盖 ESLint 的规则
// ...
// 覆盖 eslint-plugin-vue 配置的规则
// ...
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
plugin:vue/recommended 隐含的配置
打开node_modules/eslint-plugin-vue可以看到，若是在extends里添加了plugin:vue/recommended，默认会包含以下配置，因此这些配置我们都不需要显示写在.eslintrc里。
// node_modules/eslint-plugin-vue/lib/configs/base.js
// recommended 继承了 base
module.exports = {
parser: require.resolve("vue-eslint-parser"),
parserOptions: {
ecmaVersion: 2018,
sourceType: "module",
ecmaFeatures: {
jsx: true
}
},
env: {
browser: true,
es6: true
},
plugins: ["vue"],
rules: {
"vue/comment-directive": "error",
"vue/jsx-uses-vars": "error"
}
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
命令行运行
若是想在命令行运行 ESLint，确保使用--ext选项包含.vue扩展名，或使用 glob 模式，因为 ESLint 默认只校验.js文件。
eslint --ext .js,.vue src
eslint "src/**/*.{js,vue}"
1
2
2