編輯

Prettier 是什麼？

Prettier 是一款有自己主張的程式碼格式化工具，支援

• JavaScript（包含實驗性功能）
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS、Less 和 SCSS
• HTML
• Ember/Handlebars
• JSON
• GraphQL
• Markdown，包含 GFM 和 MDX v1
• YAML

它會移除所有原始樣式*，並確保所有輸出的程式碼都符合一致的風格。（參考這篇部落格文章）

Prettier 會將你的程式碼完整重新排版，同時考量程式碼的行長限制。

例如，以下程式碼

foo(arg1, arg2, arg3, arg4);

它可以放在一行，所以它會保持原樣。但是，我們都遇過這種情況

foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

突然之間，我們先前呼叫函式的格式就失效了，因為它太長了。Prettier 會幫你完成重新排版的繁瑣工作

foo(
  reallyLongArg(),
  omgSoManyParameters(),
  IShouldRefactorThis(),
  isThereSeriouslyAnotherOne(),
);

Prettier 會在整個程式碼庫中強制執行一致的程式碼**風格**（即不會影響 AST 的程式碼格式），因為它會忽略原始樣式*，方法是將程式碼解析後，再使用自己的規則重新輸出已解析的 AST，同時考量最大行長限制，並在必要時自動換行。

如果你想了解更多，這兩個研討會演講是很好的入門介紹

註腳

* _實際上，某些原始樣式會在可行的情況下保留下來 — 參考空行和多行物件。_