为TypeScript项目添加Eslint和Prettier 众所周知，代码质量检查和代码风格的统一对于一个项目来说非常的重要，也有助于避免一些低级的错误。相信很多人都已经在JavaScript项目中使用ESLint和Prettier了，但我猜大多数人不太清楚如何在TypeScript项目中进行配置，本文就来介绍具体的配置步骤。为TypeScript设置ESLint让ESLint支持TypeScriptESLint本身不是为了TypeScript设计的，但是它能通过配置parser来支持不同的语言，进而实现对TypeScript代码的检查和修复。yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --deveslint: ESLint库本身@typescript-eslint/parser: TypeScript团队提供的ESLint parser，用于实现支持TypeScript代码的lint@typescript-eslint/eslint-plugin: ESLint插件，包含一系列TypeScript相关的ESLint规则然后，添加在项目根目录添加.eslintrc.js，一个基本的例子如下：module.exports = { parser: '@typescript-eslint/parser', // 指定parser plugins: ["@typescript-eslint"], // 启用插件 extends: [ 'plugin:@typescript-eslint/recommended', // 使用推荐的规则，来自@typescript-eslint/eslint-plugin ], parserOptions: { ecmaVersion: 2020, // 让parser按更新的语法来解析 sourceType: 'module', // 让parser按ESM解析 }, rules: { // 此处书写需要覆盖的配置 // 例如，"@typescript-eslint/explicit-function-return-type": "off", }, };其中有些细节值得一提：extends部分的plugin:@typescript-eslint/recommended是可选的，但对于绝大多数项目推荐使用，如果有不合适的可以单独调整。另外，在配置plugin:@typescript-eslint/recommended-requiring-type-checking中还包含了一系列依赖类型信息的规则，这些规则能帮助你更好的规范代码，但可能会带来一些性能上的损耗，相关信息详见 此处 。parserOptions支持的配置可以分别在ESLint文档和@typescript-eslint/parser的README中查阅，在配置ESLint支持React和需要类型信息的规则时会用到。配置PrettierPrettier和ESLint是两个独立的工具，Prettier专注于代码格式化，而ESLint专注于代码质量检查(顺便提供了一些修复)。Prettier的格式化和eslint --fix都会涉及代码风格的调整，有时二者会发生冲突。目前社区中处理这个问题的工具有以下几种：prettier-eslint：这是一个JS模块，其处理方式是将代码先由Prettier处理一次，再将输出进行eslint --fix得到最终结果。已不推荐使用。eslint-plugin-prettier：这是一个ESLint插件，该插件实现了一系列额外的ESLint规则。这些规则使用Prettier来检查代码格式，如果格式与Prettier期望的不同，会抛出对应的ESLint错误。同时这些错误在eslint --fix时会交由Prettier进行修复。eslint-config-prettier：这是一个ESLint配置，该配置将可能与Prettier冲突的规则关闭，从而使得你能将Prettier于其他的ESLint配置（如eslint-config-airbnb）一起使用。目前推荐的实践是将eslint-plugin-prettier和eslint-config-prettier结合使用，下面就介绍如何进行配置。首先需要安装相关依赖：yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev然后在根目录添加Prettier的配置文件：module.exports = { semi: true, trailingComma: 'all', singleQuote: true, printWidth: 120, tabWidth: 4, // 格式与eslint的overrides一致 "overrides": [ { "files": "*.json", "options": { tabWidth: 2 } }, { "files": ["*.html", "legacy/**/*.js"], "options": { printWidth: 240 } } ] };最后更新ESLint的配置即可：module.exports = { parser: '@typescript-eslint/parser', // 指定parser plugins: ["@typescript-eslint"], // 启用插件 extends: [ 'plugin:react/recommended', // 使用react的推荐规则 'plugin:@typescript-eslint/recommended', // 使用推荐的规则，来自@typescript-eslint/eslint-plugin 'plugin:prettier/recommended', // 使用eslint-plugin-prettier推荐的配置，注意需要在最后一个 ], parserOptions: { ecmaVersion: 2020, // 让parser按更新的语法来解析 sourceType: 'module', // 让parser按ESM解析 ecmaFeatures: { jsx: true, // 支持解析JSX }, }, rules: { // 此处书写需要覆盖的配置 // 例如，"@typescript-eslint/explicit-function-return-type": "off", }, settings: { react: { version: 'detect', // 让eslint-plugin-react自动检测react版本 }, }, };extends字段中添加的plugin:prettier/recommended是eslint-plugin-prettier提供的推荐配置，其中引用了eslint-config-prettier并设置相应的规则，这个配置相当于：{ "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error", "arrow-body-style": "off", "prefer-arrow-callback": "off" } }有时候会在网上的文章中看到，extends字段中除了prettier外还有prettier/react之类的配置，但从eslint-config-prettier的8.0.0版本开始只需要一个prettier就能引入全部配置了