prettier-vscode · Issue #112 · deepthan/blog-angular

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
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下的所有文件：
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 -->
  (mousedown)="       onStart    (    )         "
  (mouseup)="         onEnd      (    )         "
<!-- prettier-ignore-attribute (mouseup) -->
  (mousedown)="onStart()"
  (mouseup)="         onEnd      (    )         "
css: /* prettier-ignore */
/* prettier-ignore */
6. 实战使用指南
6.1. 设置保存时自动格式化
在编辑器的设置中添加如下配置
"editor.formatOnSave": true,
6.2 Prettier的规则配置项
在根目录文件.prettierrc中加入如下规则
  "printWidth": 120,
  "trailingComma": "es5",
  "arrowParens": "always"