ESLint 是一种 JavaScript linter，可以用来规范 JavaScript 或 TypeScript 代码，本文教你怎么在项目中快速把 ESLint 安排上。
前导
怎么写出优雅的代码是一个老生常谈的话题，这其中包含了太多内容可聊，但搞一套标准规范绝对是万里长征第一步。ESLint 致力于如何把规范落地到你的项目中，让你的代码清清爽爽。
ESLint 和 TSLint
ESLint 作为一种 JavaScript linter，它能强制帮你遵循一套特定的代码书写风格和标准，并且会在不符合标准的地方贴心地给出提示。
你可能也听说过 TSLint，很可（不）惜（错），已经挂了。原因是考虑到 ESLint 的存在，并且两个项目之间存在大量的重复工作，TSLint 团队在 2019 年宣布不再维护该项目。
也就是说，你可能会搜到很多已存的 TSLint 周边生态包，但在使用之前，你得掂量一下，它们可是没有人在维护了哦。
所以，ESLint 就成为了事实上的标准，帮你规范 JavaScript 和 TypeScript 代码。
安装依赖
在你的工程下运行下面的代码，安装 ESLint 及其它依赖包
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
{"root": true,"parser": "@typescript-eslint/parser","plugins": ["@typescript-eslint"],"extends": ["eslint:recommended","plugin:@typescript-eslint/eslint-recommended","plugin:@typescript-eslint/recommended"]
}
再建一个忽略文件 .eslintignore，忽略不想加入限制的文件，比如 node_modules，打包产物文件等
node_modules
dist
在 package.json 文件中新建一条 lint 命令
{"scripts": {..."lint": "eslint . --ext .ts",}
}
console.log('Hello world!')
Rules
eslint 的 rules 有三种模式，off，on 和 warn
- “off” means 0 (turns the rule off completely)
- “warn” means 1 (turns the rule on but won’t make the linter fail)
- “error” means 2 (turns the rule on and will make the linter fail)
{"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!}
}
2:1errorUnexpected console statementno-console✖ 1 problem (1 error, 0 warnings)
lint 报错了…
关掉 no-console
{"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 }
}
世界安静了…
fix
我们可以利用 ESLint 的 fix 功能，自动修复报 warn 或 error 的代码
{"scripts": {..."lint": "eslint . --ext .ts","lint-and-fix": "eslint . --ext .ts --fix"},
}
运行 npm run lint-and-fix 可以检查和自动修复有问题代码
聊一聊原理
parser
首先，ESLint 为什么需要一个 解析器？ 简单来讲，ESLint 做规则校验的前提是将语言转变为抽象语法树（AST），它的校验规则是用于适配 AST 的，在遍历 AST 节点的过程中，找到该节点适配的规则，并判断是否满足规则。
plugins
ESLint 能火起来的很大原因，在于它的插件式设计，这种设计使得他能快速的响应变化。插件是什么？插件就是规则，任何插件想要在 ESLint 中生效，需要规定两点内容。
1.该规则针对的是 AST 的那些节点。
2.该节点需要满足怎样的条件。
有了这两点，ESLint 就会在遍历 AST 的过程中，找出不符合规则的节点，将其报告出来。
默认情况下，ESLint 中的规则会对 JS 进行校验，如果我们想对 React 进行校验的话，就需要增加 eslint-plugin-react 插件，如下所示，在 plugins 中增加这个插件，eslint-plugin 的前缀是可以省略的。
"plugins": ["react"
]
有了规则是不够的，我们还需要开启这些规则，可以在 rules 中配置，更好的方法就是在 extends 中加入以下代码。
"extends": ["plugin:react/recommended"
]
extends
ESLint 中的规则很多，但是默认都不会开启的，我们需要在 rules 中设定这些规则开关，这个环节非常繁琐。因此 ESLint 设计了 extends 这个字段，用于继承别的文件中已经配置好的的规则。在不加入任何插件的情况下，extends 可以配置为 eslint:recommended 或 eslint:all。recommended 是 ESLint 官方推荐的配置，校验的规则比较少，eslint:all 则会开启全部的规则校验。
如果你想了解这两者的区别，你可以去 官方规则文档 查看。更快的方法是将 “eslint:recommended” 变成 “eslint:all”。修改后的结果非常夸张，我总共 3 行代码 ESLint 检测出 10 个错误。
extends 是一个数组，可以配置多组规则，每个配置继承它前面的配置。实际开发中，我们会继承一些优秀的 ESLint 方案，比如 airbnb，然后结合自己的实际情况，在 rules 中进一步配置。
总结
使用 @typescript-eslint/parser 作为解析器，该解析器能够识别 TS 语法，结合特定的 plugin 就能实现 TS 规范化。
ESLint 的核心在于 parser 和 plugin，一个负责将当前代码解析为 AST，一个负责在 AST 的基础上生成规则。
不同的 parser 代表的不同的解析方式，各式各样的 plugin 也代表不同的规则，ESLint 的生态能越来越好，一部分要归功于这种可插拔式的设计。
目前社区有很多优秀的 ESLint 规范，我们可以参考这些规范做一份适用于自己团队的规范。
最后
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
原文地址:https://blog.csdn.net/web2022050901/article/details/129023791
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_19011.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
