当前位置：首页 > news >正文

【Prettier】代码格式化工具Prettier的使用和配置介绍

news 来源：原创 2024/9/21 1:37:26

前言

前段时间，因为项目的prettier的配置和eslint格式检查有些冲突，在其prettier官网和百度了一些配置相关的资料，在此做一些总结，以备不时之需。
Prettier官网

Prettier

Prettier 是一种前端代码格式化工具，支持javascript、jsx、typescript、css,less和scss、html、vue、angular、json、markdown等多种前端技术语言格式化。
使用prettier的原因有很多，我认为大部分是因为它可以将项目代码格式统一，还有格式化后的代码较美观和易于理解。

使用 Prettier

vscode 使用

要充分利用 Prettier，建议在编辑器中运行它。在vscode的扩展中可以直接查找prettier插件。
在这里插入图片描述
安装成功后，在你打开支持的文件时，下方文件信息状态栏会有prettier标致：

双击它或者直接在输出命令窗口那里查看prettier的日志信息：

从日志这里可以看出，它是优先使用项目中的prettier配置的。
另外，一般你下载代码格式化插件，都是搭配vscode的文件自动保存格式的（这样方便），但是注意，这个自动保存格式化使用的是文件的默认格式化配置。

有的时候你发现prettier配置保存时格式化规则不起作用，可能就是默认格式化配置没切换到prettier。所以记得将格式化的默认配置修改为prettier。
在这里插入图片描述
开启格式化自动保存。

修改prettier插件配置，设置-》扩展-》prettier 即可改变配置：

设置好后，就可以使用prettier格式化代码了。

项目中使用

如果你想使用prettier，建议项目中一定要安装prettier和统一好格式化规则。
首先下载prettier依赖，为你的项目添加格式化依赖。例如：

npm install --save-dev  prettier

然后，添加prettier配置文件。配置文件写法有点多，我选择以 JSON 或 YAML 编写的 .prettierrc 文件。

多种配置文件风格可参考：prettier-configuration File

.prettierrc文件json：

{"experimentalTernaries": false,"printWidth": 80,"tabWidth": 2,"useTabs": false,"semi": true,"singleQuote": false,"quoteProps": "as-needed","jsxSingleQuote": false,"trailingComma": "all","bracketSpacing": true,"bracketSameLine": false,"arrowParens": "always","rangeStart": 0,"proseWrap": "preserve","htmlWhitespaceSensitivity": "css","vueIndentScriptAndStyle": false,"endOfLine": "lf","embeddedLanguageFormatting": "auto","singleAttributePerLine": false,"plugins": []
}

在这里插入图片描述
默认情况下，Prettier 会忽略版本控制系统目录（“.git”、“.sl”、“.svn “和”.hg”）和 node_modules 中的文件（除非指定了 CLI 选项 --with-node-modules ）。如果".gitignore "文件存在于运行 Prettier 的同一目录中，Prettier 也会遵循该文件中指定的规则。

**/.git
**/.svn
**/.hg
**/node_modules

另外，要排除指定的格式化文件，请在项目根目录下创建 .prettierignore 文件。.prettierignore 使用 gitignore 语法。

npx prettier . --write

npx prettier . --check

npx 随 npm 提供，可让你运行本地安装的工具。在执行命令前记得先安装prettier依赖包，不然npx会下载最新版的prettier格式化代码。

Prettier 配置

简单介绍下prettier的格式化配置。
建议使用.prettierrc配置，虽然它不能写注释，但优先级比较高，不容易被覆盖。

export default {//  三元符 ?experimentalTernaries: false,//  单引号singleQuote: true,trailingComma: 'all',endOfLine: 'auto',bracketSpacing: true,
};

Experimental Ternaries 三元符

默认为false。

//  三元符 ?experimentalTernaries: false,

参数：

true ——三元符在条件后加上问号。
false—— 默认值，保留三元组的默认行为；将问号与结果保留在同一行。

在 prettier 的新三元格式成为默认行为之前，请先试用一下。

在这里插入图片描述

Print Width 一行代码宽度

指定编辑器换行的行长。默认80,上图格式化后就被换行了。

//  行打印长度printWidth: 80,

在 .editorconfig 文件中设置 max_line_length 将配置 Prettier 的打印宽度，除非被覆盖。

