关于eslint:vue中eslintrcjs配置最详细介绍

7次阅读

共计 7107 个字符,预计需要花费 18 分钟才能阅读完成。

/**
 * 参考文档
 *【eslint 英文文档】https://eslint.org/docs/user-guide/configuring
 *【eslint 中文文档】http://eslint.cn/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
 */

module.exports = {

 /**
  * 根目录标识
  * http://eslint.cn/docs/user-guide/configuring#using-configuration-files
  * http://eslint.cn/docs/user-guide/configuring#configuration-cascading-and-hierarchy
  *【】标识以后配置文件为最底层的文件,无需往更上一级的文件目录中进行搜寻
  *【】默认 eslint 的配置文件搜寻形式是,从指标文件夹进行搜寻,遍历外部每一个文件夹,找到配置文件并层叠应用。再跳出本我的项目,往先人文件夹进行遍历
  *【】留神「~/.eslintrc」的意义,「~」是指 linux 上的家目录,「~/.eslintrc」是指家目录下的 eslint 配置文件,用于私人开发者,用于整个电脑全局束缚的。这个配置通过本配置项 root 去设置,设置了 root,eslint 检测时将不会再往上搜寻
  *【】eslint 的失效规定是就近应用,越近的配置项优先级越高,笼罩其余配置项。如一个我的项目中,能够在不同文件夹中都增加配置文件,这些规定将重叠组合失效
  */
 root: true, // 标识以后配置文件为 eslint 的根配置文件,让其进行在父级目录中持续寻找。/**
  * 解析器
  * http://eslint.cn/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',


 /**
  * 解析器配置项
  * http://eslint.cn/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: {},


 /**
  * 运行环境
  * http://eslint.cn/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, // 浏览器环境},


 /**
  * 全局变量
  * http://eslint.cn/docs/user-guide/configuring#specifying-globals
  *【】定义额定的全局,开发者自定义的全局变量,让其跳过 no-undef 规定
  *【】key 值就是额定增加的全局变量
  *【】value 值用于标识该变量是否被重写,相似于 const 的作用。true 为容许变量被重写
  *【】留神:要启用 no-global-assign 规定来禁止对只读的全局变量进行批改。*/
 globals: {// gTool: true, // 例如定义 gTool 这个全局变量,且这个变量能够被重写},


 /**
  * 插件
  * http://eslint.cn/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'],


 /**
  * 规定继承
  * http://eslint.cn/docs/user-guide/configuring#extending-configuration-files
  *【】可继承的形式有以下几种
  *【】eslint 内置举荐规定,就只有一个,即「eslint:recommended」*【】可共享的配置,是一个 npm 包,它输入一个配置对象。即通过 npm 装置到 node_module 中
  *  可共享的配置能够省略包名的前缀 eslint-config-,即理论设置装置的包名是 eslint-config-airbnb-base
  *【】从插件中获取的规定,书写规定为「plugin: 插件包名 / 配置名」,其中插件报名也是能够疏忽「eslint-plugin-」前缀。如 'plugin:vue/essential'
  *【】从配置文件中继承,即继承另外的一个配置文件,如 './node_modules/coding-standard/eslintDefaults.js'
  */
 extends: [
  'plugin:vue/essential', // 额定增加的规定可查看 https://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',
 ],


 /**
  * 规定共享参数
  * http://eslint.cn/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 共享
   * 具体应用办法可参考 https://github.com/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/webpack.base.conf.js'}
  }
 },

 /**
  * 针对特定文件的配置
  *【】能够通过 overrides 对特定文件进行特定的 eslint 检测
  *【】特定文件的门路书写应用 Glob 格局,一个相似正则的门路规定,能够匹配不同的文件
  *【】配置简直与 ESLint 的其余配置雷同。笼罩块能够蕴含惯例配置中的除了 extends、overrides 和 root 之外的其余任何无效配置选项,*/
 overrides: [
  {'files': ['bin/*.js', 'lib/*.js'],
   'excludedFiles': '*.test.js',
   'rules': {'quotes': [2, 'single']
   }
  }
 ],

 /**
  * 自定义规定
  * http://eslint.cn/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」自定义的规定,须要到其官网查看 https://github.com/benmosher/eslint-plugin-import
   */
  'import/extensions': ['error', 'always', {
   js: 'never',
   vue: 'never'
  }],
  'import/no-extraneous-dependencies': ['error', {optionalDependencies: ['test/unit/index.js']
  }],
  'no-debugger': process.env.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}],
 }
}

原文地址:https://www.jb51.net/article/…

正文完
 0