代码格式化工具---prettier配置

我自己的常用 prettier 配置如下：

// .prettierrc 文件
// 这里修改的都是与默认值不同的，没有修改到的就是启用默认值
// .prettierrc 文件是使用 json 格式，如果报错了，该配置文件在编辑器里面是不会生效的
{
  "bracketSpacing": true,
  "printWidth": 160,
  "semi": false,
  "singleQuote": true
}
其他还可以选择
// prettier.config.js
module.exports = {
  "bracketSpacing": true,   // 是否在对象属性添加空格，这里选择是 { foo: bar }
  "printWidth": 160,        // 指定代码换行的行长度。单行代码宽度超过指定的最大宽度，将会换行，如果都不想换，可以添加 "proseWrap": "never"
  "semi": false,            // 是否在语句末尾打印分号，这里选择不加
  "singleQuote": true      // 是否使用单引号，这里选择使用
}
// package.json 中的 prettier 属性
{
  "prettier": {
    "bracketSpacing": true,   // 是否在对象属性添加空格，这里选择是 { foo: bar }
    "printWidth": 160,        // 指定代码换行的行长度。单行代码宽度超过指定的最大宽度，将会换行，如果都不想换，可以添加 "proseWrap": "never"
    "semi": false,            // 是否在语句末尾打印分号，这里选择不加
    "singleQuote": true      // 是否使用单引号，这里选择使用
  }
}

常用配置文件链接---JavaScript开发中常用的代码规范配置文件

prettier 配置选项 (官网文档译文)

支持自定义的代码风格，可在CLI和API中使用。

单行代码的最大宽度 Print Width

指定代码换行的行长度。单行代码宽度超过指定的最大宽度，将会换行。

为了便于阅读，官方建议不要使用超过80个字符。我这边设置了160

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
80	--print-width <int>	printWidth: <int>
（如果在格式化 Markdown 时不想要换行，可以设置 Prose Wrap （是否换行）选项以禁用它。）

Tab宽度 Tab Width

指定每个缩进级别的空格数。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
2	--tab-width <int>	tabWidth: <int>

Tab Tabs

使用制表符 (tab) 缩进行而不是空格 (space)。

如果设置了制表符缩进，并且一个缩进单位4个空格，那么编辑器一个 tab 键，出现的间隔就是 "一"，一个大横杆

如果设置了空格缩进，并且一个缩进单位4个空格，那么编辑器一个 tab 键，出现的间隔就是 "····"，四个小点

上面两个长度单位是一样的，都是4个空格，但是空格缩进，在代码进行空白处选择的时候，是一格格选的，制表符缩进是一下子4格选的

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
false	--use-tabs	useTabs: <bool>
（Tabs 将用于缩进，但 Prettier 使用空格来对齐代码，例如三元组。）

分号 Semicolons

在语句末尾打印分号。

有效选项：

true - 在每个语句的末尾添加分号。
false- 仅在可能引入ASI故障的行的开头添加分号。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
true	--no-semi	semi: <bool>

引号 Quotes

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

笔记：

JSX 引用忽略此选项 - 请参阅 jsx-single-quote。
如果引号数超过其他引号，则使用较少的引用将用于格式化字符串

示例：

"I'm double quoted"
// 结果
"I'm double quoted"

和

"This \"example\" is single quoted"
// 结果
'This "example" is single quoted'。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
false	--single-quote	singleQuote: <bool>

引号属性 Quote Props

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

有效选项：

"as-needed" - 仅在需要时在对象属性周围添加引号。

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

"preserve" - 尊重对象属性中引号的输入用法。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"as-needed"	--quote-props <as-needed \| consistent \| preserve>	quoteProps: "<as-needed \| consistent \| preserve>"

JSX引号 JSX Quotes

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

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
false	--jsx-single-quote	jsxSingleQuote: <bool>

尾随逗号 Trailing Commas

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

有效选项：

"none" - 没有尾随逗号。

"es5" - 在ES5中有效的尾随逗号（对象，数组等）

