TS 项目加入 ESLint 进行代码检查

开始使用

1. 安装依赖

   npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

   • eslint：ESLint 核心包。
   • @typescript-eslint/parser：用于解析 TypeScript 代码。
   • @typescript-eslint/eslint-plugin：包含一些针对 TypeScript 的 ESLint 规则。

2. 创建 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检查。

3. 配置 npm 脚本： 在package.json文件中添加一个 npm 脚本，用于运行 ESLint 检查。例如：

   "scripts": {
     "lint": "eslint src --ext .ts"
   }

   • src：要验证的目标文件夹
   • --ext：指定检测文件的后缀

4. 运行代码格式检查： 在终端中运行以下命令来执行 ESLint 代码格式检查：

   npm run lint

5. 自动修复： 如果需要，可以添加以下脚本来自动修复一些可以自动修复的问题：

   "scripts": {
     "lint-fix": "eslint src --fix --ext .ts"
   }

   • --fix：开启自动修复

6. 关闭对某行的检查：有时候可能不想要检查某一部分代码，这时可以使用/* 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 将其引入项目：

1. 安装依赖

   安装eslint-config-airbnb-base：

   npm i -D eslint-config-airbnb-base

   安装eslint-config-airbnb-base所依赖的库：

   npx install-peerdeps --dev eslint-config-airbnb-base

2. 修改 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