ESLint代码检查系列 ——入门篇

简介

ESLint是一个用于静态代码分析的工具，能做代码规范的检查、错误提示、代码的自动修复。

1. 对代码进行静态分析和检测：代码风格是否一致、语法错误、潜在逻辑错误
2. 集成到开发环境中，例如编辑器或构建工具，以便在编码过程中提供即时反馈和建议，提高开发人员代码质量、减少潜在的错误，并遵循一致的编码风格

基本工作原理

1. parser：使用解析器将代码转为AST(抽象语法树)
2. extends、plugins、rules：获取所有插件或用户定义的规则，遍历AST并执行规则
3. 遍历完后, 将收集到的错误提示和修复

Created with Raphaël 2.3.0 初始代码 解析器 将代码转为AST 执行规则 错误提示、修复 规范的代码

属性说明

1. root：eslint配置是否可以向父级查找，true：不能

2. env：指定启用的环境，node：启用node环境，必须启用node环境，否则会报 ‘module’ is not defined

3. plugins：提供代码检查和修复的能力，是一个npm包，用来增强eslint的代码检查和修复能力

   • eslint-plugin-prettier： 把 prettier 的能力赋给 eslint，让 eslint 拥有和 prettier 一样的代码格式化能力，使用时可以省略 eslint-plugin 前缀，"plugins": ["prettier"]
   • eslint-plugin-vue：使用ESLint来检测Vue文件，"plugins": ["vue"]

4. parser：指定要使用的解析器，会把源代码转换成抽象语法树，然后再对每个节点做eslint的校验。默认解析器为espree，官方推荐的解析器中与ESLint兼容的有：

   • 检查 js 语法：esprima（不推荐）、babel-eslint、@typescript-eslint/parser（支持ts文件解析的插件）
   • 检查非 js 语法：vue-eslint-parser（支持vue文件解析的插件）、@typescript-eslint/parser

5. parserOptions：解析器配置，常用来负责解析es语法，默认支持es5

   • sourceType - 设置为 script(默认) 或 module（如果你的代码是 ECMAScript 模块)，webpack模块打包需要把sourceType设置成为module
   • ecmaVersion：按照 ecma 哪个版本语法做检查。例如：设置为6则支持es6语法，但不支持新的 ES6 全局变量或类型，如Set，需要在env属性设置es6: true就支持新的 ES6 全局变量和类型了

6. extends：用于继承某些基础配置，可以是字符串，多个就用数组，每个配置继承它前面的配置。有3种规则配置：

   • eslint内置规则配置：实际配置文件在 eslint/conf 中可以找到
     • eslint:recommended：继承Eslint中推荐的规则
     • eslint:all：继承Eslint中所有的核心规则
   • 自定义的规则配置：（以eslint-config-开头的npm包），如eslint-config-standard，是个流行的风格指南，写standard 即可
   • 插件中提供的规则配置：（以eslint-plugin-开头的npm包），如eslint-plugin-vue，使用ESLint来检测Vue文件，可写plugin:vue/essential、plugin:vue/recommended、plugin:vue/vue3-recommended

7. rules：自行配置代码规范，会覆盖基础配置，常用规则说明：

   • 关闭规则：off 或 0
   • 开启规则，警告：warn 或 1
   • 开启规则，错误：error 或 2

8. globals：定义全局变量，否则会报 no-undef 错误。

9. overrides：设置某些文件，禁用部分检查，如files匹配到的那些文件，均关闭 no-unused-expressions 检查。

   “overrides”: [ {
   “files”: [“-demo.ts",".spec.ts”],
   “rules”: { “no-unused-expressions”: “off” }
   } ]

使用

1. 安装依赖包eslint：yarn add eslint -D
2. 新建配置文件.eslintrc.js：
3. 在scripts中新增lint命令："lint": "eslint ./src/**/*.ts"
4. 在终端中执行npm run lint，即可自动检查代码中的错误，可加上参数 --fix 进行自动恢复 "lint-fix": "eslint --fix ./src/**/*.ts"