为TypeScript项目添加Eslint和Prettier

surile
2021-06-25 / 0 评论 / 73 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年06月25日,已超过165天没有更新,若内容或图片失效,请留言反馈。

众所周知,代码质量检查和代码风格的统一对于一个项目来说非常的重要,也有助于避免一些低级的错误。相信很多人都已经在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-prettiereslint-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/recommendedeslint-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就能引入全部配置了

0

评论 (0)

取消