想起自己剛?cè)胄械臅r候，從svn上把代碼checkout下來，看到同事寫的代碼，大括號居然換行了。愛掏網(wǎng) - it200.com心中暗罵，這個人是不是個**，大括號為什么要換行？年輕氣盛的我，居然滿腔怒火，將空行一一刪掉。愛掏網(wǎng) - it200.com 但是關于代碼風格，我們很難區(qū)分誰對誰錯，不同的人有不同偏好，唯有強制要求才能規(guī)避爭論。愛掏網(wǎng) - it200.com
所以，團隊關于代碼風格必須遵循兩個基本原則：
- 少數(shù)服從多數(shù)；
- 用工具統(tǒng)一風格。愛掏網(wǎng) - it200.com
本文將介紹，如何使用ESLint + Prettier來統(tǒng)一我們的前端代碼風格。愛掏網(wǎng) - it200.com
首先，對應ESLint大多都很熟悉，用來進行代碼的校驗，但是Prettier（直譯過來就是"更漂亮的"）聽得可能就比較少了。愛掏網(wǎng) - it200.comjs作為一門靈活的弱類型語言，代碼風格千奇百怪，一千個人寫js就有一千種寫法。愛掏網(wǎng) - it200.com雖然js沒有官方推薦的代碼規(guī)范，不過社區(qū)有些比較熱門的代碼規(guī)范，比如standardjs、airbnb。愛掏網(wǎng) - it200.com使用ESLint配合這些規(guī)范，能夠檢測出代碼中的潛在問題，提高代碼質(zhì)量，但是并不能完全統(tǒng)一代碼風格，因為這些代碼規(guī)范的重點并不在代碼風格上（雖然有一些限制）。愛掏網(wǎng) - it200.com
下面開始安利，Prettier。愛掏網(wǎng) - it200.com
Prettier是一個能夠完全統(tǒng)一你和同事代碼風格的利器，假如你有個c++程序員轉(zhuǎn)行過來寫前端的同事，你發(fā)現(xiàn)你們代碼風格完全不一樣，你難道要一行行去修改他的代碼嗎，就算你真的去改，你的需求怎么辦，所以沒有人真的愿意在保持代碼風格統(tǒng)一上面浪費時間。愛掏網(wǎng) - it200.com選擇Prettier能夠讓你節(jié)省出時間來寫更多的bug（不對，是修更多的bug），并且統(tǒng)一的代碼風格能保證代碼的可讀性。愛掏網(wǎng) - it200.com
看看Prettier干的好事。愛掏網(wǎng) - it200.com
能支持jsx
唯一的遺憾是，暫時還不能格式化vue模版文件中template部分。愛掏網(wǎng) - it200.com