大傢好，我是前端隊長[1]Daotin，想要獲取更多前端精彩內容，關註我，解鎖前端成長新姿勢。
以下正文：
今天介紹的是一款代碼格式化工具，特別適合團隊協作開發的時候使用。想必你應該正在使用，它叫 prettier。在 Github 上已達 39.6k star，如果你還不知道它的話就太可惜瞭。
prettier 介紹
官方自己介紹說，prettier是一款強勢武斷的代碼格式化工具，它幾乎移除瞭編輯器本身所有的對代碼的操作格式，然後重新顯示。就是為瞭讓所有用這套規則的人有完全相同的代碼。在團隊協作開發的時候更是體現出它的優勢。與eslint，tslint等各種格式化工具不同的是，prettier隻關心代碼格式化，而不關心語法問題。
prettier 的優勢也很明顯，它支持 HTML/JS/JSX/TS/JSON/CSS/SCSS/LESS/VUE 等主流文件格式。下面這張圖可以很好的進行說明：
也支持目前市面上所有主流的編輯器：
prettier 的使用
prettier的使用可分為兩種方式：
1、使用編輯器的插件
使用編輯器插件是最為方便的一種方法，編寫完代碼，隻需要一鍵即可格式化編寫的代碼，非常方便。
這裡已vscode為例進行說明，下面的配置是我自己的對於HTML/CSS/JS/LESS文件的prettier格式化規則：
{
// 使能每一種語言默認格式化規則
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
/* prettier的配置 */
"prettier.printWidth": 100, // 超過最大值換行
"prettier.tabWidth": 4, // 縮進字節數
"prettier.useTabs": false, // 縮進不使用tab，使用空格
"prettier.semi": true, // 句尾添加分號
"prettier.singleQuote": true, // 使用單引號代替雙引號
"prettier.proseWrap": "preserve", // 默認值。因為使用瞭一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本樣式進行折行
"prettier.arrowParens": "avoid", // (x) => {} 箭頭函數參數隻有一個時是否要有小括號。avoid：省略括號
"prettier.bracketSpacing": true, // 在對象，數組括號與文字之間加空格 "{ foo: bar }"
"prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化單獨設置
"prettier.endOfLine": "auto", // 結尾是 n r nr auto
"prettier.eslintIntegration": false, //不讓prettier使用eslint的代碼格式進行校驗
"prettier.htmlWhitespaceSensitivity": "ignore",
"prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填寫在項目的.prettierignore文件中
"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否單獨放一行
"prettier.jsxSingleQuote": false, // 在jsx中使用單引號代替雙引號
"prettier.parser": "babylon", // 格式化的解析器，默認是babylon
"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier
"prettier.stylelintIntegration": false, //不讓prettier使用stylelint的代碼格式進行校驗
"prettier.trailingComma": "es5", // 在對象或數組最後一個元素後面是否加逗號（在ES5中加尾逗號）
"prettier.tslintIntegration": false // 不讓prettier使用tslint的代碼格式進行校驗
}