国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

在Typescript項目中,如何優(yōu)雅的使用ESLint和Prettier

chemzqm / 1304人閱讀

摘要:對于項目的編碼規(guī)范而言,主要有兩種選擇和。此外由于性能問題,官方?jīng)Q定全面采用,甚至把倉庫作為測試平臺,而的解析器也成為獨立項目,專注解決雙方兼容性問題。最近在我的項目的編碼規(guī)范中全量的用代替了針對其中遇到的問題做一個記錄。


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

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

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

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

在VSCode中使用ESLint

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

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

原文在我的博客中: https://github.com/forthealll...

歡迎star和收藏


一、用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ī)范

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

module.exports = {

    parser:  "@typescript-eslint/parser", //定義ESLint的解析器
    extends: ["plugin:@typescript-eslint/recommended"],//定義文件繼承的子規(guī)范
    plugins: ["@typescript-eslint"],//定義了該eslint文件所依賴的插件
    env:{                          //指定代碼的運行環(huán)境
        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,那么為了檢測和規(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: {             //自動發(fā)現(xiàn)React的版本,從而進行規(guī)范react代碼
        "react": {
            "pragma": "React",
            "version": "detect"
        }
    }, 
    parserOptions: {        //指定ESLint可以解析JSX語法
        "ecmaVersion": 2019,
        "sourceType": "module",
        "ecmaFeatures":{
            jsx:true
        }
    }
    rules: {
    
    }
}

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

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

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

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

其中:

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配置

??為了開發(fā)方便我們可以在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": {
      "pre-commit": "npm run lint"
    }
},

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

??接著來看lint-staged,上述我們通過在husky的pre-comit這個hook中執(zhí)行一個npm命令來做lint校驗。除了定義個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的時候會做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的影響。

文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/54134.html

相關文章

  • Typescript項目如何優(yōu)雅使用ESLintPrettier

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

    WilsonLiu95 評論0 收藏0
  • Typescript項目如何優(yōu)雅使用ESLintPrettier

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

    琛h。 評論0 收藏0
  • Nuxt項目支持eslint+pritter+typescript

    摘要:腳手架安裝好的基本項目項目名,如,按照提示安裝你想要的東西,本次項目預裝模式下,默認的項目目錄如下保存自動格式化修復本人習慣縮進為個空格,但是生成的項目默認為個,因此需要更改配置文件下的更改為保存時自動修復錯誤保存自動格式化開啟支 腳手架安裝好nuxt的基本項目 npx create-nuxt-app ,如:npx create-nuxt-app nuxt-ts,按照提示安裝你想要的...

    draveness 評論0 收藏0
  • Web 項目編碼規(guī)范化工具

    摘要:項目編碼規(guī)范化工具工具代碼校驗工具,讓代碼更一致和避免。在配置文件到項可對單條規(guī)則一一進行改寫。以下以項目需校驗文件為例參考鏈接一步一步,統(tǒng)一項目中的編碼規(guī)范 Web 項目編碼規(guī)范化工具 工具 ESLint The pluggable linting utility for JavaScript and JSX 代碼校驗工具(linting utility),讓代碼更一致和避免 bug...

    meislzhua 評論0 收藏0
  • 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

    摘要:從到再到搭建編寫構建一個前端項目選擇現(xiàn)成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現(xiàn)成的項目模板自己搭建項目骨架。使用版本控制系統(tǒng)管理源代碼項目搭建好后,需要一個版本控制系統(tǒng)來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現(xiàn)成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種:選擇現(xiàn)成的項目模板、自己搭建項目骨架。 ...

    call_me_R 評論0 收藏0

發(fā)表評論

0條評論

chemzqm

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<