配置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>

更多注释方法，见官方文档。