前言

使用Typescript好幾年了，之前一直是使用TsLint做代碼檢查。然而TsLint已不再維護(hù)，所以下定決心，把項(xiàng)目中的TsLint換成EsLint。移除TsLint相關(guān)部分就不述說了，僅記錄EsLint配置過程。

資料

EsLint
EsLint Rules
Typescript-EsLint

EsLint的使用

安裝依賴

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

這三個(gè)依賴分別是：

• eslint: EsLint的核心代碼
• @typescript-eslint/parser：ESLint的解析器，用于解析typescript，從而檢查和規(guī)范Typescript代碼
• @typescript-eslint/eslint-plugin：這是一個(gè)ESLint插件，包含了各類定義好的檢測(cè)Typescript代碼的規(guī)范

添加配置文件

npx eslint --init

根據(jù)實(shí)際項(xiàng)目選擇，我選擇的是js文件，根目錄下增加.eslintrc.js文件。（建議選擇js文件，json不可以寫注釋）

修改配置文件

主要是修改rules中的相關(guān)配置，具體可查看官方配置

Prettier的使用

安裝依賴

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

這三個(gè)依賴分別是：

• prettier：prettier插件的核心代碼
• eslint-config-prettier：解決ESLint中的樣式規(guī)范和prettier中樣式規(guī)范的沖突，以prettier的樣式規(guī)范為準(zhǔn)，使ESLint中的樣式規(guī)范自動(dòng)失效
• eslint-plugin-prettier：將prettier作為ESLint規(guī)范來(lái)使用

添加配置文件

在項(xiàng)目的根目錄下創(chuàng)建.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中的樣式規(guī)范失效，遵循prettier中的樣式規(guī)范
• plugin:prettier/recommended：使用prettier中的樣式規(guī)范，且如果使得ESLint會(huì)檢測(cè)prettier的格式問題，同樣將格式問題以error的形式拋出

使用husky和lint-staged構(gòu)建代碼

安裝依賴

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"
        ]
    }

這樣，在執(zhí)行g(shù)it commit時(shí)，EsLint會(huì)檢查提交的代碼。