prettier 使用详细介绍

prettier 使用详细介绍

prettier是一个代码格式化工具,可以通过自定义规则来重新规范项目中的代码,去掉原始的代码风格,确保团队的代码使用统一相同的格式。

安装

npm i prettier -D

yarn add prettier --dev

创建一个prettierrc.*配置文件,可以手动创建,也可以手动执行以下命令:

echo {}> .prettierrc.json

prettierrc.*配置文件支持以下几种后缀:

  • json
  • yaml
  • js (或者.config.js)
  • cjs(或者.config.cjs)
  • toml

也可以直接在package.json里的prettier字段里直接配置。

可配置的字段

printWidth

  • Number,默认80

指定代码换行的行长度(默认值为80,同时为了阅读体验官方也不建议超过80),单行代码宽度超过指定的最大宽度,将会换行。

useTabs

  • Boolean, 默认为false

是否使用缩进符(Tab键)

  1. 如果设置了制表符缩进,并且一个缩进单位4个空格,那么编辑器一个 tab 键,出现的间隔就是 “一”,一个大横杆
    在这里插入图片描述
  2. 如果设置了空格缩进,并且一个缩进单位4个空格,那么编辑器一个 tab 键,出现的间隔就是 “····”,四个小点
    在这里插入图片描述
  3. 上面两个长度单位是一样的,都是4个空格,但是空格缩进,在代码进行空白处选择的时候,是一格格选的,制表符缩进是一下子4格选的

tabWidth

  • Number,默认为2

每个缩进级别的空格数

function log() {
  // 当设置为2的时候前面就只有两个空格
  console.log(2)
}

semicolons

  • Boolean,默认为true

在语句末尾是否打印分号。

当设置为false的时候,prettier会在可能引入ASI故障的行的开头自动添加分号

quotes

  • Boolean,默认为false

是否使用单引号而不是双引号。

JSX 引用忽略此选项, 详情看jsx-single-quote
如果引号数超过其他引号,则使用较少的引用将用于格式化字符串(示例:"I'm double quoted"结果为"I'm double quoted""This \"example\" is single quoted"结果为’This "example" is single quoted'

quoteProps

有效选项:

  • as-needed: 仅在需要时在对象属性周围添加引号。(默认)
  • consistent: 如果对象中至少有一个属性需要引号,则引用所有属性。
  • preserve: 尊重对象属性中引号的输入用法。

引用对象中的属性时更改。

jsxSingleQuote

  • Boolean,默认false

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

trailingComma

有效选项:

  • none: 没有尾随逗号。
  • es5: 在ES5中有效的尾随逗号(对象,数组等)
  • all: 尽可能使用尾随逗号(包括函数参数)。这需要 nodejs 8+

多行时尽可能打印尾随逗号。(例如,单行数组永远不会得到尾随逗号。)

bracketSpacing

  • Boolean,默认值true

是否在对象的中括号之间添加空格。

例如:

{foo: bar}
// 添加空格
{ foo: bar }

bracketSameLine

  • Boolean,默认值为false

> 多行 htmlHTMLJSXVueAngular) 元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭元素)

例如:

<button
  className="prettier-class"
  id="prettier-id"
>
  button
</button>

// 为true时
<button
  className="prettier-class"
  id="prettier-id">
  button
</button>

arrowParens

有效选项:

  • avoid:(默认) 尽可能省略parens。例:x => x
  • always: 始终包括parens。例:(x) => x

在单个箭头函数参数周围加上括号。

range相关

只格式化文件的部分代码。

包含两个选项配置

  • rangeStart
  • rangeEnd

rangeStart

  • Number,默认0

要开始格式化的字符索引值

rangeEnd

  • Number,默认Infinity

要结束格式化的字符索引值

parser

指定要使用的解析器。Prettier 会自动从输入文件路径中推断出解析器,不需要更改这个设置。可以在查看有效的解析器

requirePragma

  • Boolean,默认false

可以指定需要指定格式化的文件,当设置为true,只有文件顶部包含了以下注释的文件才会被格式化。

注释:

/**
 * @prettier
 */

// 或者
/**
 * @format
 */

insertPragma

  • Boolean,默认false

在文件顶部插入一个特殊的@format注释标记,指定该文件已使用Prettier进行格式化(这个配置主要时用于大型项目代码逐步采用prettier的过程中,参与转换过程的开发人员使用insertPragma配置确保转换的代码中生成了标记,而团队的其他成员使用requirePragma,而自动化工具仅处理已经转换的文件)。当配置中存在requirePragma: true时,insertPragma配置会被忽略。

proseWrap

有效选项:

  • always: 如果散文超出打印宽度,则换行。
  • never: 将每一段散文合并成一行。
  • preserve(默认): 什么都不做,让散文保持原样。

