使用tslint和prettier規範代碼

eslint是檢查JavaScript的,而tslint是檢查typescript的,固然你也能夠在eslint配置中增長對typescript的支持,用來檢查typescriptprettier是用來檢查代碼風格的,項目中常屏蔽掉tslint中有關代碼規範的規則,這部分交由prettier校驗,tslint僅僅校驗代碼功能性錯誤。html

有兩種方法能夠同時使用Prettiertslint。第一種方法是簡單地讓每一個插件執行其預期的工做:prettier校驗格式和tslint校驗錯誤。爲此,您須要禁用tslint中檢查格式的任何規則,並讓Prettier自動處理全部格式。第二種方法是隻用tslint插件,用tslint運行prettier校驗格式。react

一、tslint插件+prettier插件

vscode編輯器中安裝tslintprettier插件,並在setting.json中配置。
image.pnggit

image.png

tslint保存時校驗配置github

"editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
    // For TSLint
    "source.fixAll.tslint": true,
    // For Stylelint
    "source.fixAll.stylelint": true
}

prettier保存時校驗配置typescript

"editor.formatOnSave": true,

使用tslint-config-prettier關閉tslint中有關格式的規則,避免tslintprettier在格式規則上產生衝突。
image.pngjson

當按ctrl+s保存代碼時,tslint插件會自動按照默認配置文件(項目根目錄下的tslint.json)檢查代碼錯誤,prettier插件會自動按照默認配置文件(項目根目錄下的.prettierrc)檢查代碼風格,並自動矯正。編輯器

舉個例子:
tslint.jsonspa

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:latest",
    "tslint-react",
    "tslint-config-prettier" // 安裝tslint-config-prettier後,tslint-config-prettier禁用TSLint的全部格式設置規則, TSLint 和 prettier在代碼格式化規則上就不會有衝突了
  ],
  "jsRules": {},
  "rules": {
    "object-literal-sort-keys": false,
    "no-console": true,
    "jsx-no-lambda": false,
    "no-submodule-imports": false,
    "no-implicit-dependencies": false
  }
}

.prettierrc插件

{
  "singleQuote": false, // 雙引號
  "semi": true, // 分號
  "endOfLine": "auto"
}

按下CTRL+S效果
inline.gif3d

二、tslint插件+tslint-plugin-prettier

這種方式就不須要安裝prettier插件或者關閉prettier插件,使用tslint來執行prettier配置。

安裝和配置tslint插件跟上面同樣

安裝tslint-plugin-prettier並在tslint中進行配置。tslint-plugin-prettier的做用是將Prettier做爲TSLint規則運行,並將差別報告爲單個TSLint問題。

對於tslint@^5.2.0

{
  "rulesDirectory": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": true
  }
}

對於tslint@^5.0.0

{
  "extends": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": true
  }
}

若是沒有提供選項,它將嘗試加載.editorconfig做爲Prettier的默認選項。

{
  "extends": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": true
  }
}

若是您不想加載.editorconfig,請在第三個參數中將其禁用。

{
  "extends": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": [true, null, { "editorconfig": false }]
  }
}

若是您想指定要使用的配置文件,只需將其路徑(相對於process.cwd())放在第二個參數中,如下示例說明了如何從中加載配置文件<cwd>/configs/.prettierrc

{
  "extends": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": [true, "configs/.prettierrc"]
  }
}

若是您想手動指定選項,只需在第二個參數中輸入「 prettier規則 」,例如:

{
  "extends": ["tslint-plugin-prettier"],
  "rules": {
    "prettier": [true, { "singleQuote": true }]
  }
}

在根目錄下建立prettier.json用於配置格式規則,注意文件名不能用.prettierrc,否則配置不生效。

prettier.json

{
  "singleQuote": false,
  "semi": true,
  "endOfLine": "auto"
}

tslint.json

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:latest",
    "tslint-react",
    "tslint-config-prettier" // 安裝tslint-config-prettier後,tslint-config-prettier禁用TSLint的全部格式設置規則, TSLint 和 prettier在代碼格式化規則上就不會有衝突了
  ],
  "jsRules": {},
  "rules": {
    "object-literal-sort-keys": false,
    "no-console": false,
    "jsx-no-lambda": false,
    "no-submodule-imports": false,
    "no-implicit-dependencies": false,
    "prettier": [true, "prettier.json"] // 指定了prettierrc配置文件後,只有第一次CTRL+S保存有用,後續保存都不起做用,緣由不明
  },
  "rulesDirectory": ["tslint-plugin-prettier"]
}

按下CTRL+S效果:
1.gif

三、補充:如何配置在tslint.json添加註釋不會產生警告

setting.json中加上以下配置,會以json+comments模式解析tslint.json文件

"files.associations": {
    "tslint.json": "jsonc"
}

效果:
image.png

demo地址:https://github.com/Revelation...

參考:
tslint-plugin-prettier插件使用:https://github.com/prettier/t...
vscode prettier插件:https://marketplace.visualstu...
vscode tslint插件:https://marketplace.visualstu...

相關文章
相關標籤/搜索