ESLint 是一个非常常用的 JavaScript 代码检查工具，它可以帮你发现代码中存在的潜在问题，并提供修复建议。在开发过程中，使用 ESLint 可以让你避免因为一些低级错误而导致的不必要的 bug 和耗费时间的调试工作。在 TypeScript 中也可以使用 ESLint 进行代码检查，下面介绍如何在 TypeScript 项目中启用 ESLint 的步骤。
步骤
步骤一：安装 ESLint 和 TypeScript
如果你的项目还没有安装 ESLint 和 TypeScript，需要先安装：
npm install eslint typescript --save-dev
步骤二：初始化 ESLint 配置文件
在项目的根目录下执行下面的命令：
npx eslint --init
按照提示依次选择你的项目相关的配置，比如你所使用的 JavaScript 模块化方式、你希望 ESLint 对哪些类型的代码进行校验等等。在这里我们选择启用 TypeScript 检查功能：
? How would you like to use ESLint? To check syntax and find problems ❯ To check syntax, find problems, and enforce code style
? What type of modules does your project use? ❯ JavaScript modules (import/export) CommonJS (require/exports) None of these
? Which framework does your project use? React ❯ Vue.js None of these
? Does your project use TypeScript? ❯ Yes No
? Where does your code run? ❯ Browser Node
? What format do you want your config file to be in? JavaScript ❯ YAML JSON
接下来，ESLint 会在项目根目录下自动创建一个 .eslintrc.yml 文件，包含了所有你在初始化过程中选择的配置。对于 TypeScript 项目，这个文件的内容比较像这样：
-- -------------------- ---- ------- ---- -------- ---- ------- ---- ------- --------------------------- -------- - -------------------- -------- - -------------------- - ---------------------------------------展开代码
这个文件包含了一些初始配置，但仍然需要根据你的项目特殊性进行相关调整。
步骤三：安装 TypeScript 相关插件
ESLint 支持通过插件方式添加 TypeScript 的特殊规则，就像 linting React 或 Vue.js 一样。如果你想开启 TypeScript 的检查支持，可以安装如下插件：
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
安装完成后，你需要更新你的 .eslintrc.yml 配置文件，把安装的插件添加到 plugins 和 extends 中：
plugins: - '@typescript-eslint' extends: - 'eslint:recommended' - 'plugin:@typescript-eslint/recommended'
步骤四：在编辑器中启用 ESLint
最后，你需要在编辑器中使用 ESLint 相关插件。这个插件可以帮你在代码编辑时自动执行 ESLint 检查，并提示你代码中存在的问题。
如果你使用 VS Code 编辑器，可以安装 ESLint 插件，并在项目的根目录中创建一个 .vscode/settings.json 文件，添加如下配置：
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
这个配置会在保存文件时自动修复 ESLint 检查发现的问题。
结语
在 TypeScript 项目中开启 ESLint，可以帮助你更好地规范化你的代码风格，减少 bug，提高代码质量，从而提升开发效率。
使用以上步骤可以快速地开启 TypeScript 项目中的 ESLint，让你的代码更整洁、易读、易于维护和修改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d6d2a0a941bf7134cb1bea
