vue中eslintrc.js配置最详细介绍
本⽂是对vue项⽬中⾃带⽂件eslintrc.js的内容解析，
介绍了各个eslint配置项的作⽤，以及为什么这样设置。
⽐较详细，看完能对eslint有较为全⾯的了解，基本解除对该⽂件的疑惑。
/**
* 参考⽂档
* 【eslint英⽂⽂档】/docs/user-guide/configuring
* 【eslint中⽂⽂档】eslint/docs/rules/
*/
/**
* eslint有三种使⽤⽅式
* 【1】js代码中通过注释的⽅式使⽤
* 【2】通过webpack的eslintConfig字段设置，eslint会⾃动搜索项⽬的package.json⽂件中的配置
* 【3】通过配置⽂件的⽅式使⽤，配置⽂件有多种⽂件⽅式，如JavaScript、JSON 或者 YAML等
*/
/**
* ⽂件忽略
* 【】让eslint跳过特定⽂件的检测
* 【】通过当前⼯作⽬录下「.eslintignore」⽂件进⾏设置
*  其使⽤的是Glob路径书写⽅式，与「.gitignore」的使⽤⽅法相同
* 【】也可以在 package.json ⽂件中，通过 eslintIgnore 参数进⾏设置
*/
/
**
* ⽂件内局部设置
* 【】eslint可以具体⽂件中设置特定代码的规则，常⽤于跳过某条语句的检测。
* 【】注销全部规则，在代码前新建⼀⾏，添加注销 /* eslint-disable *\/  。如果没有恢复设置的语句，则下列全部代码都会跳过检测。
* 【】恢复eslint，在代码前新建⼀⾏，添加注销 /* eslint-enable *\/
* 【】指定忽略的规则，/* eslint-disable no-alert, no-console *\/
* 【】在特定⾏禁⽤，// eslint-disable-line
* 【】在下⼀⾏禁⽤，// eslint-disable-next-line
*/
/**
* 根⽬录标识
* eslint/docs/user-guide/configuring#using-configuration-files
* eslint/docs/user-guide/configuring#configuration-cascading-and-hierarchy
* 【】标识当前配置⽂件为最底层的⽂件，⽆需往更上⼀级的⽂件⽬录中进⾏搜索
* 【】默认eslint的配置⽂件搜索⽅式是，从⽬标⽂件夹进⾏搜索，遍历内部每⼀个⽂件夹，到配置⽂件并层叠使⽤。再跳出本项⽬，往祖先⽂件夹进⾏遍历
* 【】注意「~/.eslintrc」的意义，「~」是指linux上的家⽬录，「~/.eslintrc」是指家⽬录下的eslint配置⽂件，⽤于私⼈开发者，⽤于整个电脑全局约束的。这个配置通过本配置项root去设置，设置了root,eslint检测时将不会再往上搜索  * 【】eslint的⽣效规则是就近使⽤，越近的配置项优先级越⾼，覆盖其他配置项。如⼀个项⽬中，可以在不同⽂件夹中都添加配置⽂件，这些规则将重叠组合⽣效
*/
root: true, // 标识当前配置⽂件为eslint的根配置⽂件，让其停⽌在⽗级⽬录中继续寻。
/**
* 解析器
* eslint/docs/user-guide/configuring#specifying-parser
* 【】ESLint 默认使⽤Espree作为其解析器
* 【】解析器必须是本地安装的⼀个 npm 模块。即必须按照在本地的node_module中
* 【】解析器是⽤于解析js代码的，怎么去理解每⼀个表达式，有点C++中编译器的概念，会对js进⾏⼀些语法分析，语义分析什么的，才能判断语句符不符合规范。⽽不是通过简单的字符串对⽐。
* 【】解析器有很多，但兼容eslint的解析器有以下⼏个
* Espree：默认解析器，⼀个从Esprima中分离出来的解析器，做了⼀些优化
* Esprima：js标准解析器
* Babel-ESLint：⼀个对Babel解析器的包装，babel本⾝也是js解析器的⼀种（不然怎么能转化为兼容性代码呢？⾸先需要进⾏js解析，才能转化）。如果我们的代码需要经过babel转化，则对应使⽤这个解析器
* typescript-eslint-parser(实验) - ⼀个把 TypeScript 转换为 ESTree 兼容格式的解析器
*/
parser: 'babel-eslint',
/**
* 解析器配置项
* eslint/docs/user-guide/configuring#specifying-parser-options
* 【】这⾥设置的配置项将会传递到解析器中，被解析器获取到，进⾏⼀定的处理。具体被利⽤到，要看解析器的源码有没有对其进⾏利⽤。这⾥仅仅做了参数定义，做了规定，告诉解析器的开发者可能有这些参数
* 【】配置项⽬有：
* "sourceType": "module",  // 指定JS代码来源的类型，script(script标签引⼊？) | module（es6的module模块），默认为script。为什么vue的会使⽤script呢？因为vue是通过babel-loader编译的，⽽babel编译后的代码就是script⽅式
* "ecmaVersion": 6,    // ⽀持的ES语法版本，默认为5。注意只是语法，不包括ES的全局变量。全局变量需要在env选项中进⾏定义
* "ecmaFeatures": {    // Features是特征的意思，这⾥⽤于指定要使⽤其他那些语⾔对象
"experimentalObjectRestSpread": true, //启⽤对对象的扩展
"jsx": true,              //启⽤jsx语法
"globalReturn":true,          //允许return在全局使⽤
"impliedStrict":true          //启⽤严格校验模式
}
*/
parserOptions: {},
/**
* 运⾏环境
* eslint/docs/user-guide/configuring#specifying-environments
* 【】⼀个环境定义了⼀组预定义的全局变量
* 【】获得了特定环境的全局定义，就不会认为是开发定义的，跳过对其的定义检测。否则会被认为改变量未定义
* 【】常见的运⾏环境有以下这些，更多的可查看官⽹
* browser - 浏览器环境中的全局变量。
* node - Node.js 全局变量和 Node.js 作⽤域。
* es6 - 启⽤除了 modules 以外的所有 ECMAScript 6 特性（该选项会⾃动设置 ecmaVersion 解析器选项为 6）。
* amd - 将 require() 和 define() 定义为像 amd ⼀样的全局变量。
* commonjs - CommonJS 全局变量和 CommonJS 作⽤域 (⽤于 Browserify/WebPack 打包的只在浏览器中运⾏的代码)。
* jquery - jQuery 全局变量。
* mongo - MongoDB 全局变量。
* worker - Web Workers 全局变量。
* serviceworker - Service Worker 全局变量。
*/
env: {
browser: true, // 浏览器环境
},
/**
* 全局变量
* eslint/docs/user-guide/configuring#specifying-globals
* 【】定义额外的全局，开发者⾃定义的全局变量，让其跳过no-undef 规则
* 【】key值就是额外添加的全局变量
* 【】value值⽤于标识该变量能否被重写，类似于const的作⽤。true为允许变量被重写
* 【】注意：要启⽤no-global-assign规则来禁⽌对只读的全局变量进⾏修改。
globals: {
// gTool: true, // 例如定义gTool这个全局变量，且这个变量可以被重写
},
/**
* 插件
* eslint/docs/user-guide/configuring#configuring-plugins
* 【】插件同样需要在node_module中下载
* 【】注意插件名忽略了「eslint-plugin-」前缀，所以在package.json中，对应的项⽬名是「eslint-plugin-vue」
* 【】插件的作⽤类似于解析器，⽤以扩展解析器的功能，⽤于检测⾮常规的js代码。也可能会新增⼀些特定的规则。
* 【】如 eslint-plugin-vue，是为了帮助我们检测.vue⽂件中 <template> 和 <script> 中的js代码
*/
plugins: [
'vue'
],
/**
* 规则继承
* eslint/docs/user-guide/configuring#extending-configuration-files
*【】可继承的⽅式有以下⼏种
*【】eslint内置推荐规则，就只有⼀个，即「eslint:recommended」
*【】可共享的配置，是⼀个 npm 包，它输出⼀个配置对象。即通过npm安装到node_module中
*  可共享的配置可以省略包名的前缀 eslint-config-，即实际设置安装的包名是 eslint-config-airbnb-base
js assign*【】从插件中获取的规则，书写规则为「plugin：插件包名/配置名」，其中插件报名也是可以忽略「eslint-plugin-」前缀。如'plugin:vue/essential'
*【】从配置⽂件中继承，即继承另外的⼀个配置⽂件，如'./node_modules/coding-standard/eslintDefaults.js'
*/
extends: [
'plugin:vue/essential', // 额外添加的规则可查看 vuejs.github.io/eslint-plugin-vue/rules/
/**
* 「airbnb，爱彼迎」
* 【】有两种eslint规范，⼀种是⾃带了react插件的「eslint-config-airbnb」，⼀种是基础款「eslint-config-airbnb-base」，
* 【】airbnb-base 包括了ES6的语法检测，需要依赖「eslint-plugin-import」
* 【】所以在使⽤airbnb-base时，需要⽤npm额外下载 eslint-plugin-import
* 【】所以eslint实际上已经因为 airbnb-base 基础配置项⽬，添加上了 eslint-plugin-import 插件配置
* 【】所以在setting和rules⾥，都有 'import/xxx' 项⽬，这⾥修改的就是 eslint-plugin-import 配置
*/
'airbnb-base',
],
/**
* 规则共享参数
* eslint/docs/user-guide/configuring#adding-shared-settings
* 【】提供给具体规则项，每个参数值，每个规则项都会被注⼊该变量，但对应规则⽽⾔，有没有⽤，就看各个规则的设置了，就好⽐ parserOptions，解析器⽤不⽤它就不知道了。这⾥只是提供这个⽅法  * 【】不⽤怀疑，经源码验证，这就是传递给每个规则项的，会当做参数传递过去，但⽤不⽤，就是具体规则的事情
*/
settings: {
/**
*
* 注意，「import/resolver」并不是eslint规则项，与rules中的「import/extensions」不同。它不是规则项
* 这⾥只是⼀个参数名，叫「import/resolver」，会传递给每个规则项。
* settings并没有具体的书写规则，「import/」只是import模块⾃⼰起的名字，原则上，它直接命名为「resolver」也可以，加上「import」只是为了更好地区分。不是强制设置的。
* 因为「import」插件很多规则项都⽤的这个配置项，所以并没有通过rules设置，⽽是通过settings共享
* 具体使⽤⽅法可参考github/benmosher/eslint-plugin-import
*/
'import/resolver': {
/**
* 这⾥传⼊webpack并不是import插件能识别webpack，⽽且通过npm安装了「eslint-import-resolver-webpack」，
* 「import」插件通过「eslint-import-resolver-」+「webpack」到该插件并使⽤，就能解析webpack配置项。使⽤⾥⾯的参数。
* 主要是使⽤以下这些参数，共享给import规则，让其正确识别import路径
* extensions: ['.js', '.vue', '.json'],
* alias: {
* 'vue$': 'vue/dist/vue.esm.js',
* '@': resolve('src'),
* 'static': resolve('static')
* }
*/
webpack: {
config: 'build/f.js'
}
}
},
/**
* 针对特定⽂件的配置
* 【】可以通过overrides对特定⽂件进⾏特定的eslint检测
* 【】特定⽂件的路径书写使⽤Glob格式，⼀个类似正则的路径规则，可以匹配不同的⽂件
* 【】配置⼏乎与 ESLint 的其他配置相同。覆盖块可以包含常规配置中的除了 extends、overrides 和 root 之外的其他任何有效配置选项，
*/
overrides: [
{
'files': ['bin/*.js', 'lib/*.js'],
'excludedFiles': '*.test.js',
'rules': {
'quotes': [2, 'single']
}
}
],
/**
* ⾃定义规则
* eslint/docs/user-guide/configuring#configuring-rules
* 【】基本使⽤⽅式
* "off" 或者0 关闭规则
* "warn" 或者1 将规则打开为警告（不影响退出代码）
* "error" 或者2 将规则打开为错误（触发时退出代码为1）
* 如：'no-restricted-syntax': 0, // 表⽰关闭该规则
* 【】如果某项规则，有额外的选项，可以通过数组进⾏传递，⽽数组的第⼀位必须是错误级别。如0,1,2
* 如 'semi': ['error', 'never'], never就是额外的配置项
*/
rules: {
/**
* 具体规则
* 【】具体的规则太多，就不做介绍了，有兴趣的同学可以上eslint官⽹查
* 【】注意 xxx/aaa 这些规则是 xxx 插件⾃定的规则，在eslint官⽹是查不到的。需要到相应的插件官⽹中查阅
* 【】如 import/extensions，这是「eslint-plugin-import」⾃定义的规则，需要到其官⽹查看 github/benmosher/eslint-plugin-import
*/
'import/extensions': ['error', 'always', {
js: 'never',
vue: 'never'
}],
'import/no-extraneous-dependencies': ['error', {
optionalDependencies: ['test/unit/index.js']
'no-debugger': v.NODE_ENV === 'production' ? 'error' : 'off',
"no-restricted-syntax": 0, //
"guard-for-in": 0, //
"prefer-const": 0, //
"no-else-return": 0, //
"no-plusplus": 0, // 不允许使⽤++符号
"object-shorthand": ["error", "always", { "avoidQuotes": false }], // 去除禁⽌'videoData.isPause'(newValue) 的命名
"no-lonely-if": 0, // 不允许给函数参数重新赋值
"no-param-reassign": 0, // 不允许给函数参数重新赋值
"no-mixed-operators": 0, // 不允许混合使⽤运算符
"no-underscore-dangle": 0, // 不允许下划线作为变量名之⼀
"no-under": 0, // 不允许混合使⽤运算符
'generator-star-spacing': 'off',
'no-console': 'off', // 禁⽤no-console规则
'semi': ['error', 'never'], // ⾏尾不使⽤分号
'comma-dangle': ['error'],
'eqeqeq': 0, // 不需要强制使⽤全等
'max-len': 0,
'radix': 0,// parseInt不需要传第⼆个参数
'linebreak-style': 0, // 强制执⾏⼀致的换⾏样式，windows和mac不⼀样
'consistent-return': 0, // 箭头函数最后不需要最后强制return值
'no-unused-expressions': ["error", { "allowShortCircuit": true, "allowTernary": true }], // 允许您在表达式中使⽤三元运算符  'no-multi-spaces': ['error', { "ignoreEOLComments": true }],
}
}
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。