代碼格式化工具prettier 以及配置方法

什麼是Prettier
Prettier是一個代碼格式化工具，它可以支持JS/JSX/TS/Flow/JSON/CSS/LESS等文件格式。

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

如何自定義配置
Prettier提供了一套默認的配置，那麼如何修改配置項符合我們自己的代碼規範呢，有三種方法可以做到

1. .prettierrc 文件
2. prettier.config.js 文件
3. package.json 中配置prettier屬性

.prettierrc 文件配置例子

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

prettier.config.js 或者 .prettierrc.js，需要返回一個對象文件配置例子

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