目录聊天及聊天原理总结
领导
ESLint 是一个 JavaScript linter，可用于标准化 JavaScript 或 TypeScript 代码。 本文教你如何在项目中快速布置ESLint。
如何写出高贵的代码是一个老生常谈的话题，其中包含的内容太多了，但制定一套标准和规范绝对是万里长征的第一步。 ESLint 致力于如何将规范实现到您的项目中并让您的代码变得干净。
作为 JavaScript lintertypescript代码规范，ESLint 可以强制您遵守一组特定的代码编写风格和标准，并在不符合标准的地方给您贴心的提示。
你可能也听说过 TSLint，但不幸的是（错误地），它已经挂了。 原因是考虑到 ESLint 的存在以及两个项目之间的大量重复工作，TSLint 团队在 2019 年宣布将不再维护该项目。
换句话说，你可能会发现很多现有的 TSLint 外围生态包，但在使用它们之前，你必须考虑它们，而且没有人在维护它们。
因此，ESLint 已成为帮助您标准化 JavaScript 和 TypeScript 代码的事实上的标准。
安装依赖项
在你的项目下运行以下代码来安装ESLint和其他依赖包
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
.eslintrc.js
创建 .eslintrc.js 文件
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
]
}
.eslintignore
再创建一个忽略文件.eslintignore，忽略不想添加限制的文件，比如node_modules、打包后的产品文件等。
node_modules dist
package.json 脚本
在 package.json 文件中创建新的 lint 命令
{
"scripts": {
...
"lint": "eslint . --ext .ts",
}
}
尝试 npm run lint
如果我们的项目中只有index.ts文件，内容如下
console.log('Hello world!')
由于我们还没有创建任何规则，因此我们看不到发生了什么变化。
规则
eslint的规则有off、on、warn三种模式
“off”表示 0（完全关闭规则）
“warn”表示 1（打开规则但不会使 linter 失败）
“error”表示 2（打开规则并使 linter 失败）
如果你想禁用控制台，可以这样设置
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": {
"no-console": 2 // Remember, this means error! }
}
然后运行 npm run lint
2:1 error Unexpected console statement no-console
✖ 1 problem (1 error, 0 warnings)
lint 报告错误...
关闭无控制台
{
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": [
"@typescript-eslint"
],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended"
],
"rules": { "no-console": 0
}
}
npm run lint
世界安静了……
使固定
我们可以使用ESLint的fix功能来自动修补报告警告或错误的代码
修改package.json
{
"scripts": {
...
"lint": "eslint . --ext .ts",
"lint-and-fix": "eslint . --ext .ts --fix" },
}
运行 npm run lint-and-fix 来检测并手动修补有问题的代码
说说解析器原理
ESLint的原理需要结合parser配置项。
首先，为什么 ESLint 需要解析器？ 简单来说，ESLint 规则校准的前提是将语言转换为抽象语法树（AST）。 其校准规则用于调整 AST。 在遍历AST节点的过程中，找到适合该节点的规则。 并判断是否满足规则。
插件
ESLint 能够流行的一个很大的原因就是它的插件设计，这使得他能够快速响应变化。 有哪些插件？ 插件就是规则。 任何插件想要在 ESLint 中生效都需要指定两件事。
有了这两点，ESLint就会在遍历AST的过程中找出不符合规则的节点，并报告出来。
默认情况下，ESLint 中的规则会校准 JS。 如果我们要校准React，我们需要减少eslint-plugin-react插件，如下图，在plugins中减少这个插件，eslint-plugin的前缀是可以省略的。
"plugins": [
"react"
]
有规则是不够的，我们还需要启用这个规则，可以在rules中配置，更好的方法是在extends中添加以下代码。
"extends": [
"plugin:react/recommended"
]
延伸
ESLint 中有很多规则，但默认情况下没有启用。 我们需要在rules中设置这个规则开关，非常复杂。 因此，ESLint 设计了 extends 数组来继承其他文件中已经配置的规则。 在不添加任何插件的情况下，extends 可以配置为 eslint:recommended 或 eslint:all。 推荐是ESLint官方推荐的配置。 验证的规则较少，eslint:all 会启用所有规则校准。
如果想了解三者的区别，可以去官方规则文档查看。 更快的方法是将“eslint：推荐”更改为“eslint：all”。 修改后的结果很夸张typescript代码规范，我一共3行代码ESLint检测到了10个错误。
extends是一个链表，可以配置多组规则，每个配置都会继承后面的配置。 在实际开发中，我们会继承一些优秀的ESLint解决方案，比如airbnb，然后根据自己的实际情况进一步在规则中进行配置。
总结
使用@typescript-eslint/parser作为解析器，解析器可以识别TS语法，并结合特定插件实现TS规范化。
ESLint的核心在于解析器和插件，一个负责将当前代码解析为AST，另一个负责根据AST生成规则。
不同的解析器代表不同的解析方式，各种插件也代表不同的规则。 ESLint 的生态性能越来越好，部分得益于这些可插拔的设计。
目前社区中有很多优秀的ESLint规范。 我们可以参考这个规范来制定适合我们自己团队的规范。
发表评论