eslint
是檢查JavaScript
的,而tslint
是檢查typescript
的,固然你也能夠在eslint
配置中增長對typescript
的支持,用來檢查typescript
。prettier
是用來檢查代碼風格的,項目中常屏蔽掉tslint
中有關代碼規範的規則,這部分交由prettier
校驗,tslint
僅僅校驗代碼功能性錯誤。html
有兩種方法能夠同時使用Prettier
和tslint
。第一種方法是簡單地讓每一個插件執行其預期的工做:prettier
校驗格式和tslint
校驗錯誤。爲此,您須要禁用tslint
中檢查格式的任何規則,並讓Prettier
自動處理全部格式。第二種方法是隻用tslint
插件,用tslint
運行prettier
校驗格式。react
在vscode
編輯器中安裝tslint
和prettier
插件,並在setting.json
中配置。
git
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
中有關格式的規則,避免tslint
與prettier
在格式規則上產生衝突。
json
當按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
效果
3d
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效果:
在setting.json
中加上以下配置,會以json+comments
模式解析tslint.json
文件
"files.associations": { "tslint.json": "jsonc" }
效果:
demo地址:https://github.com/Revelation...
參考:
tslint-plugin-prettier插件使用:https://github.com/prettier/t...
vscode prettier插件:https://marketplace.visualstu...
vscode tslint插件:https://marketplace.visualstu...