使用EsLint+Prettier规范TypeScript代码

前言

使用Typescript好几年了，之前一直是使用TsLint做代码检查。然而TsLint已不再维护，所以下定决心，把项目中的TsLint换成EsLint。移除TsLint相关部分就不述说了，仅记录EsLint配置过程。

资料

EsLint
EsLint Rules
Typescript-EsLint

EsLint的使用

安装依赖

npm i --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

这三个依赖分别是：

• eslint: EsLint的核心代码
• @typescript-eslint/parser：ESLint的解析器，用于解析typescript，从而检查和规范Typescript代码
• @typescript-eslint/eslint-plugin：这是一个ESLint插件，包含了各类定义好的检测Typescript代码的规范

添加配置文件

npx eslint --init

根据实际项目选择，我选择的是js文件，根目录下增加.eslintrc.js文件。（建议选择js文件，json不可以写注释）

修改配置文件

主要是修改rules中的相关配置，具体可查看官方配置

Prettier的使用

安装依赖

npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

这三个依赖分别是：

• prettier：prettier插件的核心代码
• eslint-config-prettier：解决ESLint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使ESLint中的样式规范自动失效
• eslint-plugin-prettier：将prettier作为ESLint规范来使用

添加配置文件

在项目的根目录下创建.prettierrc.js文件，并添加如下配置

module.exports = {
    singleQuote: true,
    trailingComma: 'es5',
    printWidth: 120,
    tabWidth: 4,
    useTabs: false,
    semi: true,
    bracketSpacing: true
};

将Prettier添加到EsLint中

修改.eslintrc.js文件，在extends中增加

        'prettier/@typescript-eslint',
        'plugin:prettier/recommended',

其中：

• prettier/@typescript-eslint：使得@typescript-eslint中的样式规范失效，遵循prettier中的样式规范
• plugin:prettier/recommended：使用prettier中的样式规范，且如果使得ESLint会检测prettier的格式问题，同样将格式问题以error的形式抛出

使用husky和lint-staged构建代码

安装依赖

npm i --save-dev husky lint-staged

修改package.json

添加以下代码

    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "src*/**/*.ts": [
            "prettier --config .prettierrc.js --write",
            "eslint",
            "git add"
        ],
        "src*/**/*.json": [
            "prettier --config .prettierrc.js --write",
            "eslint",
            "git add"
        ]
    }

这样，在执行git commit时，EsLint会检查提交的代码。