一、概述：

• Typescript 主要有兩種選擇 ESLint 和 TSLint；
• ESLin：規(guī)范 JS 代碼，通過配置解析器，也能規(guī)范 TS 代碼；
• TypeScript 官方采用 ESLint，把倉庫作為測試平臺，ESLint 的 TypeScript 解析器成為獨立項目，解決雙方兼容性問題。

二、 ESLint 規(guī)范 Typescript

• 首先安裝依賴：

npm i -d eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

• 這三個依賴分別是：
  • eslint: ESLint 的核心代碼；
  • @typescript-eslint/parser：ESLint 的解析器，解析 TypeScript，檢查和規(guī)范 TypeScript 代碼；
  • @typescript-eslint/eslint-plugin：ESLint 插件，包含了定義好的檢測 TypeScript 代碼的規(guī)范。
• 根目錄下新建 .eslintrc.js 文件，該文件中定義了 ESLint 的基礎配置，一個最為簡單的配置如下所示：

module.exports = {
    // 定義ESLint的解析器
    parser: '@typescript-eslint/parser',
    // 定義文件繼承的子規(guī)范
    extends: ['plugin:@typescript-eslint/recommended'],
    // 定義了該eslint文件所依賴的插件
    plugins: ['@typescript-eslint'],
    // 指定代碼的運行環(huán)境
    env: {
        browser: true,
        node: true,
    }
};

• 在 TS 項目中必須執(zhí)行解析器為@typescript-eslint/parser，才能正確的檢測和規(guī)范 TS 代碼；
• env 環(huán)境變量配置：如 console 屬性只有在 browser 環(huán)境下才會存在，如果沒有設置支持 browser，不能報 console is undefined 的錯誤。

三、ESLint 規(guī)范 React

• TS 項目中同時使用 React：必須安裝插件 eslint-plugin-react，增加配置：

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'plugin:react/recommended',
        'plugin:@typescript-eslint/recommended'
    ],
    // 使用推薦的React代碼檢測規(guī)范
    plugins: ['@typescript-eslint'],
    env: {
        browser: true,
        node: true,
    },
    // 自動發(fā)現(xiàn)React的版本，從而進行規(guī)范react代碼
    settings: {
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    },
    // 指定ESLint可以解析JSX語法
    parserOptions: {
        "ecmaVersion": 2019,
        "sourceType": 'module',
        "ecmaFeatures": {
            jsx: true
        }
    },
    rules: {

    }
};

• 在 Rules 中自定義 React 代碼編碼規(guī)范。

四、結合 Prettier 和 ESLint 來規(guī)范代碼

• Prettier 中文：漂亮的、美麗的，是一個流行的代碼格式化的工具；
• 首先安裝三個依賴：

npm i -g prettier eslint-config-prettier eslint-plugin-prettier

• 參數(shù)：
  • prettier：prettier 插件的核心代碼；
  • eslint-config-prettier：解決 ESLint 中的樣式規(guī)范和 prettier 中樣式規(guī)范的沖突，以 prettier 的樣式規(guī)范為準，使 ESLint 中的樣式規(guī)范自動失效；
  • eslint-plugin-prettier：將 prettier 作為 ESLint 規(guī)范來使用。
• 項目根目錄下創(chuàng)建 .prettierrc.js 文件：

module.exports = {
    "printWidth": 120,
    "semi": false,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": false,
    "jsxBracketSameLine": true,
    "arrowParens": "avoid",
    "insertPragma": true,
    "tabWidth": 4,
    "useTabs": false
};

• 修改 .eslintrc.js 文件，引入 prettier：

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'prettier/@typescript-eslint',
        'plugin:prettier/recommended'
    ],
    settings: {
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    },
    parserOptions: {
        "ecmaVersion": 2019,
        "sourceType": 'module',
        "ecmaFeatures": {
            jsx: true
        }
    },
    env: {
        browser: true,
        node: true,
    }
};

上述新增的 extends 的配置中：

• prettier/@typescript-eslint：使 @typescript-eslint 中的樣式規(guī)范失效，遵循prettier 中的樣式規(guī)范；
• plugin:prettier/recommended：使用 prettier 中的樣式規(guī)范，且如果使用 ESLint 會檢測 prettier 的格式問題，同樣將格式問題以 error 的形式拋出。

五、在 VSCode 中集成 ESLint 配置

• VSCode 中集成 ESLint 的配置，使代碼在保存或者代碼變動時，自動進行 ESLint的 fix 過程；
• 首先安裝 VSCode 的 ESLint 插件，在 settings.json 文件中修改其配置文件為：

{
  "eslint.enable": true,
  //是否開啟vscode的eslint
  "eslint.autoFixOnSave": true,
  //是否在保存的時候自動fix eslint
  "eslint.options": {
    //指定vscode的eslint所處理的文件的后綴
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
  "eslint.validate": [
    //確定校驗準則
    "javascript",
    "javascriptreact",
    {
      "language": "html",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ]
}

注意：

• eslint.options 中可以通過 configFile 屬性來執(zhí)行 eslint 規(guī)范的絕對路徑，默認會向上查找，在根路徑中指定；
• eslint.validate 中必須通過 { language: XXX} 的形式來指定 typescript 和typescriptreact。

六、husky 和 lint-staged 構建代碼工作流

• husky、Husky 可以阻擋住不好的代碼提交和推送；
• 在 package.json 中定義如下的 script：

"scripts": {
    "lint": "eslint src --fix --ext .ts,.tsx "
}

• 在 package.json 定義 husky 的配置：

"husky": {
    "hooks": {
    // 執(zhí)行一個 npm 命令來做 lint 校驗
    "pre-commit": "npm run lint"
    }
}

• 在 git 的 hook 的階段來執(zhí)行相應的命令，比如上述的例子是在 pre-commit 這個 hook 也就是在提交之前進行 lint 的檢測；
• 用 pre-comit 在 hook 中定義了 npm lint 命令來做 lint 校驗；
• 也可以直接通過使用 lint-staged，來在提交前檢測代碼的規(guī)范，需修改package.json 文件：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{.ts,.tsx}": [
      "eslint",
      "git add"
    ]
  }
}

• 同樣實現(xiàn) git commit 的時候做 lint 的檢測。

七、gitlab 的 CI/CD 規(guī)范代碼

• 通過 git 的 hook 來執(zhí)行代碼的規(guī)范檢測有一個問題：

  • 在 git commit 的時候通過 --no-verify來跳過代碼的規(guī)范檢測；
  • 某些情況下，對于某一個重要分支，該分支上的代碼必須完整通過代碼的規(guī)范檢測，此時可以使用 gitlab 的 CI/CD。

• 同樣在 package.json 中增加一個 lint 的 npm 命令：

"scripts": {
 "lint": "eslint src --fix --ext .ts,.tsx "
}

• 在根目錄增加 .gitlab-ci.yml 文件，配置為：

stages:
  - lint

before_script:
  - git fetch --all
  - npm install

lint:
  stage: lint
  script:
    - npm run lint
  only
  - 特定分支1
  - 特定分支2

• 配置相應的 gitlab runner，之后在指定的分支上的提交或者 merge 都會進行所配置的命令檢測。這樣保證了特定分支不受 git commit 跳過操作 --no-verify 的影響。