(如果在格式化 Markdown 时不想换行，可以设置 Prose Wrap 选项来禁用）。

Tab Width Tab缩进宽度

指定每个缩进级的空格数。默认一个Tab制表符两个空格。

 //  制表符空格数，默认2tabWidth: 2,

在 .editorconfig 文件中设置 indent_size 或 tab_width 将配置 Prettier 的制表符宽度，除非被覆盖。
在这里插入图片描述

Tabs 制表符

用制表符代替空格缩进行间距。

  //  用制表符代替空格缩进行间距。useTab: true,

在 .editorconfig 文件中设置 indent_style 将配置 Prettier 的制表符用法，除非被覆盖。

(制表符将用于缩进，但 Prettier 会使用空格对齐，例如在三元组中。这种行为被称为 SmartTabs）。

Semicolons 行尾分号

在语句末尾打印分号。默认值为true
参数：

true —— 在每条语句末尾加上分号。
false —— 只在有可能出错的地方行尾添加分号。

//  行尾分号semi:true,

Quotes 引号

使用单引号而不是双引号。默认false。jsx不受此影响。

 //  单引号singleQuote: false,

Quote Props 属性的引号

在引用对象中的属性时进行更改。默认值为 as-needed。
参数：

as-needed —— 仅在需要时在对象属性前加上引号。（如果它判断不需要引号，则会把你自己加的引号去掉。）
consistent —— 如果对象中至少有一个属性需要引号，则引用所有属性。（只要有一个加，其他属性都加）
preserve——尊重对象属性中引号的输入使用。（你想加就加，它不改你的）

"quoteProps": "as-needed",

consistent 效果：
在这里插入图片描述

JSX Quotes JSX的引号

在 JSX 中使用单引号而不是双引号。默认值为false。

Trailing Commas 尾部逗号

在多行逗号分隔的语法结构中尽可能打印尾逗号，默认值all。(例如，单行数组永远不会有尾逗号）。
参数：

all —— 尽可能使用逗号（包括函数参数和调用）。要运行这种格式的 JavaScript 代码，需要一个支持 ES2017 的引擎（Node.js 8+ 或现代浏览器）或降级编译。这也能在 TypeScript 的类型参数中使用尾部逗号（自 2018 年 1 月发布的 TypeScript 2.7 起支持）。
es5 —— ES5 中有效的尾逗号（对象、数组等）。TypeScript 和 Flow 中类型参数中的尾逗号。
none—— 无尾逗号。

"trailingComma": "all",

all的情况：
在这里插入图片描述

Bracket Spacing 空格间隔

打印对象字面量中括号之间的空格。默认值为true
参数：
-true —— 开启，示例：{ foo: bar }。
-false—— 关闭，示例：{foo: bar}。

"bracketSpacing": true,

true的情况：
在这里插入图片描述

Bracket Line

将多行 HTML（HTML、JSX、Vue、Angular）元素的 > 放在最后一行的末尾，而不是单独放在下一行（不适用于自关闭元素）。默认值false。

 "bracketSameLine": false,

在这里插入图片描述

Arrow Function Parentheses 箭头函数括号

在唯一的箭头函数参数周围加上括号。默认值always。
参数：

always—— 一定要包括括号。例如： (x) => x。
avoid—— 尽可能省略括号。例如：x => x。

  "arrowParens": "always"

Range 文件格式化范围

只格式化文件的一个片段

这两个选项可用于格式化以给定字符偏移（分别为包含和不包含）为起点和终点的代码。范围将扩展：

后退至包含所选语句的第一行的起始位置。
向前到所选语句的末尾。

前后由rangeStart和rangeEnd控制，rangeStart默认为0，rangeEnd默认Infinity，在不指定具体末尾值时，不配置rangeEnd即可。

"rangeStart": 0,

Parser 解析器

指定要使用的解析器。

Prettier 会根据输入文件路径自动推断解析器，因此无需更改此设置。

Prose Wrap 折行

默认情况下，Prettier会因为使用了一些折行敏感型的渲染器（如GitHub comment 和 BitBucket）而按照markdown文本样式进行折行。
但在某些情况下，可能只是希望这个文本在编译器或查看器中当屏幕放不下时发生软折行，所以这一参数允许设置为 never。
参数：

always—— 当超出print width（上面有这个参数）时就折行。
perserve—— 按照原有文本进行折行。
never——不折行。

HTML Whitespace Sensitivity 模板留白

默认值css。
为 HTML、Vue、Angular 和 Handlebars 指定全局空白敏感度。更多信息，请参见空白敏感格式。
参数：

“css” - 尊重 CSS 显示属性的默认值。对于 Handlebars，与 strict 相同。
“strict” - 所有标记周围的空格（或没有空格）都被视为重要标记。
“ignore”- 所有标记周围的空格（或没有空格）都不重要。

 "htmlWhitespaceSensitivity": "css"

在这里插入图片描述

Vue files script and style tags indentation Vue 文件脚本和样式标签缩进

是否缩进 Vue 文件中 <script> 和 <style> 标记内的代码。默认值false。
参数：

false - 在 Vue 文件中不缩进脚本和样式标记。
true - 在 Vue 文件中缩进脚本和样式标记。

  "vueIndentScriptAndStyle": false

End of Line 行尾换行符

默认值lf。
参数：

“lf” - 仅换行符（\n），常见于 Linux 和 macOS 以及 git 仓库中
“crlf” - 回车+换行字符（\r/n），常见于 Windows 系统
“cr” - 仅回车字符（\r），很少使用
“auto” - 保持现有的行结束符（一个文件中的混合值通过查看第一行之后的内容进行规范化处理）

 "endOfLine": "lf"

由于历史原因，文本文件中有两种常见的行结束符。即 \n（或 LF，表示换行）和 \r\n（或 CRLF，表示回车+换行）。前者常见于 Linux 和 macOS，而后者则在 Windows 中很普遍。维基百科上有一些详细的解释。
当不同操作系统的人合作开发一个项目时，很容易在共享的 git 仓库中出现混合行尾。Windows 用户也有可能不小心把以前提交过的文件的行尾从 LF 改成了 CRLF。这样做会产生很大的 git diff，从而使文件的逐行历史记录（git blame）更难查看。
如果您想确保整个 git 仓库在 Prettier 覆盖的文件中只包含 Linux 风格的行结束符:

确保 Prettier 的 endOfLine 选项设置为 lf（这是自 2.0.0 版起的默认值）
配置运行 Prettier 的预提交钩子
使用 --check 标志配置 Prettier 在 CI 管道中运行。如果使用 Travis CI，请在 .travis.yml 中将 autocrlf 选项设置为输入。
在 repo 的 .gitattributes 文件中添加 * text=auto eol=lf。更改后，您可能需要让 Windows 用户重新克隆您的 repo，以确保 git 在签出时未将 LF 转换为 CRLF。

当使用 \n (LF) 时，所有操作系统中的所有现代文本编辑器都能正确显示行结束符。但是，Windows 的旧版本记事本只能处理 \r\n (CRLF)，因此会在视觉上把这些行压成一行。