Prettier系列之配置_prettier配置

---

Prettier官网

一、在文件目录中创建一个.prettierrc文件

二、添加规则

1、Print Width

指定自动换行的行长，默认值80。

{
	"printWidth": 74
}
1
2
3

2、Tab Width

指定每个缩进级别的空格数，默认值为2个空格。

{
    "printWidth": 74,
    "tabWidth": 4
}
1
2
3
4

3、Tabs

用制表符代替空格缩进行，默认值为false。

{
    "printWidth": 74,
    "tabWidth": 4,
    "useTabs": true
}
1
2
3
4
5

4、Semicolons

在语句的末尾打印分号，默认值为true。

4.1、true----在每个语句的末尾添加一个分号。

4.2、false----只在可能导致ASI失败的行开头添加分号。

5、Quotes

用单引号代替双引号，默认值为false。

6、Quote Props

当对象中的属性是Quote时更改。

6.1、as-needed

只在需要的对象属性周围添加引号。

6.2、consistent

如果对象中至少有一个属性需要引用，则需要引用所有属性。

6.3、preserve

对象属性中引号的输入使用。

7、JSX Quotes

在JSX中使用单引号而不是双引号。

8、Trailing Commas

在多行逗号分隔的语法结构中，尽可能打印尾随逗号。(例如，单行数组的后面永远不会有逗号。)

8.1、es5

尾随逗号在ES5中有效(对象、数组等)。在TypeScript中，类型参数中没有后面的逗号。

8.2、none

后面没有逗号。

8.3、all

尽可能以逗号结尾(包括函数参数和调用)。要运行这种格式的JavaScript代码，需要一个支持ES2017 (Node.js 8+或现代浏览器)或底层编译的引擎。这也支持在TypeScript的类型参数中使用尾随逗号(从2018年1月发布的TypeScript 2.7开始支持)。

{
	"printWidth": 74,
	"tabWidth": 4,
	"useTabs": true,
	"trailingComma": "none"
}
1
2
3
4
5
6

9、Bracket Spacing

在对象字面量的括号之间打印空格。

9.1、true - Example: { foo: bar }

9.2、false - Example: {foo: bar}

10、Bracket Line

将多行HTML (HTML, JSX, Vue, Angular)元素的>放在最后一行的末尾，而不是单独放在下一行(不适用于自关闭元素)。

10.1、true - Example:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>
1
2
3
4
5
6

10.2、false - Example:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>
1
2
3
4
5
6
7

11、Arrow Function Parentheses

在唯一的箭头函数参数周围包含圆括号。

11.1、“always” -总是包含连词。例如:(x) => x

11.2、“avoid” -尽可能省略parns。示例:x => x

{
	"printWidth": 74,
	"tabWidth": 4,
	"useTabs": true,
	"trailingComma": "none",
	"arrowParens": "avoid"
}
1
2
3
4
5
6
7

12、Range

只格式化文件的一个片段。

13、Parser

指定要使用的解析器。

Prettier自动从输入文件路径推断解析器，因此不需要更改此设置。

14、File Path

指定要使用的文件名，以推断要使用哪个解析器。

该选项仅在CLI和API中有用。在配置文件中使用它没有意义。

15、Require Pragma

Prettier可以限制自己只格式化在文件顶部包含特殊注释(称为pragma)的文件。这在逐渐将大型、未格式化的代码库转换为更漂亮的代码库时非常有用。

16、Insert Pragma

Prettier可以在文件顶部插入一个特殊的@format标记，指定该文件已使用Prettier进行格式化。当与——require-pragma选项一起使用时，效果很好。如果在文件的顶部已经有一个文档块，那么这个选项将添加一个带有@format标记的换行符。

17、Prose Wrap

默认情况下，由于一些服务使用对换行敏感的渲染器，例如GitHub comments和BitBucket，因此pretty不会更改标记文本的换行。若要将散文包装到打印宽度，请将此选项更改为“always”。如果你想要pretty强制所有的散文块在一行上，而依赖于编辑器/查看器软换行，你可以使用"never"。

17.1、always

如果散文超过打印宽度，则对其进行包装。

17.2、never

把每篇散文都拆成一行。

17.3、preserve

什么都不做，让散文保持原样。

18、HTML Whitespace Sensitivity

18.1、css

CSS display属性的默认值。对于处理一样严格。

18.2、strict

所有标记周围的空白(或没有空白)被认为是重要的。

18.3、ignore

所有标记周围的空白(或没有空白)被认为是无关紧要的。

19、Vue files script and style tags indentation

是否缩进Vue文件中<script>和<style>标签内的代码。

19.1、false

不要缩进Vue文件中的<script>和<style>标记。

19.2、true

缩进Vue文件中的<script>和<style>标记。

20、End of Line

20.1、If

仅限换行(\n)，在Linux和macOS以及git回购中常见

20.2、crlf

回车+换行字符(\r\n)， Windows中常见

20.3、cr

只返回字符(\r)，很少使用

20.4、auto

维护现有的行结束符(一个文件中的混合值通过查看第一行之后使用的内容来规范化)

21、Embedded Language Formatting

控制Prettier是否格式化文件中嵌入的引用代码。

21.1、auto

如果pretty可以自动识别，则格式化嵌入的代码。

21.2、off

永远不要自动格式化嵌入代码。

22、Single Attribute Per Line

在HTML、Vue和JSX中强制每行使用单个属性。

22.1、false

不要强制每行只有一个属性。

22.2、true

每行执行一个属性。

三、最终的规则设置

其他的规则均按默认走

{
	"printWidth": 74,
	"tabWidth": 4,
	"useTabs": true,
	"trailingComma": "none",
	"arrowParens": "avoid"
}
1
2
3
4
5
6
7

后续会出一个针对当前的prettier设置Eslint校验的规则设置，来解除这些校验错误。

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！