如何配置 ESLint 支持 TypeScript？

推荐答案

要配置 ESLint 支持 TypeScript，通常需要以下步骤：

1. 安装必要的依赖：

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

2. 配置 .eslintrc.js 文件：

   // www.javascriptcn.com code example
   module.exports = {
     parser: '@typescript-eslint/parser', // 指定解析器
     extends: [
       'eslint:recommended',
       'plugin:@typescript-eslint/recommended', // 使用推荐的 TypeScript 规则
     ],
     plugins: ['@typescript-eslint'],
     parserOptions: {
       ecmaVersion: 2020, // 允许解析现代 ECMAScript 特性
       sourceType: 'module', // 允许使用 import/export
     },
     rules: {
       // 自定义规则
     },
   };

3. 配置 .eslintignore 文件（可选）：

   node_modules/
   dist/

4. 在 package.json 中添加 lint 脚本：

   {
     "scripts": {
       "lint": "eslint 'src/**/*.{ts,tsx}'"
     }
   }

5. 运行 ESLint：

   npm run lint

本题详细解读

1. 安装依赖

• eslint：ESLint 核心库。
• @typescript-eslint/parser：用于解析 TypeScript 代码的解析器。
• @typescript-eslint/eslint-plugin：提供 TypeScript 特定的 ESLint 规则。

2. 配置 .eslintrc.js

• parser：指定使用 @typescript-eslint/parser 来解析 TypeScript 代码。
• extends：继承推荐的 ESLint 规则和 TypeScript 特定的规则。
• plugins：启用 @typescript-eslint 插件。
• parserOptions：配置解析器的选项，如 ECMAScript 版本和模块类型。

3. 配置 .eslintignore

• 忽略不需要 lint 的目录或文件，如 node_modules 和 dist。

4. 添加 lint 脚本

• 在 package.json 中添加一个脚本，用于运行 ESLint 检查 TypeScript 文件。

5. 运行 ESLint

• 通过 npm run lint 命令运行 ESLint，检查项目中的 TypeScript 代码是否符合规范。

通过以上步骤，你可以成功配置 ESLint 以支持 TypeScript，并在项目中强制执行代码规范。