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.



This is an
example
about
proseWrap.
New line.




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>


<a href="https://prettier.io/">
  Prettier is an opinionated code formatter.
a>

vueIndentScriptAndStyle

  • Boolean,默认false

是否对vue文件里

你可能感兴趣的:(代码规范,javascript,前端,json)