prettier 使用详细介绍
prettier 使用详细介绍
prettier
是一个代码格式化工具,可以通过自定义规则来重新规范项目中的代码,去掉原始的代码风格,确保团队的代码使用统一相同的格式。
安装
npm i prettier -Dyarn 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
键)
- 如果设置了制表符缩进,并且一个缩进单位4个空格,那么编辑器一个 tab 键,出现的间隔就是 “一”,一个大横杆
- 如果设置了空格缩进,并且一个缩进单位4个空格,那么编辑器一个 tab 键,出现的间隔就是 “····”,四个小点
- 上面两个长度单位是一样的,都是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
将 >
多行 html
(HTML
、JSX
、Vue
、Angular
) 元素放在最后一行的末尾,而不是单独放在下一行(不适用于自闭元素)
例如:
<buttonclassName="prettier-class"id="prettier-id"
>button
</button>// 为true时
<buttonclassName="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
: 空格被认为是不敏感的。
指定 HTML
、Vue
、Angular
和 Handlebars
的全局空白敏感度。
<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
: 维护现有的行结尾(通过查看第一行之后使用的内容来标准化一个文件中的混合值)lf
:Line Feed only
(\n
),在Linux
和macOS
以及git repos
内部很常见crlf
: 回车符+换行符(\r\n
),在Windows
上很常见cr
: 仅限回车符(\r
),很少使用
由于历史原因,在文本文件中存在两种常用的行结尾的风格。那是\n
(LF
换行)和\r\n
(CRLF
回车+换行)。
前者在 Linux
和 macOS
上很常见,而后者在 Windows
上很普遍。可以在维基百科上找到解释其原因的一些细节。
默认情况下,Prettier
会保留给定文件已使用的行尾的风格。它还将一个文件中的混合行结尾转换为它在第一行末尾找到的结尾。
Windows
用户也可能会意外地将已提交文件中的行结尾更改 LF
为 CRLF
。
这样做会产生很大的影响 git diff
,如果在代码审查过程中没有注意到,那么文件的所有逐行历史都会丢失。
如果想确保 git
仓库在 Prettier
所涵盖的文件中只包含 Linux
风格的行结尾:
- 将
endOfLine
选项设置为lf
- 配置一个
pre-commit
钩子,运行Prettier
- 配置
Prettier
在CI
管道中运行--check flag
Windows
用户在使用您的仓库之前,运行git config core.autocrlf false
,以便git
在checkout
时不会转换LF
为CRLF
。或者,您可以添加* text=auto eol=lf
到repo
的.gitattributes
文件来实现此目的。- 所有操作系统中的所有现代文本编辑器都能够在使用
\n
(LF
)时正确显示行结尾。但是,旧版本的Windows
记事本会直观地将这些行压缩成一行。
singleAttributePerLine
Boolean
,默认false
在HTML
、Vue
、JSX
中是否强制限制每行只有一个属性。
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
)有两类规则:
- 格式规则(例如
max-len
、keyword-spacing
等等) - 代码质量规则(例如
no-console
、no-alert
等)
Prettier
是只专注于代码格式化,对代码不做质量检查。
与Linters
集成
前面提到了Linters
跟Prettier
都包含了代码格式化规则,而Linters
大多数的格式规则在使用Prettier
的时候都是没必要的,同时也可能会与Prettier
定义的规则存在冲突。
比如说在代码格式化时采用Perttier
规则,而我们代码校验使用的是ESLint
,如果同一个规则配置不一致,往往就会出现冲突问题;
例如:字符串单、双引号的配置,eslint --fix
后把字符串变成单引号,再次编辑文件后,保存(Prettier
)自动格式化后却又变成双引号,导致代码校验异常。
那么解决方案就有如下:
- 要么修改
.eslintrc.*
,要么修改.prettierrc.*
配置,让它们配置保持一致 - 使用插件,禁用
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"}
}
prettier 使用详细介绍相关推荐
- Vue详细介绍及使用(组件)
Vue详细介绍及使用 一.Vue组件概念 1.基本的概念 为什么需要组件化?在实际开发中,我们经常也会封装很多公共方法,达到复用的目的,也便于维护.对于前端也是一样,那么什么是组件? 官方定义 ...
- HTML页面加载和解析流程详细介绍
浏览器加载和渲染html的顺序.如何加快HTML页面加载速度.HTML页面加载和解析流程等等,在本文将为大家详细介绍下,感兴趣的朋友不要错过 浏览器加载和渲染html的顺序 1. IE下载的顺序是从上 ...
- mysql为什么要压测_mysql集群压测的详细介绍
本篇文章给大家带来的内容是关于mysql集群压测的详细介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. mysql压测 mysql自带就有一个叫mysqlslap的压力测试工具,通 ...
- php比较运算符案列,PHP实例:PHP比较运算符的详细介绍
<PHP实例:PHP比较运算符的详细介绍>要点: 本文介绍了PHP实例:PHP比较运算符的详细介绍,希望对您有用.如果有疑问,可以联系我们. 比拟运算符种类 PHP实战如同它们名称所暗示的 ...
- Tempdb数据库详细介绍
Tempdb数据库详细介绍 一.Tempdb简介 tempdb是SQLServer的系统数据库一直都是SQLServer的重要组成部分,用来存储临时对象.可以简单理解tempdb是SQLServer的 ...
- linux路由介绍,Linux的路由表详细介绍
Linux的路由表详细介绍 一 在Linux下执行route命令[root@localhost backup]# route -nKernel IP routing tableDestination ...
- pythonexcel介绍_Python 中pandas.read_excel详细介绍
Python 中pandas.read_excel详细介绍 #coding:utf-8 import pandas as pd import numpy as np filefullpath = r& ...
- 渡神纪帧数测试软件,渡神纪芬尼斯崛起配置要求高吗 渡神纪配置要求详细介绍_游侠网...
渡神纪芬尼斯崛起配置要求高吗?本作将在12月3日登陆主机和PC,很多玩家比较关心游戏的配置,这里给大家带来了渡神纪配置要求详细介绍,快来了解下吧. 渡神纪配置要求详细介绍 最低要求(720p/30 f ...
- C++11 unordered_map详细介绍
整理的算法模板合集: ACM模板 目录: 1.介绍 1.1 特性 2. 模版 2.1 迭代器 3. 功能函数 3.1 构造函数 3.2 容量操作 3.2.1 size 3.2.2 empty 3.3 ...
最新文章
- Docker App应用
- 设计模式笔记之十四 (命令模式)
- 企业互联网应用高性能解决之道
- Windows Store获得Fluent Design加成
- hashmap允许null键和值吗_hashMap底层源码浅析
- java高级----Thread之ScheduledExecutorService的使用
- 理解A*寻路算法具体过程
- CVPR | 历届CVPR最佳论文收录集锦
- 何小鹏发文力挺李斌:2019年最惨的人
- 简单内网映射到公网方法--免费
- hdu 1507 Largest Rectangle in a Histogram 动态规划计算最大面积
- 查看linq的生成语句
- 高效能人士的七个习惯_如何成为高效能人士?——《高效能人士的七个习惯》读后感...
- 温度冲击试验箱军标GJB 150与GB 2423区别
- 禁忌搜索算法(Tabu Search)
- shiny 服务器未响应,shiny-server 安装过程出现问题总结
- 乐固加固APP后无法启动
- PPT模板制作图片折叠效果怎么做?
- 复习|typedef什么意思,用法,作用
- 一文弄懂printf函数从用户态到内核态的执行流程