TypeScript 如何配置 ESLint

平时写代码时，你有没有过这种经历：写了好几百行代码，最后运行却因为一个拼写错误或者变量没定义的小问题报错半天？尤其是用JavaScript做开发时，这种“看不见的小错”简直像拆盲盒——不知道什么时候就蹦出来坑你。这时候，ESLint就像个“代码小管家”，能提前把这些小问题揪出来。但如果是用TypeScript写代码，这个小管家得先调整一下配置，才能跟上TS的“节奏”。

先把“小管家”和TS的“沟通桥梁”搭起来

要让ESLint能看懂TypeScript的代码，第一步得装两个关键工具。就像你要和外国人说话，得先买本翻译手册一样，这两个工具就是ESLint的TS翻译助手。一个是@typescript-eslint/parser，它负责把TS代码转成ESLint能理解的格式；另一个是@typescript-eslint/eslint-plugin，它给ESLint加了专门检查TS代码的规则，比如提醒你有没有用对TS的类型语法。

装的时候不用复杂，打开项目的终端，输入两行命令就行：

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

这里加--save-dev是因为这些工具只在开发时用，不用放到生产代码里。

给ESLint写个“工作手册”

装完工具后，得告诉ESLint怎么干活，这就需要创建一个.eslintrc配置文件。这个文件就像小管家的工作手册，你可以在里面定好规则——比如允许用哪种引号，不许有未定义的变量，还有专门给TS的规则。

举个实际的配置例子，打开.eslintrc文件，写这些内容就够日常用了：

`json

{

"parser": "@typescript-eslint/parser",

"plugins": ["@typescript-eslint"],

"extends": [

"eslint:recommended",

"plugin:@typescript-eslint/recommended"

]

}

`

这里的parser就是刚才装的TS翻译器，plugins告诉ESLint用TS专属的检查插件，extends是借了官方推荐的规则：eslint:recommended是JS的基础规则，plugin:@typescript-eslint/recommended是TS的专属推荐规则，这样小管家就不会瞎干活了。

别忘“告诉”ESLint你的TS代码在哪

有时候ESLint找不到你的TS文件，就会瞎报很多错误。这时候得加个.eslintignore文件，告诉它哪些文件不用查，比如打包后的dist文件夹，或者第三方依赖的node_modules。

举个简单的.eslintignore例子，写这些就行：

`

dist/

node_modules/

*.js

`

这样ESLint就只会盯着你自己写的TS代码，不会去管那些自动生成的文件。

最后加个“一键检查”的小按钮

为了不用每次都在终端里敲长长的命令，可以在package.json里加个脚本。就像给小管家装个一键检查的按钮，按一下就能自动查所有TS代码的问题。

在package.json的scripts里加一行：

"lint": "eslint src/**/*.ts"

这里的src/**/*.ts就是告诉ESLint，去查src文件夹里所有后缀是.ts的文件。以后要检查代码，只需要在终端输入npm run lint，小管家就会把所有能改的小问题列出来，比如“变量名用了驼峰，你这里用了下划线”“有个变量定义了但没用到”。

当然，要是觉得有些规则不符合你的习惯，比如不想让小管家提醒“未使用的变量”，还能在.eslintrc里改规则。比如加一行"rules": {"@typescript-eslint/no-unused-vars": "off"}，就能把这条规则关掉，完全贴合你自己的开发习惯。

这样一套配置下来，ESLint就能稳稳地帮你提前揪出TS代码里的小问题，不用等运行时才发现错误，写代码的效率自然就高了。