用于markdown文件中的换行,根据printWidth来决定每行的字符数量。

查看以下例子

This is an example about proseWrap.
New line.

<!-- 设置printWidth为10 -->
<!-- always -->
This is an
example
about
proseWrap.
New line.


<!-- 当设置never时printWidth不生效 -->
<!-- never -->
This is an example about proseWrap. New line.

htmlWhitespaceSensitivity

有效选项:

  • css: 遵守CSS display属性的默认值。
  • strict: 空格被认为是敏感的。
  • ignore: 空格被认为是不敏感的。

指定 HTMLVueAngularHandlebars 的全局空白敏感度。

<a href="https://prettier.io/">Prettier is an opinionated code formatter.</a>
<!-- 变成 -->
<!-- "Prettier is an opinionated code formatter. " 另起一行,在页面的布局上就会多一个节点文本出来 -->
<a href="https://prettier.io/">
  Prettier is an opinionated code formatter.
</a>

vueIndentScriptAndStyle

  • Boolean,默认false

是否对vue文件里<script><style>块中的代码进行缩进,缩进值为tabWidth

endOfLine

有效选项:

  • auto: 维护现有的行结尾(通过查看第一行之后使用的内容来标准化一个文件中的混合值)
  • lfLine Feed only\n),在 LinuxmacOS 以及 git repos 内部很常见
  • crlf: 回车符+换行符(\r\n),在 Windows 上很常见
  • cr: 仅限回车符(\r),很少使用

由于历史原因,在文本文件中存在两种常用的行结尾的风格。那是\nLF换行)和\r\nCRLF回车+换行)。

前者在 LinuxmacOS 上很常见,而后者在 Windows 上很普遍。可以在维基百科上找到解释其原因的一些细节。

默认情况下,Prettier 会保留给定文件已使用的行尾的风格。它还将一个文件中的混合行结尾转换为它在第一行末尾找到的结尾。

Windows 用户也可能会意外地将已提交文件中的行结尾更改 LFCRLF

这样做会产生很大的影响 git diff,如果在代码审查过程中没有注意到,那么文件的所有逐行历史都会丢失。

如果想确保 git 仓库在 Prettier 所涵盖的文件中只包含 Linux 风格的行结尾:

  1. endOfLine 选项设置为 lf
  2. 配置一个 pre-commit 钩子,运行 Prettier
  3. 配置 PrettierCI管道中运行 --check flag
  4. Windows用户在使用您的仓库之前,运行 git config core.autocrlf false,以便gitcheckout 时不会转换 LFCRLF。或者,您可以添加 * text=auto eol=lfrepo.gitattributes 文件来实现此目的。
  5. 所有操作系统中的所有现代文本编辑器都能够在使用 \nLF)时正确显示行结尾。但是,旧版本的 Windows 记事本会直观地将这些行压缩成一行。

singleAttributePerLine

  • Boolean,默认false

HTMLVueJSX中是否强制限制每行只有一个属性。

embeddedLanguageFormatting

有效选项:

  • auto(默认): 如果 Prettier 可以自动识别,则格式化嵌入代码。
  • off: 从不自动格式化嵌入代码。

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

Prettier 识别出你放置了一些代码的情况时,它知道如何在另一个文件的字符串中格式化,比如在 JavaScript 中带有标记的标记模板或在 Markdown 中的代码块中,它默认会html尝试格式化该代码。

比如说在一个md文件中,

<!-- 下面的代码没有指定类型,prettier会用html去格式化 -->
```
function log() {
  console.log('log');console.log('format')
}
```

<!-- 指定为js,会用js去格式化 -->
```js
function log() {
  console.log('log');console.log('format')
}
```

忽略代码

创建并配置.prettierignore文件可以完全忽略(即不需要重新格式化)某些文件和文件夹。

.prettierignore的忽略语法使用的是gitignore语法,具体请查看gitignore语法

在文件中忽略代码

在不需要格式化的代码片段上添加一个行prettier-ignore注释。

prettier-ignore将从格式化中排除抽象语法树中的下一个节点。

// prettier-ignore
function log() {
  console.log('log');console.log('format')
}

// 并不会被格式化成
function log() {
	console.log("log");
	console.log("format");
}

Linters的区别

Linter(例如ESLint)有两类规则:

  1. 格式规则(例如max-lenkeyword-spacing等等)
  2. 代码质量规则(例如no-consoleno-alert等)

Prettier是只专注于代码格式化,对代码不做质量检查。

Linters集成

前面提到了LintersPrettier都包含了代码格式化规则,而Linters大多数的格式规则在使用Prettier的时候都是没必要的,同时也可能会与Prettier定义的规则存在冲突。

