prettier-vscode

[deepthan]

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"
}