Angular 代码规范之 prettier-vscode | 更文挑战第18天

这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战

1. 是什么？如何下载？

prettier-vscode是一个vscode插件，可以格式化代码，根据规则自动修复代码，用起来超级丝滑。

在vscode商店搜索Prettier - Code formatter并启用。

https://github.com/prettier/prettier-vscode
复制代码

2. 设置eslint或tslint

prettier-eslint 和prettier-tslint都被该插件内置了，所以不需要安装。但是eslint或tslint需要安装并启用。

3. 如何配置规则

可以在根目录新建一个名为.editorconfig的文件，也可以在编辑器的settings.json中进行配置。
配置方法示例：

settings.json

{
     "prettier.printWidth": 120
}
复制代码

.editorconfig

{
     "printWidth": 120
}
复制代码

4. 可配置的规则

4.1 Prettier的规则概览

名称	作用	默认值	数据类型
printWidth	一行显示代码的最大长度	80	number
tabWidth	tab的缩进大小	2	number
singleQuote	单引号	false	boolean
trailingComma	在末尾可能出现逗号的地方添加逗号	"none"
bracketSpacing	控制对象内边缘是否显示空格	true	boolean
jsxBracketSameLine	如果为`true`，则将多行jsx元素的`>`放在最后一行的末尾，而不是单独放在下一行	false	boolean
parser	javascript使用哪个解析器	'babylon'
semi	true: 在每行末尾添加分号。 false:只在可能导致ASI失败的行开头添加分号	true	boolean
useTabs	true：用制表符来缩进行	false	boolean
proseWrap	(markdown)单行拆分成多行进行显示	'preserve'
arrowParens	箭头函数只有一个参数时用括号包裹	'avoid'
jsxSingleQuote	false： jsx中不使用单引号	false	boolean
htmlWhitespaceSensitivity	HTML对空白的灵敏度	'css'
endOfLine	行结尾的风格设置	'auto'
quoteProps	对象中属性引号的显示规则	'as-needed'

4.1.1 Prettier例子&参数

bracketSpacing案例：
若为true则
```
const a = {b: 1}
复制代码
```
会被格式化为
```
const a = { b: 1 }
复制代码
```
即{}左右都会被加一个空格成{ }
trailingComma参数：
- "none"：不添加
- "es5"：在ES5中有效的尾随逗号(对象、数组等)
- "all"：在所有可能出现逗号的地方都添加上（函数参数）
arrowParens参数：
- "avoid" : 不包裹
- "always" : 包裹
htmlWhitespaceSensitivity 参数：
- "css": 遵守cssdisplay属性默认值的格式
- "strict": 空格被认为是敏感的
- "ignore": 空格被认为是不敏感的
endOfLine参数：
- "auto"：维护现有的行结尾（通过查看第一行之后使用的内容来标准化一个文件中的混合值）
- "lf"- Line Feed only（\n），在Linux和macOS以及git repos内部很常见
- "crlf"- 回车符+换行符（\r\n），在Windows上很常见
- "cr"- 仅限回车符（\r），很少使用
quoteProps参数：
- "as-needed": 仅在对象属性需要添加引号的时候添加
- "consistent"：如果对象最后一个属性需要添加引号，则给所有属性添加引号
- "preserve"：遵循对象中属性的引号使用方法。

4.2 VSCode特殊设置

prettier.eslintIntegration： boolean = false

使用 prettier-eslint而不是 prettier。其他设置仅在无法从ESLint规则推断出它们时才有效。

prettier.tslintIntegration ： boolean = false

使用更prettier-tslint而不是 prettier。其他设置仅在无法从TSLint规则推断出它们时才有效。
prettier.stylelintIntegration： boolean = false
使用更 prettier-stylelint而不是 prettier。其他设置仅在无法从stylelint 规则推断出它们时才有效。
prettier.requireConfig : boolean = false
需要一个'prettierconfig'文件取格式化
prettier.ignorePath : 要忽略的文件名 = .prettierignore
传入一个文件的路径，这个文件里面写了哪些是不需要做格式化的文件，写法和.gitignore一样。默认读取.prettierignore文件里面的内容，设置为null则不读取忽略文件。

需要重新启动。

prettier.disableLanguages : string[] = ["vue"]
禁止传入语言的格式化，需要重新启动。禁止后该语言不会被格式化，即使有其他格式化插件。

注意：

如果在Visual Studio代码设置中同时启用prettier.tslintIntegration和prettier.eslintIntegration，则TSLint将用于对TypeScript代码进行lint。
如果您更愿意使用ESLint，请通过设置prettier.tslintIntegration为禁用，TSLint禁用。

5. 如何某些不需要被格式化怎么做？

5.1 设置不需要格式化的语言

若不设置则会格式化所有支持的语言

"[javascript]": {
    "editor.formatOnSave": false
}
复制代码

5.2 设置不需要格式化的文件

需要在项目根目录添加一个名为.prettierignore的文件，里面写入不需要被格式化文件的路径，如src下的所有文件：

/src
复制代码

5.3 设置不被格式化的段落

js： // prettier-ignore

// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)
复制代码

HTML:

<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

<!-- prettier-ignore-attribute -->
<div
  (mousedown)="       onStart    (    )         "
  (mouseup)="         onEnd      (    )         "
></div>

<!-- prettier-ignore-attribute (mouseup) -->
<div
  (mousedown)="onStart()"
  (mouseup)="         onEnd      (    )         "
></div>
复制代码

css: /* prettier-ignore */

/* prettier-ignore */
.my 
{

}
复制代码

6. 实战使用指南

6.1. 设置保存时自动格式化

在编辑器的设置中添加如下配置

"editor.formatOnSave": true,
复制代码

6.2 Prettier的规则配置项

在根目录文件.prettierrc中加入如下规则

{
  "printWidth": 120,
  "trailingComma": "es5",
  "arrowParens": "always"
}
复制代码

更多用法更新于 github