为TypeScript项目添加Eslint和Prettier

众所周知，代码质量检查和代码风格的统一对于一个项目来说非常的重要，也有助于避免一些低级的错误。相信很多人都已经在JavaScript项目中使用ESLint和Prettier了，但我猜大多数人不太清楚如何在TypeScript项目中进行配置，本文就来介绍具体的配置步骤。

为TypeScript设置ESLint

让ESLint支持TypeScript

ESLint本身不是为了TypeScript设计的，但是它能通过配置parser来支持不同的语言，进而实现对TypeScript代码的检查和修复。

yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --dev

eslint: 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和需要类型信息的规则时会用到。

配置Prettier

Prettier和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就能引入全部配置了

为TypeScript设置ESLint

让ESLint支持TypeScript

配置Prettier

评论 (0)