前言
相信很多小夥伴都糾結過自己代碼的格式化問題，特別是團隊協作的時候，加上前端語言種類繁雜，各種語法糖+團隊個人的敲碼習慣，會讓你感覺到一團糟。
在過往，我們嘗試過很多方式，從EditorConfig到各種***Lint, 還要研究各種配置，還是沒辦法滿足我們的需求。
現在，prettier幫到你。
介紹
prettier是一個比較武斷的格式化工具（官方介紹的逗比級翻譯）。 我開始也是不能理解這個東西，因爲已經習慣了搗鼓各種lint配置，總想着能弄一套真的適合自己團隊風格習慣的配置出來， 結果就是一直在路上。
爲什麼說prettier是武斷的？ 它個各種lint工具不一樣，prettier只關注格式化，並不具有lint檢查語法等能力，所以開始大家可能會經常碰到lint搭配prettier會出現衝突。而且prettier獨斷自行一套格式化風格，雖然提供配置，也只是配置少量的關鍵屬性，能在一定程度上保證的代碼的風格統一，而且使用門檻極低， 關鍵的他的風格並不醜，更容易讓大家接受。
同時，prettier支持我們大前端目前大部分語言處理，包括JavaScript · Flow · TypeScript · CSS · SCSS · Less · JSX · Vue · GraphQL · JSON · Markdown，這代表着， 你幾乎可以用一個工具都能搞定所有的代碼格式化問題。
怎麼玩
其實prettier官網有提供各種使用的姿勢，這裏首先跟大家介紹我們常用的vscode編輯器集成
插件
首先安裝vscode的插件prettier-vscode
安裝成功後，編輯器默認的格式化處理就會被prettier代替， 默認快捷鍵是alt + shift + f配置
插件安裝成功後，編輯器的配置setting.json會出現prettier插件的相關配置節點，同時也能看到一些默認的配置信息。
這裏你可以針對個人或團隊喜好修改一些編輯器的全局配置，實際項目使用當中比較推薦用配置文件.prettierrc的方式進行針對性的配置，方便團隊協作使用。
配置文件的選項可以參考官網： https://prettier.io/docs/en/configuration.html
實例介紹
這裏第一篇首先給大家演示一下vue + typescript + scss項目的相關配置
vue的vscode神級插件vetur這裏就不多做介紹了，vetur的默認格式化工具也是使用的prettier，非常親近。
- typescirpt, 這裏仍然需要用到tslint 和 tslint-config-prettier配置
$ yarn add -D tslint tslint tslint-config-prettier在項目根目錄添加tslint.json, 這裏使用官方推薦配置: tslint:recommended
{
"extend": ["tslint:recommended", "tslint-config-prettier"],
}這樣tslin-config-prettier就會想你原先lint配置裏涉及到格式化話的配置覆蓋重寫，其他lint同理。
- scss, 這裏需要用到stylelint和prettier-stylelint
$ yanr add -D stylelint prettier-stylelint stylelint-config-ydj項目根目錄添加stylint配置文件.stylelintrc.js
module.exports = {
extends: [
'stylelint-config-ydj/scss', // your stylint config
'./node_modules/prettier-stylelint/config.js'
],
rules: {
'string-quotes': 'double'
}
};- prettier配置
項目級的配置，在項目根目錄添加配置文件.prettierrc
{
"eslintIntegration": true,
"stylelintIntegration": true,
"tabWidth": 4,
"singleQuote": true,
"semi": false
}PS: 這裏需要注意的點，目前vetur的template還沒有格式化還沒有很好的支持prettier，應該說目前官方只推薦使用js-beautify-html, 雖說即將棄用，但是reshape集成還沒有發佈正式版，使用js-beautify-html+prettier插件的時候可能會導致template塊無法格式化，我們要在編輯器配置裏面加入這段
// vetur configuration
"vetur.format.defaultFormatter.html": "js-beautify-html",
// prettier configuration
"prettier.disableLanguages": [
"vue"
],最終效果演示
其他類型的項目和語言配置請期待下一篇！