比如说在代码格式化时采用Perttier规则,而我们代码校验使用的是ESLint,如果同一个规则配置不一致,往往就会出现冲突问题;

例如:字符串单、双引号的配置,eslint --fix后把字符串变成单引号,再次编辑文件后,保存(Prettier)自动格式化后却又变成双引号,导致代码校验异常。

那么解决方案就有如下:

  1. 要么修改 .eslintrc.*,要么修改 .prettierrc.* 配置,让它们配置保持一致
  2. 使用插件,禁用 ESLint中和Prettier配置有冲突的规则;再使用 Prettier 来替代 ESLint 的格式化功能

关闭ESLint的格式规则

安装eslint-config-prettier插件配置集,把其配置到.eslintrc.*规则的尾部。执行ESLint命令,会禁用那些和Prettier配置有冲突的规则。

安装:

npm i eslint-config-prettier -D

.eslintrc.*文件中配置:

{
  "extends": ["plugin:prettier/recommended"],
}

使用ESLint运行Prettier

安装eslint-plugin-prettier插件,先使用Prettier对代码进行格式化,再并对不一致的地方进行标记;
这两个包配合使用,可以达到运行 eslint --fix 时,采用Prettier的配置规则来格式化文件。

安装:

npm i eslint-plugin-prettier -D

.eslintrc.*文件中添加插件配置

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/21534.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

六级备考28天|CET-6|听力第二讲|长对话满分技巧|听写技巧|2022年6月考题|14:30~16:00

目录 1. 听力策略 2. 第一二讲笔记 3. 听力原文复现 (5)第五小题 (6)第六小题 (7)第七小题 (8)第八小题 扩展业务 expand business 4. 重点词汇 1. 听力策略 2. 第一二讲笔记 3. 听力原文复现 (5)第五小题 our guest is Molly Sundas, a university stud…

learn C++ NO.5 ——类和对象(3)

日期类的实现 在前面类和对象的学习中&#xff0c;由于知识多比较多和碎&#xff0c;需要一个能够将之前所学知识融会贯通的东西。下面就通过实现日期类来对类和对象已经所学的知识进行巩固。 日期类的基本功能&#xff08;.h文件&#xff09; //Date.h//头文件内容 #includ…

【数据结构】广度优先遍历(BFS)模板及其讲解

&#x1f38a;专栏【数据结构】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【勋章】 大一同学小吉&#xff0c;欢迎并且感谢大家指出我的问题&#x1f970; 目录 &#x1f381;定义 &#x1f381;遍历方法 &#x1f381;根…

什么是边缘计算盒子?边缘计算盒子可以做什么?一文带你了解边缘计算云服务器 ECS

上文&#xff0c;我们已经为大家介绍了什么是边缘计算、边缘计算的诞生、以及边缘计算与CDN之间的关系&#xff0c;感兴趣的小伙伴欢迎阅读以往文章&#xff1a; 边缘计算节点是啥&#xff1f;边缘计算与CDN有什么关系&#xff1f;一文带你了解边缘计算节点BEC&#xff08;1&am…

nest笔记十一:一个完整的nestjs示例工程(nestjs_template)

概述 链接&#xff1a;nestjs_template 相关文章列表 nestjs系列笔记 示例工程说明 这个工程是我使用nestjs多个项目后&#xff0c;总结出来的模板。这是一个完整的工程&#xff0c;使用了yaml做为配置&#xff0c;使用了log4js和redis和typeorm&#xff0c;sawgger&#…

Elasticsearch 集群部署插件管理及副本分片概念介绍

Elasticsearch 集群配置版本均为8以上 安装前准备 CPU 2C 内存4G或更多 操作系统: Ubuntu20.04,Ubuntu18.04,Rocky8.X,Centos 7.X 操作系统盘50G 主机名设置规则为nodeX.qingtong.org 生产环境建议准备单独的数据磁盘主机名 #各自服务器配置自己的主机名 hostnamectl set-ho…

STM32实现基于RS485的简单的Modbus协议

背景 我这里用STM32实现&#xff0c;其实可以搬移到其他MCU&#xff0c;之前有项目使用STM32实现Modbus协议 这个场景比较正常&#xff0c;很多时候都能碰到 这里主要是Modbus和变频器通信 最常见的是使用Modbus实现传感器数据的采集&#xff0c;我记得之前用过一些传感器都…

学习RHCSA的day.03

目录 2.6 Linux系统的目录结构 2.7 目录操作命令 2.8 文件操作命令 2.6 Linux系统的目录结构 1、Linux目录结构的特点 分区加载于目录结构&#xff1a; 使用树形目录结构来组织和管理文件。整个系统只有一个位于根分区的一个根目录&#xff08;树根&#xff09;、一棵树。…

盘点 | 10大类企业管理系统有哪些

