快捷導(dǎo)航

Typescript項(xiàng)目優(yōu)雅的使用ESLint和Prettier

更新時(shí)間：2026年05月14日 08:56:22 作者：yuxiaoliang

對于Typescript項(xiàng)目的編碼規(guī)范而言,主要有兩種選擇ESLint和TSLint,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

對于Typescript項(xiàng)目的編碼規(guī)范而言，主要有兩種選擇ESLint和TSLint。ESLint不僅能規(guī)范js代碼，通過配置解析器，也能規(guī)范TS代碼。此外由于性能問題，TypeScript 官方?jīng)Q定全面采用ESLint，甚至把倉庫作為測試平臺(tái)，而 ESLint 的 TypeScript 解析器也成為獨(dú)立項(xiàng)目，專注解決雙方兼容性問題。最近在我的項(xiàng)目的編碼規(guī)范中全量的用ESLint代替了TSLint,針對其中遇到的問題做一個(gè)記錄。

用ESLint來規(guī)范Typescript代碼
用ESLint來規(guī)范React代碼
結(jié)合Prettier和ESLint來規(guī)范代碼
在VSCode中使用ESLint
husky和lint-staged構(gòu)建代碼工作流
gitlab的CI/CD來規(guī)范代碼

一、用ESLint來規(guī)范Typescript代碼

首先安裝依賴：

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

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

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

安裝好這3個(gè)依賴包之后，在根目錄下新建.eslintrc.js文件，該文件中定義了ESLint的基礎(chǔ)配置，一個(gè)最為簡單的配置如下所示：

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

在ts項(xiàng)目中必須執(zhí)行解析器為@typescript-eslint/parser，才能正確的檢測和規(guī)范TS代碼
env環(huán)境變量配置，形如console屬性只有在browser環(huán)境下才會(huì)存在，如果沒有設(shè)置支持browser,那么可能報(bào)console is undefined的錯(cuò)誤。

二、用ESLint來規(guī)范React代碼

如果在你的TS項(xiàng)目中同時(shí)使用了React，那么為了檢測和規(guī)范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,
    },
    settings: {             //自動(dòng)發(fā)現(xiàn)React的版本，從而進(jìn)行規(guī)范react代碼
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    }, 
    parserOptions: {        //指定ESLint可以解析JSX語法
        "ecmaVersion": 2019,
        "sourceType": 'module',
        "ecmaFeatures":{
            jsx:true
        }
    }
    rules: {
    
    }
}

在Rules中可以自定義你的React代碼編碼規(guī)范。

三、結(jié)合Prettier和ESLint來規(guī)范代碼

Prettier中文的意思是漂亮的、美麗的，是一個(gè)流行的代碼格式化的工具，我們來看如何結(jié)合ESLint來使用。首先我們需要安裝三個(gè)依賴：

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

其中：

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

然后在項(xiàng)目的根目錄下創(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會(huì)檢測prettier的格式問題，同樣將格式問題以error的形式拋出

四、在VSCode中集成ESLint配置

為了開發(fā)方便我們可以在VSCode中集成ESLint的配置，使得代碼在保存或者代碼變動(dòng)的時(shí)候自動(dòng)進(jìn)行ESLint的fix過程。

首先需要安裝VSCode的ESLint插件，安裝插件完畢后，在settings.json文件中修改其配置文件為：

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

主要注意的有兩點(diǎn)：

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

五、husky和lint-staged構(gòu)建代碼工作流

首先來看husky,Husky 能夠幫你阻擋住不好的代碼提交和推送,首先我們在package.json中定義如下的script:

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

接著在package.json定義husky的配置：

 "husky": {
   "hooks": {
      "pre-commit": "npm run lint"
    }
},

我們在git的hook的階段來執(zhí)行相應(yīng)的命令，比如上述的例子是在pre-commit這個(gè)hook也就是在提交之前進(jìn)行l(wèi)int的檢測。

接著來看lint-staged，上述我們通過在husky的pre-comit這個(gè)hook中執(zhí)行一個(gè)npm命令來做lint校驗(yàn)。除了定義個(gè)npm lint命令外，我們也可以直接通過使用lint-staged，來在提交前檢測代碼的規(guī)范。使用lint-staged來規(guī)范代碼的方式如下，我們修改package.json文件為：

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

同樣在git commit的時(shí)候會(huì)做lint的檢測。

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

僅僅通過git的hook來執(zhí)行代碼的規(guī)范檢測有一個(gè)問題，我們可以在git commit的時(shí)候通過--no-verify來跳過代碼的規(guī)范檢測。但是某些情況下，我們對于某一個(gè)重要分支，該分支上的代碼必須完整通過代碼的規(guī)范檢測，此時(shí)我們可以使用gitlab的CI/CD。

同樣在package.json中增加一個(gè)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

然后配置相應(yīng)的gitlab runner，這里不具體詳描，最后的結(jié)果就是在我們指定的分支上的提交或者merge都會(huì)進(jìn)行所配置的命令檢測。這樣保證了特定分支不受git commit跳過操作--no-verify的影響。

到此這篇關(guān)于Typescript項(xiàng)目優(yōu)雅的使用ESLint和Prettier的文章就介紹到這了,更多相關(guān)Typescript使用ESLint和Prettier內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: