一、Prettier程式碼格式化工具

　　Prettier 是一個程式碼格式化工具，它可以支援 js/jsx/ts/flow/json/css/less/scss 等檔案格式。

1、為什麼要使用 Prettier？

　　用來替代 lint 中的一些場景，比如說分號/tab縮排/空格/引號，這些在lint工具檢查出問題之後還需要手動修改，而通常這樣的錯誤都是空格或者符號之類的，這樣相對來說不太優雅，利用格式化工具自動生成省時省力。

2、VSCode 配置 Prettier

（1）安裝Prettier - Code formatter 外掛

（2）在專案的根目錄配置 .prettierrc

{
  "printWidth
 
": 100, //每行到多少長度開始折行
  "tabWidth": 2,
  "singleQuote": true, //單引號
  "trailingComma": "none", //陣列、物件最後一個元素的尾逗號
  "bracketSpacing": true, //花括號前後空格
  "jsxBracketSameLine": true, //使多行JSX元素最後一行末尾的 > 單獨一行
  "parser": "babel", //指定使用哪一種解析器
  "semi": true, //是否在行尾加分號
  "useTabs": true, //使用tab（製表符）縮排而非空格
  "arrowParens
 
": "avoid", //只有一個引數的箭頭函式的引數是否帶圓括號（預設avoid不帶）
  "jsxSingleQuote": true, //在JSX中使用單引號
  "htmlWhitespaceSensitivity": "ignore", //為 HTML 檔案定義全域性空格敏感度
  "quoteProps": "as-needed" //自定義引號配置
}

　　放到專案中時註釋要去掉。這樣 Prettier 已經安裝、配置完成了，以後用 Shift+Alt+F 格式化程式碼的時候就會按照 Prettier 的配置項進行格式化。

　　VSCode 中，Prettier 外掛使用配置檔案的優先順序：.prettierrc > .editorconfig > Prettier外掛預設設定。