"all" - 尽可能使用尾随逗号（包括函数参数）。这需要 nodejs 8。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"none"	--trailing-comma <none \| es5 \| all>	trailingComma: "<none \| es5 \| all>"

括号间距（这里指{、}） Bracket Spacing

在对象文字中打印括号之间的空格。

有效选项：

true- 例子：{ foo: bar }。

false- 例子：{foo: bar}。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
true	--no-bracket-spacing	bracketSpacing: <bool>

JSX 括号（这里指<、>） JSX Brackets

将 > 多行 JSX 元素放在最后一行的末尾，而不是单独放在下一行（不适用于自闭元素）。

有效选项：

true - 示例：

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

false - 示例：

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

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
false	--jsx-bracket-same-line	jsxBracketSameLine: <bool>

箭头函数圆括号 Arrow Function Parentheses

首先在v1.9.0中提供

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

有效选项：

"avoid" - 尽可能省略parens。例：x => x

"always" - 始终包括parens。例：(x) => x

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"avoid"	--arrow-parens <avoid \| always>	arrowParens: "<avoid \| always>"

范围 Range

仅格式化文件的一部分。

这两个选项可用于格式化以给定字符偏移量开始和结束的代码（分别包含和排除）

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
0	--range-start <int>	rangeStart: <int>
Infinity	--range-end <int>	rangeEnd: <int>

解析器 Parser

指定要使用的解析器。

Prettier 会自动从输入文件路径中推断出解析器，因此您不必更改此设置。

这两个 babel 和 flow 解析器都支持相同的 JavaScript 功能集（包括Flow类型注释）。

它们可能在某些边缘情况下有所不同，因此如果您碰到其中一个，您可以尝试 flow 而不是 babel。

有效选项：

"babel"（来自 @babel/parser ）命名为 "babylon" until v1.16.0

"babel-flow"（与解析器 "babel" 一样，但是明确地启用 Flow 解析以避免歧义）首先在v1.16.0中可用

"flow"（通过 flow-parser）

"typescript"（来自 @typescript-eslint/typescript-estree）首先在v1.4.0中提供

"css"（通过 postcss-scss 和 postcss-less，自动检测使用哪个解释器）首先在v1.7.1中提供

"scss"（与解析器 "css"一样，更喜欢 postcss-scss ）首先在v1.7.1中提供

"less"（与解析器 "css"一样，更喜欢 postcss-less ）首先在v1.7.1中提供

"json"（来自 @babel/parser parseExpression ）首先在v1.5.0中提供

"json5"（与解析器 "json"一样，但输出为 json5 ）首先在v1.13.0中可用

"json-stringify"（与解析器 "json"一样，但输出类似 JSON.stringify ）首先在v1.13.0中提供

"graphql"（通过 graphql/language ）首先在v1.5.0中提供

"markdown"（通过 remark-parse ）首先在v1.8.0中提供

"mdx"（通过 remark-parse 和 @mdx-js/mdx ）首先在v1.15.0中提供

"html"（通过 angular-html-parser ）首先在1.15.0中提供

"vue"（与解析器 "html"一样，但也格式化于 vue 的语法）首先在1.10.0中可用

"angular"（与解析器 "html"一样，但也通过 angular-estree-parser 格式化 augular 特定的语法）首先在1.15.0中提供

"lwc"（与解析器 "html"一样，但也为 LWC 特定语法格式化）首先在1.17.0中可用

"yaml"（通过 yaml 和 yaml-unist-parser ）首先在1.14.0中提供

还支持自定义解析器。首先在v1.5.0中提供

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
没有	--parser <string> --parser ./my-parser	parser: "<string>" parser: require("./my-parser")

注意：默认值为"babylon"v1.13.0。

文件路径 File Path

指定用于推断要使用的解析器的文件名。

例如，以下将使用CSS解析器：

cat foo | prettier --stdin-filepath foo.css

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
没有	--stdin-filepath <string>	filepath: "<string>"

