Eslint笔记

1：Eslint概念

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性
和避免错误。说白了就是大家小组长想让大家按照他写代码的风格去写代码（彻底插件话的配置插件和规则），指不定这规则仍是从哪一个大团队伸手党拿来的（各类比较规范化的一些规则配置）

2：Eslint的经常使用配置

1. parser：配置解析器，这个解析器是把源代码解析成AST以后去验证规则的，默认的是Espree，解析ECMAScript5特性，固然也可使用其余的解析器，目前经常使用的babel-eslint、typescript-eslint-parser等

2. parserOptions：解析的配置，列举经常使用配置

   1. ecmaVersion: 解析的ECMAScript的版本，默认ECMAScript5
   2. sourceType: 制定解析的模块类型。script或者module（ECMAScript模块）
3. env: 配置解析的环境，env的值会为eslint默认的设置一些全局的变量，好比browser，会设置浏览器中的全局变量，jQuery，添加jQuery的全局变量，这些值能够并存，给出连接查看env环境变量

4. globals: 全局变量，源文件中访问未定义变量会no-undef，定义一些全局变量就可使用globals

   console.log(globalVarible);
   // 'globalVarible' is not defined  no-undef
   
   // globals: {
   //  globalVarible: false;
   // }
   // will make it right

5. plugins: 插件，经过插件去加强eslint的功能，以及能够输出一些额外的配置，能够去npm去搜一下eslint-plugin-*去找一些经常使用的插件

6. rules: 规则，这里就是经常使用的设置一些项目中使用的规则，规则设置能够是eslint默认的一些rules也能够是插件中一些rules，好比vue/*，0->off关闭规则 1->warn报出警告 2->error报出错误级别，若是一些规则有其余选项，能够经过数组字面量形式配置

   {
          "rules": {
              "eqeqeq": "off",
              "curly": "error",
              "quotes": ["error", "double"] // 代码中使用双引号，级别为错误
          }
      }

7. root: 当前文件的eslint配置文件会在当前目录寻找，若是不存在，会从父级依次寻找到根目录，为了将eslint限制为该项目，能够在项目的根目录下的eslint配置root:true，会中止继续向上寻找

8. extends: 继承的概念，从前一个配置中继承规则，同时也能够去修改继承到的规则，修改分为两类，只修改错误级别或者总体覆盖规则，好比可使用eslint:recommended来开启eslint的核心规则，这些规则能够在下面的连接中找到eslint:recommended规则，固然也能够继承一些第三方已有的配置，好比eslint-plugin-vue

   module.exports = {
        extends: [
          // add more generic rulesets here, such as:
          // 'eslint:recommended',
          'plugin:vue/recommended'
        ],
        rules: {
          // override/add rules settings here, such as:
          // 'vue/no-unused-vars': 'error'
        }
      }

以上的配置基本能够知足平常开发的须要了，inline Comments能够在源码文件中帮助咱们控制Eslint，好比忽略某行验证，在源码文件中添加全局变量等等

// 用来禁止eslint检测的代码块
/* eslint-disable */

alert('foo');

/* eslint-enable */

// 下面这行禁止规则no-alert
alert('foo'); // eslint-disable-line no-alert

// 该文件添加一些全局变量
/* global var1, var2 */

// 不少相似的inline comment去控制eslint的行为，可去官网查阅

3.给出一个eslint配置进行分析

简单描述一个项目的需求来进行配置

• 项目的源码转换使用了babel，须要转移es6到es5
• 使用Vue开发，须要控制*.vue文件的代码统一风格
• 使用一些现成的规范控制，好比VueCli3.0开启的airbnb config
• 根据项目成员的使用习惯，你们约定一些规则的开关

// 使用VueCli3.0生成项目架构的时候，eslintrc.js的配置以下
module.exports = {
  root: true, // 项目级别的eslint配置
  env: {
    node: true  // node的环境，在源码中方为process的时候不会报错
  },
  'extends': [
    'plugin:vue/essential',  // Vue项目，继承了eslint-plugin-vue的rule，文章结尾会给出官网连接
    'eslint:recommended'  // 这个是eslint官方推荐的配置，在eslint rules页面打钩的都是recommended
  ],
  // 针对项目需求和团队制定本身的rules
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

VueCli3.0官方给的配置其实就够用了，本身配置一些自定义的rules，接下来讲几个业务场景，而后去对eslint配置进行修改

1. 在源码中使用document等变量的时候须要

   module.exports = {
     env: {
       browser: true,   // window、document 浏览器全局变量的使用  
     }
   }

2. 在Vue初始化的时候给了一个vm = new Vue({})的引用，这个会在全局中使用

   module.exports = {
     globals: {
       vm: false, // 在源码中使用vm就不会报错了，同时false还禁止对vm进行修改
       DDLogin: false, // 钉钉登录的全局变量
     }  
   }

3. 修改VueCli3.0默认继承的规则，不适用eslint:recommended 使用airbnb-base config(不包含React部分)

   # use npm5+ 这里airbnb-base 依赖eslint和eslint-plugin-import(关于import的一些验证)
   npx install-peerdeps --dev eslint-config-airbnb-base

   module.exports = {
      'extend': [
         'plugin:vue/recommended',
         'airbnb-base'
      ],
    }

4. 根据团队制定规则

   module.exports = {
     rules: {
       'vue/no-v-html': 'off', // 这里针对继承来的配置去进行自定义配置
     }
   }

4：eslint plugin or config

给出如下经常使用的eslint-plugin-(能够加强eslint的功能，同时提供一些规则) 和 eslint-config-(可分享的配置，只是组合规则导出一个配置对象)

1. eslint-plugin-vue（Vue template，script的校验）、eslint-plugin-react(React的校验)
2. eslint-plugin-html(针对html中的js部分进行校验)
3. eslint-plugin-import(针对ES6 Module import 部分的校验)，能够配合webpack alias别名来断定import资源是否存在
4. eslint-plugin-promise(针对Promise的校验)
5. 本身去npm搜吧, eslint-plugin，只要能转AST，什么都能干，什么校验均可以作

总结：代码规范这些东西没有标准，咱们能够彻底自定义本身的规则，也能够去使用一些现成的规则，设置能够书写本身的规则，做为团队来说，代码风格统一仍是有必要的，本篇只是简单的记录一下eslint基本使用，剩下须要读者本身去结合本身的项目使用一些规则和开发一些插件知足需求

• eslint中文官网
• eslint-plugin-vue官网
• npm官网，搜索经常使用plugin or config