讓你的代碼更Prettier！代碼風格統一終極方案！

06-04

很多團隊還在為代碼風格頭疼。大到採用哪套代碼風格方案，小到tab和space之爭，都是團隊開發面臨的選擇。之前解決這種代碼統一問題的方案是：EditorConfig，或者ESLint。

這篇文章介紹Prettier。寫這篇文章前我搜了一下知乎，發現竟然還沒有人普及Prettier！

Prettier在官網首頁最想表達的就是：An opinionated code formatter，has few options...，這是必須在文章開始講清楚的。

什麼是opinionated?就是有態度有傾向，盡量減少配置項！相反的意思是Unopinionated.

開發框架也會分為opinionated和unopinionated。

這些討論就是：

What is opinionated software?

https://medium.com/@stueccles/the-rise-of-opinionated-software-ca1ba0140d5b

Opinionated vs modular web frameworks

例如在下面這篇文章中就說：

Angular is a full-featured 「opinionated」 framework.
React and Vue are 「non-opinionated」 frameworks.

Comparison with React vs Angular vs Vue Frameworks

以我接觸過的框架舉例來說，

Spring Boot就是opinionated：

注意：need very little Spring configuration。其實就是has few options。這也是Spring Boot區別於傳統直接基於Spring Framework開發的區別所在。而同樣，opinionated(has few options)也是Prettier和ESLint/EditorConfig所區別的一大特性。

opinionated的另外一個同義詞是Convention over configuration，或者coding by convention。

而Express是unopinionated：

Express只給你API，告訴你各種參數，其他都不給，想要更多的功能去找middleware或調用API自己寫。

如今很多前端項目都已經默認集成了Prettier，例如create-react-app，vue-cli，angular-cli：

https://github.com/facebook/create-react-app?

github.comvuejs/vue-cli?

github.comangular/angular-cli?

github.com

其實Prettier雖功能強大，但是卻簡單易用，所以大部分內容來自官網的翻譯解釋。

What is Prettier?
An opinionated code formatter
Supports many languages

Integrates with most editors
Has few options

什麼是Prettier？

一個有態度的代碼格式化工具

支持多種語言

繼承絕大多數編輯器

選項少

Why?
You press save and code is formatted
No need to discuss style in code review
Saves you time and energy

And more

為什麼用Prettier？

你只需要保存文件，代碼就會被整理格式

代碼複查的時候不需要再爭論風格

節約你的實踐和經歷

不集成編輯器，只用Prettier的用法：

把prettier加入到項目:
yarn add prettier --dev --exact
用一個文件驗證是否成功:
yarn prettier --write src/index.js
git提交代碼的時候自動運行prettier:
yarn add pretty-quick husky --dev
然後編輯 package.json:{
"scripts": {
"precommit": "pretty-quick --staged"
}
}

可集成的編輯器包括：

Atom：prettier/prettier-atom

Visual Studio Code：prettier/prettier-vscode

Sublime Text：JsPrettier - Packages - Package Control

WebStorm、PHPStorm：內置了Prettier，只需要配置就可以。

稍等啊，還沒寫完，剛開了個頭，晚上更新。