prettier-vscode - Githubissues

1. 如何下载

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	init
tabWidth	tab的缩进大小	2	init
singleQuote	单引号	false	bool
trailingComma	在末尾可能出现逗号的地方添加逗号	"none"
bracketSpacing	控制对象内边缘是否显示空格	true	bool
jsxBracketSameLine	如果为`true`，则将多行jsx元素的`>`放在最后一行的末尾，而不是单独放在下一行	false	bool
parser	javascript使用哪个解析器	'babylon'
semi	true: 在每行末尾添加分号。 false:只在可能导致ASI失败的行开头添加分号	true	bool
useTabs	true：用制表符来缩进行	false	bool
proseWrap	(markdown)单行拆分成多行进行显示	'preserve'
arrowParens	箭头函数只有一个参数时用括号包裹	'avoid'
jsxSingleQuote	false： jsx中不使用单引号	false	bool
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"
}

deepthan / blog-angular

prettier-vscode #112