TS 项目加入 ESLint 进行代码检查
开始使用
-
安装依赖
npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
eslint
:ESLint 核心包。@typescript-eslint/parser
:用于解析 TypeScript 代码。@typescript-eslint/eslint-plugin
:包含一些针对 TypeScript 的 ESLint 规则。
-
创建 ESLint 配置文件:在项目根目录下创建一个 ESLint 配置文件,通常命名为
.eslintrc.js
。可以使用以下示例作为初始配置:module.exports = { "parser": "@typescript-eslint/parser", "plugins": ["@typescript-eslint"], "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", ], "ignorePatterns": [ // 忽略检查 "node_modules/" ], "globals": { // 全局变量 "JQuery": "readonly" }, "rules": { // 自定义规则 }, };
自定义规则比如
"semi": ["error", "never"]
可限制不使用分号,"no-alert": "off"
可关闭no-alert
检查。 -
配置 npm 脚本: 在
package.json
文件中添加一个 npm 脚本,用于运行 ESLint 检查。例如:"scripts": { "lint": "eslint src --ext .ts" }
src
:要验证的目标文件夹--ext
:指定检测文件的后缀
-
运行代码格式检查: 在终端中运行以下命令来执行 ESLint 代码格式检查:
npm run lint
-
自动修复: 如果需要,可以添加以下脚本来自动修复一些可以自动修复的问题:
"scripts": { "lint-fix": "eslint src --fix --ext .ts" }
--fix
:开启自动修复
-
关闭对某行的检查:有时候可能不想要检查某一部分代码,这时可以使用
/* eslint-enable */
:/* eslint-disable */ const someVariable = 'some value'; /* eslint-enable */
也可以使用
// eslint-disable-next-line
来关闭对下一行的检查。或者用// eslint-disable-next-line @typescript-eslint/no-explicit-any
关闭对下一行的指定类型的检查。
使用 eslint-config-airbnb-base
JavaScript Style Guide 是比较流行的 JavaScript 代码风格,可使用 eslint-config-airbnb-base 将其引入项目:
-
安装依赖
安装
eslint-config-airbnb-base
:npm i -D eslint-config-airbnb-base
安装
eslint-config-airbnb-base
所依赖的库:npx install-peerdeps --dev eslint-config-airbnb-base
-
修改 ESLint 配置文件
在
.eslintrc.js
中加入"extends": "airbnb-base/legacy"
或者"extends": "eslint-config-airbnb-base/whitespace"
:"extends": [ "airbnb-base/legacy" ]
airbnb-base/legacy
检查更严格,eslint-config-airbnb-base/whitespace
严格检查空白,其他规则仅给出警告。
如果还想要对 React 进行检查,则需要使用 eslint-config-airbnb。
参考:ChatGPT、使用 ESlint 代码检查指南、eslint-config-airbnb-base