wxya（个人网站）Eslint
什么是Eslint
ESLint是一个流行的开源
JavaScript代码检查工具，用于帮助识别和报告JavaScript代码中潜在的问题和不一致之处。它分析你的代码，检查常见的错误、编码风格违规和潜在的bug，并提供警告和错误消息，帮助你编写更干净、更可靠的代码。ESLint具有高度可配置性，允许你定义自己的编码风格规则，或者选择各种预配置的规则集（如Airbnb、Google、Standard）。你可以根据项目的具体需求自定义ESLint，强制执行一致的代码风格，及早捕捉错误。为啥用它
在企业级项目开发中，项目都会使用
ESLint来规范团队开发。而在项目工程化中，ESLint更是不可缺少的一部分，很多自动化流程中也会使用它来校验代码，那为啥都喜欢用ESLint呢？我觉得有以下几点：- 代码质量提升：
ESLint可以检测出代码中的潜在问题和错误，如未定义的变量、无法访问的代码、重复的代码块等。它可以帮助你提前发现这些问题并进行修复，从而提高代码的质量和可靠性。
- 编码风格统一：
ESLint可以根据定义的规则来强制执行一致的编码风格。这有助于整个团队在编写代码时遵循相同的规范，使代码更具可读性，并减少由于不一致的编码风格而引发的问题。
- 早期错误检测：
ESLint可以在代码编写的早期捕捉到一些常见的错误和潜在问题。通过在开发过程中及时发现这些问题，你可以更快地进行修复，避免将错误传递到后续阶段，从而减少调试和修复错误所需的时间和精力。
- 提高开发效率：
ESLint可以自动检测和报告问题，而无需手动检查代码。这样可以节省开发人员的时间和精力，特别是在大型项目或团队合作中。此外，ESLint还可以与其他工具和编辑器集成，提供实时的代码检查和提示，帮助快速发现并解决问题。
安装使用
安装ESLint
在项目里安装
Node版本^12.22.0、^14.17.0 或 >=16.0.0
Eslint扩展安装
在
vscode的扩展面板中直接搜索eslint，然后安装第一个即可。自动保存修复
每次修改完代码，可以在保存的时候对代码进行修复，依次点击 文件 > 首选项 > 设置，打开
settings.json文件然后将下面代码添加进去，保存完后重启编辑器
生成配置文件
这一步可以手动创建配置文件，但更推荐使用
init命令初始化配置，免去了很多手动配置操作。按照提示 生成
.eslintrc.json配置文件也可以直接在本地创建一个
.eslintrc.json文件，将配置复制粘贴进去。或者直接在package.json文件中增加eslintConfig字段进行配置。配置文件格式可以不同，但
ESLint只会使用一个配置文件，优先级如下忽略指定文件和目录
如果项目中有些文件或者目录不希望让
ESLint去做校验，可以在根目录下创建.eslintignore文件，来告诉ESLint跳过校验，例如忽略dist文件中的代码除了上面这种方式，还可以通过在代码文件中写入注释来告诉
ESLint是否需要校验代码ESLint基础配置
环境配置（env）
指定代码运行的宿主环境，可以同时定义多个，如启用
NodeJs环境、浏览器环境、ES6环境，直接将环境设置为true。browser- 浏览器环境中的全局变量。
node- Node.js 全局变量和 Node.js 作用域。
commonjs- CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
shared-node-browser- Node.js 和 Browser 通用全局变量。
es6- 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
worker- Web Workers 全局变量。
amd- 将 require() 和 define() 定义为像 amd 一样的全局变量。
mocha- 添加所有的 Mocha 测试全局变量。
jasmine- 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
jest- Jest 全局变量。
phantomjs- PhantomJS 全局变量。
protractor- Protractor 全局变量。
qunit- QUnit 全局变量。
jquery- jQuery 全局变量。
prototypejs- Prototype.js 全局变量。
shelljs- ShellJS 全局变量。
meteor- Meteor 全局变量。
mongo- MongoDB 全局变量。
applescript- AppleScript 全局变量。
nashorn- Java 8 Nashorn 全局变量。
serviceworker- Service Worker 全局变量。
atomtest- Atom 测试全局变量。
embertest- Ember 测试全局变量。
webextensions- WebExtensions 全局变量。
greasemonkey- GreaseMonkey 全局变量。
在插件中开启使用某种特定环境，并且只希望在插件下生效不影响全局，先要确保
plugins中有插件，然后在配置env时，变量名前通过/添加插件名全局变量（globals）
在
ESLint中，可以使用globals配置项来定义全局变量。这些全局变量是在代码中声明但未明确定义的变量，ESLint可以通过配置全局变量来避免将其视为未定义的变量。- 可读不可写 :
readonly|false
- 可读可写:
writable|true
解析器（parser）
在
ESLint中，解析器（parser）是用于分析和理解你的代码的工具。解析器将代码转换为抽象语法树（Abstract Syntax Tree，AST），以便ESLint能够在其上执行静态分析和规则检查。ESLint支持多个解析器，每个解析器都有自己的特点和适用范围。以下是一些常见的解析器：Espree：Espree是一个轻量级的、快速的解析器，由ESLint团队开发。它基于Esprima，并与ESLint紧密集成。Espree支持ES5、ES6和ES7等多个ECMAScript版本。
Babel-ESLint：Babel-ESLint使用Babel进行代码转换，以支持更新的JavaScript语法特性。它可以处理ES6+的代码，并将其转换为ES5语法，然后交由ESLint进行检查。
@typescript-eslint/parser：如果项目使用TypeScript，@typescript-eslint/parser是一个用于解析TypeScript代码的解析器。它可以处理TypeScript的语法和类型注解，并与@typescript-eslint插件集成。
vue-eslint-parser：vue-eslint-parser是专门用于解析Vue.js单文件组件的解析器。它能够解析Vue模板、JavaScript和样式块，并提供对Vue特定语法的支持。
解析器选项（parserOptions）
解析器选项（parserOptions）用于配置解析器的行为和语法选项。这些选项可以帮助解析器正确地解析代码，并提供更准确的静态分析和规则检查。
- ecmaVersion：指定所使用的
ECMAScript版本。可以设置为一个数字，表示要使用的ECMAScript版本号。
- sourceType：指定代码的模块类型。可以设置为
script（默认）或module，表示代码是一个独立的脚本文件还是一个ECMAScript模块。
- ecmaFeatures：启用一些特定的语言功能。这是一个对象，其中的属性用于启用或禁用特定的语言功能。
共享配置（extends）& 插件（plugins）
extedns
用来继承别人写好的
eslint配置规范，它是一个数组可以接受多个规范，继承下来的规则配置，可以在rules属性厦门进行扩或者覆盖规则extends 属性值可以是：- 指定配置的字符串(配置文件的路径、可共享配置的名称）
- 字符串数组：每个配置继承它前面的配置
recommended
表示引入
ESLint的核心功能，并且报告一些常见的共同错误all
引入当前版本的所有核心规则，这些规则会随着
ESLint版本进行改变共享配置
可共享的配置 是一个
npm 包，它输出一个配置对象，是别人已经整理好的规范配置，在使用前需要确保你本地已经安装这个包。如eslint-config-alloy，包含了一组规则集合，在使用的时候可以忽略掉前缀eslint-config-，plugin插件配置
此时的
extends属性由下组成plugin:
- 包名（可以省略前缀）
/
- 配置名
recommended
file文件
属性值可以是到基本配置文件的绝对路径，也可以是相对路径。ESLint 解析一个相对于使用它的配置文件的基本配置文件的相对路径。
plugins
ESLint 支持使用第三方插件，许扩展ESLint的功能，添加额外的规则、解析器、预处理器等在使用插件之前，你必须使用 npm 安装它，在使用时插件名称可以省略eslint-plugin- 前缀。插件的解析是相对于配置文件的。换句话说，ESLint 将按照用户在配置文件中运行 require('eslint-plugin-vue') 获得的方式加载插件。
extends和plugins的区别
- 命名不一样，
extends中可以是以eslint-config-为前缀，plugins都是以eslint-plugin开头
- 插件和配置的区别，当
eslint提供当选项配置中没有，就可以通过plugin自定义一套规则。如eslint-plugin-vue。而extend提供的是eslint现有的一套配置，extend中集成的配置规范，都是基于eslint基础之上。
覆盖overrides
覆盖一组文件的配置文件中的规则，可以通过
overrides和files来实现规则（rules）
ESLint 附带有大量的规则，用于定义代码的规范和风格约定。规则告诉ESLint应该对代码中的哪些模式发出警告或错误。可以根据项目需求自定义规则，也可以使用预定义的规则集。off| 0 :表示关闭规则。
warn| 1 :表示将该规则转换为警告。
error| 2 :表示将该规则转换为错误。
在文件中通过注释来配置忽略
命令行使用
eslint命令参数，其中options可选，后面跟文件或者目录。具体options可以去官网查看，这里就举一些常用到的
通常会在
package.json文件中的script下配置一个lint校验的命令，运行命令就可以对项目代码进行校验。比如在git提交代码时，运行lint命令校验代码没问题后在进行提交。总结
ESLint是一个强大的工具，可以帮助你提高代码质量、维持一致的代码风格，并发现潜在的问题和错误。使用ESLint可以提高代码的可读性、可维护性，并促进团队间的协作和一致性。它的作用不单单是在开发阶段帮助你检查、修复项目中的代码错误，在整个项目工程化里，很多地方会用到它来更好的规范团队项目，如使用
husky在commit前校验代码规范，不允许💩代码提交。配合prettier，可以自动化修复代码风格等等。后续会有更多基于
ESLint的工程化文章分享，和大家分享我是如何在团队里推动并落地实行这一套企业级的项目工程化开发规范。Loading...