使用Prettier來規範你的Angular項目

在實際項目中，我們經常會遇到團隊人員寫的代碼風格不統一，尤其是前端代碼。比如在JavaScript中，字符串可以是使用單引號'This is string'，也可以使用雙引號"This is string"。對於JavaScript語言來說，這兩種格式都是正確的，但是對於一個項目來講，這就是沒有規範的表現。

今天，我們就來分享一個叫prettier的前端工具，來實現我們前端項目的規範化。

在Angular項目中集成prettier

創建一個Angular項目

ng new prettierProject

安裝prettier

npm install --save-dev --save-exact prettier

配置prettier

{
 "singleQuote": true,
 "tabWidth": 2,
 "trailingComma": "none",
 "semi": true,
 "bracketSpacing": false,
 "printWidth": 140,
 "overrides": [ 

 {
 "files": [
 "*.json",
 ".eslintrc",
 ".tslintrc",
 ".prettierrc"
 ],
 "options": {
 "parser": "json",
 "tabWidth": 2
 }
 },
 {
 "files": [
 "*.ts"
 ],
 "options": {
 "parser": "typescript"
 }
 }
 ]
}

配置prettier ignore

在項目的根目錄下創建.prettierignore文件:

package.json
package-lock.json
dist
.angulardoc.json
.vscode/*

這個文件會告訴prettier那些文件不需要它進行格式化。

配置prettier和tslint共存

npm install --save-dev tslint-config-prettier

在tslint.json文件中添加下面的配置：

{
 "extends": [
 "tslint:latest",
 "tslint-config-prettier"
 ]
}

配置git hook

安裝husky，創建一個Git hook

npm install --save-dev pretty-quick husky

在package.json中添加下面的配置:

"husky": {
 "hooks": {
 "pre-commit": "pretty-quick --staged"
 }
}