配置Prettier格式化代碼

什麼是Prettier？

看下官方文檔的說明，這裏。

Prettier 是一個自定義的代碼格式化工具，它支持以下文件格式：

• JavaScript, including ES2017
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• JSON
• GraphQL
• Markdown, including GFM and MDX
• YAML

爲什麼要用Prettier

我個人認爲最大價值在於，保持了代碼風格統一。其次，用來替代lint中的某些場景，比如說，分號/tab縮進/空格/引號，這些在lint檢查出來之後還需要我們手動fix。然而，一般來說此類錯誤都是空格或符號之類的，利用格式化工具自動生成省時省力。

如何使用

1.安裝

yarn

yarn add prettier --dev --exact
# or globally
yarn global add prettier 

npm

npm install --save-dev --save-exact prettier
# or globally
npm install --global prettier

2.配置

Prettier提供了一套默認的配置，類似於eslint的自定義配置，它可以通過三種方法：

1. 項目根目錄下創建.prettierrc 文件
2. 項目根目錄下創建prettier.config.js 文件
3. 在package.json 文件中配置prettier屬性

我習慣的配置如下：

{
  "tabWidth": 2,	// tab縮進大小,默認爲2
  "useTabs": true, 	// 使用tab縮進，默認false
  "semi": false,		// 使用分號, 默認true
  "singleQuote": true,	// 使用單引號, 默認false(在jsx中配置無效, 默認都是雙引號)
  "TrailingCooma": "none",	// 行尾逗號,默認none,可選 none|es5|all,es5 包括es5中的數組、對象,all 包括函數對象等所有可選
  "bracketSpacing": true,	// 對象中的空格 默認true
  "jsxBracketSameLine": false,	// JSX標籤閉合位置 默認false
  "arrowParens": "avoid",	// 箭頭函數參數括號，默認avoid 可選 avoid| always,avoid 能省略括號的時候就省略 例如x => x，always 總是有括號
  "htmlWhitespaceSensitivity": "strict"	//html空格嚴格程度，可選<css|strict|ignore>
}

3.忽略

如果存在不想格式化的文件，可以忽略格式化。使用方式有兩種：

1. 項目根目錄下創建 .prettierignore 文件
2. 代碼註釋，如：

<div>
  {/* prettier-ignore */}
  <span   			ugly    format=''   />
</div>

更多註釋方法，見官方文檔。