众所周知,代码质量检查和代码风格的统一对于一个项目来说非常的重要,也有助于避免一些低级的错误。相信很多人都已经在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-prettie
r:这是一个ESLint配置,该配置将可能与Prettier冲突的规则关闭,从而使得你能将Prettier于其他的ESLint配置(如eslint-config-airbn
b)一起使用。
目前推荐的实践是将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就能引入全部配置了
评论 (0)