prettier 学习笔记
0.前言
prettier 是一个代码格式化工具。通过这个工具，可以让代码保持一致的风格。解决了多人开发项目时代码风格不一致的痛点。
1.prettier 配置文件
Prettier的配置文件可以用4种文件格式编写：
JavaScript .prettierrc.js 或prettier.config.js
JSON .prettierrc.json
YAML .prettierrc.yaml或.prettierrc.yml
TOML .prettierrc.toml
2.读取顺序
当同一个目录下有多个不同格式的配置文件时，Prettier只会使用一个。Prettier会按照以下优先级（从高到低）读取：
1.package.json
2..prettierrc YAML或JSON格式
3..prettierrc.json
4..prettierrc.yaml
5..prettierrc.yml
6..prettierrc.js
7..prettier.config.js
8..prettierrc.toml
配置文件查询
默认情况下，Prettier会从文件所在目录开始并逐级向上寻找配置文件。
直到找到一个配置文件或已经到达根目录时，才会停止。
注意事项
如果项目根目录下存在.editorconfig，那么默认情况下，Prettier在解析配置文件的时候，也会解析.editorconfig。
.editorconfig的优先级比Prettier配置文件的优先级低。
如果存在项目的配置文件和编辑器的配置文件冲突的时候
相同的地方以配置文件的为准，其他则用编辑器的配置
.prettireignore文件用于忽略那些文件不需要使用格式化程序，写法和.gitignore一样
配置项
{
// 列宽，默认为80，超出则自动换行。
"printWidth": 80,
// 缩进宽度。
"tabWidth": 2,
// 是否使用tab缩进，默认为false。
"useTabs": false,
/**
* 是否在每行末尾添加分，默认为true。
*
* true - Example: { x: 1 };
* false - Example: { x: 1 }
*/
"semi": true,
// 是否使用单引号包裹字符串。
"singleQuote": false,
/**
* 对象属性的引号使用，默认为"as-needed"。
*
* as-needed 仅在需要的时候使用。
* consistent 有一个属性需要引号，就都需要引号。
* preserve 保留用户输入的情况。
* */
"quoteProps": "as-needed",
/* *
* 多行时使用尾后逗号，默认为"es5"。
*
* "none" 不使用。
* "es5" 仅使用多行数组尾后逗号和多行对象尾后逗号。
* "all" 尽可能多地使用尾后逗号，在"es5"的基础上，还在函数的参数列表中使后逗号。
* */
"trailingComma": "es5",
/**
* 是否在对象字面量的两个花括号内侧使用空格作为间隔，默认为true。
*
* true - Example: { foo: bar }
* false - Example: {foo: bar}
*/
"bracketSpacing": true,
/**
* 箭头函数中的括号，默认为"always"。
*
* “avoid” - 在有需要的时候使用. Example: x => x
* “always” - 一直使用. Example: (x) => x
* */
"arrowParens": "always",
// 设定格式化范围的起点，默认为0。
"rangeStart": 0,
// 设定格式化范围的终点，默认为无穷大。
"rangeEnd": ".inf",
// 是否仅格式化文件顶部有pragma指令（一种特殊注释）的文件，默认为false。
"requirePragma": false,
// 是否在格式化后的文件顶部插入pragma指令（一种特殊注释），默认为false。
"insertPragma": false,
/**
* markdown折行。
*
* "always" 总是折行。
* "never" 不折行。
* "preserve" 不处理（默认值）。
*/
"proseWrap": false,
/**
* 是否使用空白字符格式化HTML文件。
*
* "css" 按照CSS的display规则，块元素格式化，行内元素不格式化（默认值）。
* "strict" 都不格式化。
* "ignore" 都格式化。
*
* css Example:
* <body>
* <div class="container">1<span>2</span>3</div>
* <div class="container">1<div>2</div>3</div>
* </body>
*
* format:
* <body>
* <div class="container">1<span>2</span>3</div>
* <div class="container">
* 1
* <div>2</div>
* 3
* </div>
* </body>
*/
"htmlWhitespaceSensitivity": "css",
/**
* 换行符。
*
* "auto" 不处理。
* "lf" 换行 Linux或macOS（默认值）。
* "crlf" 回车换行 Windows。
* "cr" 回车。
*/
"endOfLine": "lf"
}
