TypeScript ESLint 规则怎么配

前端开发时，是不是总遇到“代码写得乱，改需求时找bug花半天”的问题？尤其是用TypeScript写项目，明明加了类型，还是容易出现命名不规范、多余空行、函数参数类型写得太随意的情况——这时候靠自己检查效率太低，ESLint规则就能帮你自动揪错。今天就用生活化的例子，讲清怎么给TypeScript配合适的ESLint规则，不用记复杂术语，跟着做就行。

第一步：先搭好基础框架

要让ESLint支持TypeScript，不能直接用普通的JS规则，得先装俩关键工具。就像你煮奶茶，得先有茶底和奶，不能随便抓个东西冲。

先装依赖：在项目终端敲 npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin。这里的@typescript-eslint/parser是“翻译官”，能把TypeScript代码转成ESLint能看懂的格式；@typescript-eslint/eslint-plugin是“规则库”，专门管TypeScript专属的代码规范。

然后在项目根目录新建.eslintrc.cjs文件（后缀选cjs是为了兼容Node.js的配置格式），这就像奶茶的“配方本”，所有规则都写在这儿。

第二步：配核心规则，抓最常见的问题

规则不用全抄网上的，挑日常最容易犯的问题配就行，就像买奶茶只加你爱喝的配料，不搞花里胡哨的。

基础兼容规则

先让ESLint能认TypeScript的类型，在.eslintrc.cjs里写：

`js

module.exports = {

parser: '@typescript-eslint/parser', // 用刚才的翻译官

plugins: ['@typescript-eslint'], // 加载TypeScript规则库

extends: [ // 用官方预设的规范，省得自己瞎写

'eslint:recommended',

'plugin:@typescript-eslint/recommended'

]

}

`

这一步就像奶茶选了标准配方，先保证基础不翻车。

日常实用规则

再补几个高频实用的规则，解决实际麻烦：

• 变量没用到就标红：比如你声明了一个函数参数，却没在函数里用，ESLint会报错，避免写“无效代码”；
• 命名要规范：变量用小驼峰（比如userName，不能写成User_Name），类用大驼峰（比如UserInfo），避免看到代码分不清是啥；
• 类型不能写“ any ”：比如明明可以写string，却偷懒写any，会让TypeScript的类型保护失效，这是新手最容易犯的错。

这些规则的配置也很简单，在rules项里写就行，就像给奶茶加珍珠、加椰果：

`js

rules: {

'@typescript-eslint/no-unused-vars': 'error',

'@typescript-eslint/naming-convention': [

'error',

{ selector: 'variable', format: ['camelCase'] },

{ selector: 'class', format: ['PascalCase'] }

],

'@typescript-eslint/no-explicit-any': 'warn'

}

`

这里的error是“必须改，不改不让提交”，warn是“提醒你，不改也能交，但最好改”，就像珍珠要加、椰果可选。

第三步：让规则生效，不踩无关代码

有时候ESLint会检查node_modules里的第三方代码，或者编译后的JS文件，这些根本不用管，得让规则只查自己写的代码。就像买奶茶要选正常的料，不能把包装纸加进去。

在.eslintrc.cjs里加ignorePatterns：

`js

ignorePatterns: ['node_modules/', 'dist/', '*.js']

`

这样ESLint就只查你写的TypeScript文件，不会乱报无关的错。

最后，在package.json的scripts里加一句 "lint": "eslint . --ext .ts,.tsx"，每次要检查代码时，敲npm run lint，就能自动找出所有不符合规则的地方。不用再盯着屏幕逐行找，省下来的时间多喝杯奶茶不好吗？