文章の目录

一、在文件目录中创建一个`.prettierrc`文件
二、添加规则
- 1、Print Width
- 2、Tab Width
- 3、Tabs
- 4、Semicolons
- - 4.1、true----在每个语句的末尾添加一个分号。
  - 4.2、false----只在可能导致ASI失败的行开头添加分号。
- 5、Quotes
- 6、Quote Props
- - 6.1、as-needed
  - 6.2、consistent
  - 6.3、preserve
- 7、JSX Quotes
- 8、Trailing Commas
- - 8.1、es5
  - 8.2、none
  - 8.3、all
- 9、Bracket Spacing
- - 9.1、true - `Example: { foo: bar }`
  - 9.2、false - `Example: {foo: bar}`
- 10、Bracket Line
- - 10.1、true - Example:
  - 10.2、false - Example:
- 11、Arrow Function Parentheses
- - 11.1、"always" -总是包含连词。例如:(x) => x
  - 11.2、"avoid" -尽可能省略parns。示例:x => x
- 12、Range
- 13、Parser
- 14、File Path
- 15、Require Pragma
- 16、Insert Pragma
- 17、Prose Wrap
- - 17.1、always
  - 17.2、never
  - 17.3、preserve
- 18、HTML Whitespace Sensitivity
- - 18.1、css
  - 18.2、strict
  - 18.3、ignore
- 19、Vue files script and style tags indentation
- - 19.1、false
  - 19.2、true
- 20、End of Line
- - 20.1、If
  - 20.2、crlf
  - 20.3、cr
  - 20.4、auto
- 21、Embedded Language Formatting
- - 21.1、auto
  - 21.2、off
- 22、Single Attribute Per Line
- - 22.1、false
  - 22.2、true
三、最终的规则设置
写在最后

Prettier官网

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

二、添加规则

1、Print Width

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

{"printWidth": 74
}

2、Tab Width

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

{"printWidth": 74,"tabWidth": 4
}

3、Tabs

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

{"printWidth": 74,"tabWidth": 4,"useTabs": true
}

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

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:

<buttonclassName="prettier-class"id="prettier-id"onClick={this.handleClick}>Click Here
</button>

10.2、false - Example:

<buttonclassName="prettier-class"id="prettier-id"onClick={this.handleClick}
>Click Here
</button>

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

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

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

写在最后

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

Prettier系列之配置相关推荐

LOAM系列——LeGO-LOAM配置、安装、问题解决及VLP16测试效果（完结版）
LOAM系列--LeGO-LOAM配置.安装.问题解决及VLP16测试效果安装依赖安装 VLP16 bag测试问题解决问题1 解决1 安装依赖 ros gtsam wget -O ~/Down ...
LOAM系列——FLOAM配置、安装、问题解决及VLP16测试效果（完结版）
LOAM系列--FLOAM配置.安装.问题解决及VLP16测试效果安装依赖安装 KITTI sequence 07 VLP16 bag测试问题解决问题1 安装依赖 Ubuntu and ROS ...
RS485modbus转Profinet网关协议连接富凌DZB300系列变频器配置方法
RS485modbus转Profinet网关协议连接富凌DZB300系列变频器配置方法案例介绍:改造项目原系统的1200plc连接了多台富凌DXB300系列变频器,出现干扰导致间断性变频器报警,重启 ...
华为S5700系列交换机配置
华为S5700系列交换机配置 vlan ba 9 11 93 //批量创建vlan int vlan 93 //进入三层接口 ip add 10.93.1.115 24 //配置三层网关地址 des ...
Kubernetes 1.6新特性系列 | 动态配置和存储类
导读: Dynamic Provisioning的目标是完全自动化存储资源的生命周期管理,让用户无需过多的关注存储的管理,可以按需求自动动态创建和调整存储资源.StorageClass本质上是底层存储 ...
proe指定服务器安装,ucs-c系列服务器安装配置-v1
<ucs-c系列服务器安装配置-v1>由会员分享,可在线阅读,更多相关<ucs-c系列服务器安装配置-v1(33页珍藏版)>请在人人文库网上搜索. 1.安装和配置C系列服务器详 ...
华为ar2200series配置手册_思科ASA系列防火墙配置手册
思科ASA系列防火墙配置手册思科ASA系列防火墙配置手册使用console连接线登录方法 1.使用cisco的console连接线,连接设备的console口和计算机com口(笔记本用USB转CO ...
Swagger系列——Swagger3配置
Swagger系列--Swagger3配置什么是 Swagger? 依赖引入 springfox引入方式 knife4j引入方式引入美化bootstrap-UI 详细配置 swagger资源访问路 ...
opporeno5可以用鸿蒙系统,opporeno5系列参数配置_oppo reno5手机参数
来到了2020年的最后一个月,在这个月中会有不少新机上市,其中OPPO有一个OPPO Reno5系列将在12月10日正式发布,据了解这个系列有两款手机分别为OPPO Reno5和OPPO Reno5 ...

Prettier系列之配置