Prettier - Code formatter使用

更多VSCode插件使用請訪問：VSCode常用插件匯總

---

Prettier - Code formatter這是一款 格式化js、css代碼插件，暫不解釋。

Prettier是什么？
Prettier的中文意思是“漂亮的、機靈的”，也是一個流行的代碼格式化工具的名稱，它能夠解析代碼，使用你自己設定的規則來重新打印出格式規范的代碼。

Prettier具有以下幾個有優點：
1.可配置化
2.支持多種語言
3.集成多數的編輯器
4.簡潔的配置項
使用Prettier在code review時不需要再討論代碼樣式，節省了時間與精力。

如何對Prettier進行配置

一共有三種方式支持對Prettier進行配置：

1.根目錄創建 .prettierrc 文件，能夠寫入YML、JSON的配置格式，並且支持.yaml、.yml、.json、.js后綴；
2.根目錄創建 .prettier.config.js 文件，並對外export一個對象；
3.在 package.json 中新建prettier屬性。

下面我們使用 prettierrc.js 的方式對prettier進行配置，同時講解下各個配置的作用。

module.exports = {
  // 使用 2 個空格縮進
  tabWidth: 2,
  // 不使用縮進符，而使用空格
  useTabs: false,
  // 行尾需要有分號
  semi: true,
  // 使用單引號
  singleQuote: true,
  // 對象的 key 僅在必要時用引號
  quoteProps: 'as-needed',
  // jsx 不使用單引號，而使用雙引號
  jsxSingleQuote: false,
  // 末尾不需要逗號
  trailingComma: 'none',
  // 大括號內的首尾需要空格
  bracketSpacing: true,
  // jsx 標簽的反尖括號需要換行
  jsxBracketSameLine: false,
  // 箭頭函數，只有一個參數的時候，也需要括號
  arrowParens: 'always',
  // 每個文件格式化的范圍是文件的全部內容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要寫文件開頭的 @prettier
  requirePragma: false,
  // 不需要自動在文件開頭插入 @prettier
  insertPragma: false,
  // 使用默認的折行標准
  proseWrap: 'preserve',
  // 根據顯示樣式決定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 換行符使用 lf
  endOfLine: 'lf'
 
}

配置大概列出了這些，還有一些其他配置可以在官方文檔進行查閱。

注意一點，parser的配置項官網列出了如下可選項：

• babylon
• flow
• typescript Since v1.4.0
• postcss Since v1.4.0
• json Since v1.5.0
• graphql Since v1.5.0
• markdown Since v1.8.0

但是如果你使用了vue的單文件組件形式，記得將 parser 配置為vue，目前官方文檔沒有列出來。當然如果你自己寫過AST的解析器，也可以用你自己的寫的 parser: require("./my-parser") 。

Prettier + editorConfig 搭配使用處理舊項目文件

editorConfig使用文檔

如果你有一個舊項目想通過Prettier + editorConfig來簡單規范一下格式也可以使用這個工具：
1.分別安裝兩個工具不必多說了
2.創建 .prettierrc 配置文件
該配置文件會繼承 editorConfig 的配置
3.向 package.json 添加可執行腳本: prettier": "prettier --write ./*
例如：

prettier": "prettier --write './src/**/*.js' './src/**/*.jsx' './src/**/*.css' './src/**/*.scss'

4.創建 .prettierignore 文件，用來忽略一些文件 && 目錄
5.一切准備就緒之后 !!!! npm run prettier 就可以看到提示文件更改記錄了

.prettierrc.js配置文件：

# .prettierrc.js 配置文件

// https://prettier.io/docs/en/options.html


module.exports = {
  trailingComma: "none", // 數組 對象尾隨不需要逗號
  bracketSpacing: true, // 對象空格 { foo: bar }, false=> {foo:bar}
  jsxBracketSameLine: false, // jsx閉標簽是否另起一行 <Test></Test>
  arrowParens: 'always', // 箭頭函數，只有一個參數的時候，也需要括號
  singleQuote: true, // 單引號
  semi: true, //是否在語句末尾就分號
};

.prettierignore 文件配置

# .prettierignore 文件配置
/node_modules
/dist
/src/lib/
/src/global/fonts
  

/docs
/.vscode
node_modules
.eslintrc.js
package.json
package-lock.json