人类的发展史也是一部工具的进化史&#xff0c;企业管理手段同样不例外。移动互联网时代给了传统低下的手工操作方式致命一击&#xff0c;应运而生的各类企业管理系统工具为企业管理插上腾飞的翅膀&#xff0c;彻底颠覆了手动低效率的历史&#xff0c;变得更加移动化、智能化。…

求最小生成树(Prim算法与Kruskal算法与并查集)

目录 1、案例要求2、算法设计与实现2.1 Prim算法2.1.1 构造无向图2.1.2 编写Prim算法函数2.1.3 实现代码2.1.4 运行结果截图 2.2 Kruskal算法2.2.1 构造无向图2.2.2 编写并查集UnionFind类2.2.3 编写Kruskal算法2.2.4 实现代码2.2.5 运行结果截图 3、总结 1、案例要求 利用贪心…

低代码与其拓荒,不如颠覆开发行业

目录 一、前言 二、低代码是一个值得信赖的“黑盒子” 粗略总结&#xff0c;开发者对低代码平台所见即所得设计器有两种反应&#xff1a; 三、人人都爱黑盒子 四、用“低代码平台”来开发是什么样的感受&#xff1f; 五、结论 一、前言 在科幻电影中&#xff0c;我们看到…

【OpenCV】C++红绿灯轮廓识别+ROS话题实现

目录 前言 一、背景知识 Opencv轮廓检测 ROS相关知识 二、环境依赖 三、具体实现 Step1&#xff1a;初始化ROS&#xff0c;订阅话题 Step2&#xff1a;接收话题&#xff0c;进入回调 1. 帧处理 2. 膨胀腐蚀处理 Step3&#xff1a;红绿特征处理 1. 提取绘制轮廓 2…

【网络协议详解】——数据链路层协议(学习笔记)

&#x1f4d6; 前言&#xff1a;数据链路层是 OSI 模型中的第二层&#xff0c;位于物理层之上&#xff0c;是通信网络中的重要组成部分之一。数据链路层协议负责将网络层传输的数据分组封装成帧&#xff0c;传输到物理层&#xff0c;并通过物理介质进行传输。同时&#xff0c;数…

算法笔记:A2-A4-RSRQ切换算法

1 LTE 切换 LTE切换是移动通信网络中的一个过程&#xff0c;移动设备在保持无间断服务的情况下&#xff0c;将其连接从一个基站切换到另一个基站。当移动设备离开当前基站的覆盖范围或网络资源拥塞时&#xff0c;就需要进行切换。LTE切换通常是基于特定的条件触发的&#xff0…

makefile 学习(1):C/C++ 编译过程

1. GCC 介绍 1.1 介绍 GCC 官方文档 https://gcc.gnu.org/onlinedocs/ 官方文档是最权威的&#xff0c;网上所有的答案都来自官方文档国内论坛参差不齐&#xff0c;找到好的答案比较花时间&#xff0c;并且很容易被错误的文档误导。所以推荐看官方文档靠谱点&#xff0c;并且…

二、数据字典开发

文章目录 二、数据字典开发1、搭建service-cmn模块1.1 搭建service-cmn模块1.2 修改配置1.3 启动类 2、数据字典列表2.1 数据字典列表接口2.1.1 model模块添加数据字典实体2.1.2 添加数据字典mapper2.1.4 添加数据字典controller 2.2 数据字典列表前端2.2.1 添加路由2.2.2 定义…

【Java算法题】剑指offer_01数据结构

前言 刷题链接&#xff1a; https://www.nowcoder.com/exam/oj/ta?page2&tpId13&type265 1. 链表 JZ24 反转链表 思路&#xff1a;基本操作&#xff0c;如下所示。 /* public class ListNode {int val;ListNode next null;ListNode(int val) {this.val val;} }…

ad18学习笔记一

如何自学altium designer如何自学altium designer&#xff1f; - 知乎如何自学altium designer 这里面有ad官方推荐的b站的视频&#xff1a;可以直接去b站关注ad官方账号 AltiumChina&#xff0c;它本身就发布了很多实用教程。 在知乎的这个界面也有Altium Designer Ver18_官…

c++ 11标准模板(STL) std::set(六)

定义于头文件 <set> template< class Key, class Compare std::less<Key>, class Allocator std::allocator<Key> > class set;(1)namespace pmr { template <class Key, class Compare std::less<Key>> using se…

如何使用SCQA模型提高表达能力

SCQA架构是“结构化表达”工具。 一、什么是“SCQA架构”&#xff1f;‍ S&#xff08;Situation&#xff09;情景——由熟悉的情境或事实引入 C&#xff08;Complication&#xff09;冲突——指出实际面临的困境或冲突 Q&#xff08;Question&#xff09;疑问——你如何分析…