乐趣区

Eslint笔记

jiezi

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
退出移动版