官方說的第 2 條：支持很多語言。看這幅圖就行了：
圖中右側的是 ，其中包含我比較關心的 Java。但是 Java 支持的并不好。Java 是我一直推廣的 團隊開發的， 倉庫地址在這里[4],處于 Alpha 階段，而且 自己也沒有正式使用。
官方說的第 3 條：可以和很多 IDE 集成。看這幅圖就行了：
我會在后面章節給出 和 的配置和使用方法。
第 4 條：Has few ，其實就是 的最直接體現。除了必要的設置項，不會再給你們更多。給你設置項越多，你們越亂，你們就會繼續爭吵！
蘋果手機就一個 Home 鍵，老子就這樣，接受不了的滾去安卓。安卓三個鍵，左側是返回鍵，右側是屬性鍵？你換手機的時候可不一定是這樣，你還要手動設置成自己習慣的。偶爾用一下別人的安卓，可能就和你的不一樣。鍵多了就形成了混亂，還是一個鍵好。這也是 的設計哲學， 就是代碼格式化工具中的 Apple。
的原理非常簡單：
不管你寫的代碼是個什么鬼樣子， 會去掉你代碼里的所有樣式風格，然后用統一固定的格式重新輸出。輸出時基本上只考慮一個參數，就是 line 。
例如你寫的這行代碼：
foo(arg1,?arg2,?arg3,?arg4);
一行裝得下這么多代碼，所以就不需要改。
如果你寫了下面代碼：
foo(reallyLongArg(),?omgSoManyParameters(),IShouldRefactorThis(),?isThereSeriouslyAnotherOne());
太長了， 就會重新改成這樣輸出：
foo(
??reallyLongArg(),
??omgSoManyParameters(),
??IShouldRefactorThis(),
??isThereSeriouslyAnotherOne()
);
咱們再仔細探究一下這個過程。不管你之前寫的代碼是什么樣，首先必須符合語法規范。 先把你的代碼轉換成一種中間狀態，叫 AST( Tree)。
用 提供的[5]更直觀一些：
上圖左側是手寫代碼，中間是 AST(去掉了任何代碼風格)，右側是重新輸出的結果。
就是在這個 AST 上重新按照自己的風格輸出代碼。
3.先練練手
這里先介紹一下最簡單的使用方法，讓大家有一個直觀感受。如果你正在學習 /，你的工程里只有幾個 JS/TS 文件，可以這樣用。但實際工程階段肯定是不會這么用的。 如何和其他工具整合很漂亮鼠標經過顯示詳細信息的js萬年歷代碼，以及如何設置，我們后面會講到。
NPM
mkdir learn-prettier && cd learn-prettier
npm init
npm install prettier --save-dev --save-exact
// 在learn-prettier/src目錄下創建index.js文件，然后自己寫一些JS代碼。JS代碼用上文那個超長的foo(......)就可以，自己也可以改的更亂一些，但必須符合JS語法。
npx prettier --write src/index.js
// 在看格式化之后的index.js，已經重新輸出成固定格式了。
Yarn
mkdir learn-prettier && cd learn-prettier
yarn init
yarn add prettier --dev --exact
// 在learn-prettier/src目錄下創建index.js文件，然后自己寫一些JS代碼。JS代碼用上文那個超長的foo(......)就可以，自己也可以改的更亂一些，但必須符合JS語法。
yarn prettier --write src/index.js
// 在看格式化之后的index.js，已經重新輸出成固定格式了。
npm init 命令會問你一些問題，以便于生成 .json，一路回車采用默認值就行。
你也可以把 .json 內容改改，改的亂一些，但要符合 JSON 格式。然后執行下面命令看看 .json 也被重新輸出了：
npx prettier --write package.json
其實...,你也知道，很少有人會通過命令行用，現在大家都用 呢，好像更牛 X 的人在用 VS Code。下面咱們就看看 和 VS Code 怎么整合 。
4.IDE 整合
IDE 或 ，這里只介紹 2018.1 以上版本和 VS Code。老版本的 IDEA 或 也可以用，但是最好還是升級吧。
的設置適用于 家族的其他 IDE，例如 IDEA、、...
首先安裝
手動格式化
快捷方式：
上面的方式就是執行了npx \--write或yarn \--write，可以格式化文件、文件夾下的所有文件、或選中的一段代碼。
保存文件時自動格式化
如果想在保存文件的時候自動讓 格式化代碼，需要 File 。
點+，然后選擇 。
VS Code
安裝 [6]
手動格式化
快捷方式：
Mac：CMD + Shift + P -> ：Ctlr + Shift + P ->
如果安裝其他格式化代碼的 ，VS Code 會在右下角提示：
點擊 ...
比如我就安裝了三個可以格式化代碼的 ：
選擇 就可以了。這時候 .json 會增加下面內容：
和 的默認 用哪個 。當然這需要你在.js 和.ts 文件上分別設置一次才可以產生上面的設置。
保存文件時自動格式化
打開 VS Code 的設置界面
Mac：CMD + ,
：Ctrl + ,
選上這個配置項：
其實...,你又想了，IDE 整合了 也不是很方便，能不能提交代碼的時候自動執行格式化？這樣的話，我平時寫代碼根本不需要關心啥格式了，保證入庫的代碼讓 Code 的人別罵我就好。下面咱們就看看怎么樣讓 Git 在 前先執行 。
5.Git 整合
既然要和 Git 整合，首先確保你當前的工程在用 Git。
和 Git 整合，有四種方法：
其中除了 pre- 之外，都是 npm 的 ，需要先 npm ...。我們只介紹 lint- 用法。當你需要 和其他 一起用的時候，也用 lint-。
先 npm 吧：
// 先別運行這兩行，下面會有更簡單的辦法
npm install husky
npm install lint-staged
其實，更簡單的操作是運行下面這一行：
// 這一行就可以安裝husky和lint-stage，并且配置好husky。
npx mrm lint-staged
husky[7]，你沒猜錯就是哈士奇的英文。
二哈在這里的作用就是咬住 Git 的hooks[8]不放。我們這里只關心 pre- 這一個 hook。
mrm 之后很漂亮鼠標經過顯示詳細信息的js萬年歷代碼，你的 .json 多了這些內容：
"devDependencies":?{
????"husky":?"^3.0.5",
????"lint-staged":?"^9.2.5"
??},
??"husky":?{
????"hooks":?{
??????"pre-commit":?"lint-staged"
????}
??},
??"lint-staged":?{
????"*.{js,css,json,md}":?[
??????"prettier?--write",
??????"git?add"
????]
??}
現在你可以修改 js、css、json、md 文件，把他們搞亂！然后 git add .，然后再 git \-m 'Test '試試了。
我現在正在用 寫這篇文章， 也能幫我格式化。
和 IDE 以及 Git 都整合的很好，幫助我們自動格式化了代碼。這時候你又有新的疑問了： 和已有的各種 是什么關系？以前一直用 或 ，甚至還會用到 。現在 支持 JS、TS、CSS，能夠自動重新格式化這些代碼，還有必要用各種 嗎？如果 和 / 一起用又會怎么樣呢？
6. 和各種 是什么關系？如何配合使用？
各種 是按照規則(Rules)去檢查代碼的，遇到不符合規則的代碼就會提示你，有的規則還能自動幫你解決沖突。
這些規則分為兩類：
例如 的max-len[9]規則，設置單行長度不能超過 80 字符。
code:
/*eslint?max-len:?["error",?{?"code":?80?}]*/
??var?foo?=?{?"bar":?"This?is?a?bar.",?"baz":?{?"qux":?"This?is?a?qux"?},?"difficult":?"to?read"?};
code:
JavaScript /eslint max-len: ["error", { "code": 80 }]/
var foo = {
"bar": "This is a bar.",
"baz": { "qux": "This is a qux" },
"easier": "to read"
};
再例如 的-[10]規則，關鍵字前后必須有空格。
code:
JavaScript /eslint keyword-spacing: ["error", { "before": true }]/
if (foo) {
//...
}else if (bar) {
//...
}else {
//...
}
code:
JavaScript /eslint keyword-spacing: ["error", { "before": true }]/ /eslint-env es6/
if (foo) {
//...
} else if (bar) {
//...
} else {
//...
}
當 遇到上面的 code 的時候，會提示你違反規則，讓你修改代碼以符合規則。
而 則不會這么麻煩，它根本不管你之前符不符合什么規則，都先把你的代碼解析成 AST，然后按照它自己的風格給你重新輸出代碼。
換句話說， 對應的是各種 的 rules 這一類規則。而且你用了 之后，就不會再違反這類規則了！不需要你自己手動修改代碼。
例如 的no--vars[11]規則，不允許沒用的變量定義出現。
code:
/*eslint no-unused-vars: "error"*/
/*global some_unused_var*/
// It checks variables you have defined as global
some_unused_var = 42;
var x;
// Write-only variables are not considered as used.
var y = 10;
y = 5;
// A read for a modification of itself is not considered as used.
var z = 0;
z = z + 1;
// By default, unused arguments cause warnings.
(function(foo) {
return 5;
})();
// Unused recursive functions also cause warnings.
function fact(n) {
if (n < 2) return 1;
return n * fact(n - 1);
}
// When a function definition destructures an array, unused entries from the array also cause warnings.
function getY([x, y]) {
return y;
}
code:
/*eslint no-unused-vars: "error"*/
var x = 10;
alert(x);
// foo is considered used here
myFunc(function foo() {
// ...
}.bind(this));
(function(foo) {
return foo;
})();
var myFunc;
myFunc = setTimeout(function() {
// myFunc is considered used
myFunc();
}, 50);
// Only the second argument from the descructured array is used.
function getY([, y]) {
return y;
}
對這類規則束手無策。而且這類規則也正是各種 的重點，因為它們真的能幫你發現很多低級的 Bug。
所以， 并不會取代各種 ，而是能避免你的代碼和這些 定義的 rules 沖突。 檢查出來違反 Code- rules 的情況后還需要你自己根據業務邏輯和語法手動修改。 幫你格式化代碼，但是不會幫你挑出潛在的錯誤。
那么既要讓 幫你格式化代碼，還想讓 幫你挑出潛在的 Code- 類錯誤，怎么辦？就需要 和 配合使用。
和 的整合需要做兩件事：
禁用 自己的 rules，讓 接管這些職責。這些配置有現成的 ， 的配置繼承這個 就可以了。讓 執行時首先能夠調用 格式化帶啊，然后再檢查 Code- 類規則。這是 由 的 實現的。
具體去看 的文檔[12]。
7.配置
最后一節，咱們開始說 的配置項。
反復強調自己是一個 code ，而且只有 few(很少) 。這意味著：
不是一個你想如何設置就如何設置的代碼風格格式化工具，不能任由你改變其輸出風格。其最主要的目的就是讓團隊停止爭吵，配置項越多，就離這個主要目的越遠，團隊就會一直討論應該如何配置。這就是 的哲學，而且廣受歡迎。
在 的 Issue 里看這個[13]：
團隊成員，Redux 和 React App 的合作者發表了自己的觀點：反對繼續增加配置項
就已有的配置項， 官方都明確說了其中很多都不是他們想要的，是迫不得已加上的。
之前說到 AST 的時候用了一下 ，這些配置在[14]里很容易看到和測試。全部配置項文檔在這里[15]。
最近在發現有人寫了一個專門的配置工具[16]：
-
這個工具有兩種用法：
// 創建工程初始化的時候用
npm init prettier-eslint
// 或直接使用
npx create-prettier-eslint
另外補充一點，已經不再維護了，明年起將停止更新。前端代碼不管TS還是ES，都用吧。具體看作者在上的Blog[17]和相關Issue[18]。
參考資料[1]
Style Guide: %3A//.io/guide/
[2]
: %3A//
[3]
這篇文章: %3A///-react--vue-
[4]
這里: %3A////-java
[5]
: %3A//.io/
[6]
: %3A///items%%.-
[7]
husky: %3A////husky
[8]
hooks: %3A///
[9]
max-len: %3A///docs/rules/max-len
[10]
-: %3A///docs/rules/-
[11]
no--vars: %3A///docs/rules/no--vars
[12]
文檔: %3A//.io/docs/en/-with-.html
[13]
這個: %3A//////40
[14]
: %3A//.io/
[15]
這里: %3A//.io/docs/en/.html
[16]
工具: %3A////--
[17]
上的Blog: %3A////-in-2019-
[18]
相關Issue: %3A//////4534