需要编译指示 Require pragma

首先在v1.7.0中提供

Prettier 可以将自己限制为仅在文件顶部格式化包含特殊注释（称为pragma）的文件。

当逐步将大型未格式化的代码库转换为更漂亮的代码库时，这非常有用。

例如，提供以下内容作为其第一个注释的文件将被格式化 --require-pragma：

/**
 * @prettier
 */

或者

/**
 * @format
 */

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
false	--require-pragma	requirePragma: <bool>

插入Pragma Insert Pragma

首先在v1.8.0中提供

Prettier 可以在文件顶部插入一个特殊的 @format 标记，指定文件格式需要被格式化。

当与 --require-pragma 选项一起使用时，这很有效。

如果文件顶部已有 docblock，则此选项将使用 @format 标记向其添加换行符。

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
false	--insert-pragma	insertPragma: <bool>

是否换行 Prose Wrap

首先在v1.8.2中提供

默认情况下，Prettier 将按原样包含 markdown 文本，因为某些服务使用对行敏感的渲染器，例如 GitHub 注释和 BitBucket。

在某些情况下，您可能希望依赖编辑器/查看器，因此此选项允许您选择退出 "never"。

有效选项：

"always" - 如果超过打印宽度，请换行。

"never" - 不要换行。

"preserve" - 按原样显示。首先在v1.9.0中提供

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"preserve"	--prose-wrap <always \| never \| preserve>	proseWrap: "<always \| never \| preserve>"

HTML空白灵敏度 HTML Whitespace Sensitivity

首次在v1.15.0中提供

指定 HTML 文件的全局空白区域敏感度

有效选项：

"css"- 遵守CSS display属性的默认值。

"strict" - 空格被认为是敏感的。

"ignore" - 空格被认为是不敏感的。

html 中空格也会占位，影响布局，prettier 格式化的时候可能会将文本换行，造成布局错乱

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

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"css"	--html-whitespace-sensitivity <css \| strict \| ignore>	htmlWhitespaceSensitivity: "<css \| strict \| ignore>"

行结束 End of Line

首次出现在1.15.0中

由于历史原因，在文本文件中存在两种常用的行结尾的风格。那是\n（或LF换行）和\r\n（或CRLF用于回车+换行）。

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

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

当人们在不同操作系统上协作项目时，很容易在中央 git 存储库中找到混合行结尾。

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

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

如果你想确保你的 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 记事本会直观地将这些行压缩成一行。

有效选项：

"auto" - 维护现有的行结尾（通过查看第一行之后使用的内容来标准化一个文件中的混合值）

"lf"- Line Feed only（\n），在 Linux 和 macOS 以及 git repos 内部很常见

"crlf"- 回车符+换行符（\r\n），在 Windows 上很常见

"cr"- 仅限回车符（\r），很少使用

默认	CLI	API/.prettierrc/prettier.config.js/package.json["prettier"]
"auto"	--end-of-line <auto \| lf \| crlf \| cr>	endOfLine: "<auto \| lf \| crlf \| cr>"

posted @ 2019-05-17 16:35 青S衫% 阅读(31398) 评论(0) 编辑收藏举报

刷新页面返回顶部

青S衫%

写出来、才是你的 --- 只想写结论、不想写过程

代码格式化工具---prettier配置

prettier 配置选项 (官网文档译文)

单行代码的最大宽度 Print Width

Tab宽度 Tab Width

Tab Tabs

分号 Semicolons

引号 Quotes

引号属性 Quote Props

JSX引号 JSX Quotes

尾随逗号 Trailing Commas

括号间距（这里指{、}） Bracket Spacing

JSX 括号（这里指<、>） JSX Brackets

箭头函数圆括号 Arrow Function Parentheses

范围 Range

解析器 Parser

文件路径 File Path

需要编译指示 Require pragma

插入Pragma Insert Pragma

是否换行 Prose Wrap

HTML空白灵敏度 HTML Whitespace Sensitivity

行结束 End of Line

公告