这可能是vue中eslintrc.js最详细的介绍了

本文是对vue项目中自带文件eslintrc.js的内容解析，

介绍了各个eslint配置项的作用，以及为什么这样设置。

比较详细，看完能对eslint有较为全面的了解，基本解除对该文件的疑惑。


/**
 * 参考文档
 * 【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 兼容格式的解析器
   * 【】但是通常在vue项目中，并不会写在 parser 字段中，而是写在 parserOptions -> parser。具体原因在 parserOptions 一栏中介绍
   */
  // 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: {
    /**
     * 这里出现 parser 的原因
     * 【】首先明确一点，官方说明中，parserOptions的配置参数是不包括 parser 的
     * 【】这里的写 parser 是 eslint-plugin-vue 的要求，是 eslint-plugin-vue 的自定义参数
     * 【】根据官方文档，eslint-plugin-vue 插件依赖 「vue-eslint-parser」解析器。「vue-eslint-parser」解析器，只解析 .vue 中html部分的内容，不会检测

这可能是vue中eslintrc.js最详细的介绍了

本文是对vue项目中自带文件eslintrc.js的内容解析，

介绍了各个eslint配置项的作用，以及为什么这样设置。

比较详细，看完能对eslint有较为全面的了解，基本解除对该文件的疑惑。

你可能感兴趣的:(这可能是vue中eslintrc.js最详细的介绍了)