Prettier 代码格式化工具使用详解

丿刘先森

已于 2022-08-17 18:07:10 修改

阅读量7k

点赞数 1

分类专栏：工具/格式化文章标签： Prettier Prettier代码格式化

于 2021-09-23 18:26:18 首次发布

本文链接：https://blog.csdn.net/lwx931449660/article/details/120437107

版权

工具/格式化专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Prettier配合EditorConfig使用说明

与ESLint对比

什么是 Prettier？

借用官方的话来说，Prettier 是一个固执的代码格式化程序，它删除所有原始样式*并确保所有输出的代码符合一致的样式。

所以，Prettier 是一个代码格式化工具，可以在多人协作开发中能让每一行代码保持一致的风格，Prettier 是一种代码风格指南，Prettier 提供了很多的配置项和API，你可以有选择的配置你想要的代码风格，并使用 Prettier 来进行统一格式处理。

Prettier 支持：

JavaScript（包括实验性功能）
JSX
Angular
Vue
Flow
TypeScript
CSS, Less, and SCSS
HTML
JSON
GraphQL
Markdown, including GFM and MDX
YAML

安装 Prettier

指令：

npm install --save-dev --save-exact prettier

yarn add --dev --exact prettier

配置 Prettier

创建配置文件，指令：

echo {}> .prettierrc.js

运行命令会生成 .prettierrc.js 文件，如果你的编辑器是 vscode ，那么他会自动读取 .prettierrc.js 文件中的配置，并以此配置来格式化你的代码，具体的配置规则如下：

module.exports = {
    // 每行最多字符数，默认80
    printWidth: 130,
    // 用制表符(tab)不是空格缩进行
    // 如果为true，则取编辑器tabSize值
    // 安装editorconfig编辑器插件并配置文件，则取 editorConfig 文件中设置的值
    // 具体取indent_size或者tab_width，依据indent_style值来决定
    // 如果为false，则取值为tabWidth值，但是有问题，经常需要重启编辑器才生效
    useTabs: false,
    // 指定每个缩进级别的空格数
    tabWidth: 4,
    // 在每条语句的末尾添加一个分号 默认true
    semi: false,
    // 使用单引号代替双引号 默认false
    singleQuote: true,
    // 引用对象中的属性，对象key添加引号方式  as-needed仅在需要时在对象属性周围添加引号
    quoteProps: 'as-needed',
    // 有效的尾随逗号 es5 中有效的尾随逗号(默认) | none 没有逗号 | all 尾随逗号
    trailingComma: 'none',
    // 在对象文字中的括号之间打印空格
    bracketSpacing: true,
    // 决定html元素首元素右侧尖括号(>)是否换行,不包含自闭合元素 false另起一行
    bracketSameLine: false,
    // 箭头函数参数周围包含括号 always有括号(默认) avoid无括号
    arrowParens: 'always',

    // 规定使用哪一种解析器
    // Prettier 会自动从输入文件路径推断解析器，因此您不必更改此设置
    // parser: require("./my-parser")

    // 是否缩进Vue文件中的<script>和<style>标签,
    // 不缩进可以保存缩进级别，但可能破坏编辑器中的代码折叠(默认false)
    vueIndentScriptAndStyle: true,
    // 行尾形式 lf|crlf|cr|auto  默认lf
    endOfLine: 'auto',
}

常用的配置如上所示，更多细节配置及使用使用方法参见 Prettier 官方文档

同样，你也可以定义不需要被格式化的文件集合，创建 .prettierignore 文件，配置你不需要格式化的文件，具体的配置规则同 .gitignore 文件，因为 .prettierignore 基于 .gitignore 和 .eslintignore，如：

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

到此 Prettier 配置完毕，更多详细配置请参见官方文档。

如果你同时使用 ESLint，请安装 eslint-config-prettier 以使 ESLint 和 Prettier 相互配合。它关闭所有不必要的或可能与 Prettier 冲突的 ESLint 规则。

使用 Prettier

指令方式：

// 格式化所有文件
npx prettier --write .

// 格式化app目录下的所有文件
prettier --write app/

配合编辑器自动运行：

在vscode中，首先你应该安装 Prettier 插件，Prettier - Code formatter 插件。

其次，应该定义编辑器的默认格式化程序，如下：

// 为了确保这个扩展被其他你可能已经安装的扩展使用，确保将它设置为你的VS Code设置中的默认格式化器
// 此设置可以针对所有语言或者特定语言进行设置

// 设置编辑器默认格式化器
// 注：设置编辑器默认格式化使用prettier后不影响eslint的正常使用
"editor.defaultFormatter": "esbenp.prettier-vscode",

// 设定特定语言
"[vue]": {
	"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

如果您想在特定语言上禁用 Prettier，您可以创建一个.prettierignore文件，也可以使用 VS Code 的editor.defaultFormatter设置。

// 对除 Javascript 之外的所有语言使用 Prettier
{
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[javascript]": {
     "editor.defaultFormatter": "<another formatter>" 
  } 
}

// 仅将 Prettier 用于 Javascript
{
   "editor.defaultFormatter": "<another formatter>",
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     // 配置javascript(某一个特定语言的配置) 保存自动格式化     --示例配置
     // "editor.formatOnSave": false,
  } 
}

配置编辑器在保存的时候格式化文件：

// prettier与ESLint不同的一点就在于prettier需要启用编辑器保存自动格式化功能才可用
"editor.formatOnSave": true,

接下来就可以正常使用 Prettier 来格式化你的代码了。

更多编辑器使用配置，代码格式配置请查阅官方文档。

Prettier配合EditorConfig使用说明

如果你不知道什么是editorConfig，或者不知道怎么用，请看EditorConfig 使用详解。

editorconfig 和 prettier 其实是相辅相成的，是互不矛盾的，共同协作来格式化代码。

editorConfig 中 indent_style 控制的是：编辑器使用制表符（tab）缩进，还是空格（space）缩进，控制编辑器的缩进风格。

prettier 中的useTabs 控制的是：是否使用制表符缩进，而不使用空格。

如果使用制表符缩进，即 useTabs 值为 true，如果配置了editorconfig 文件，并安装editorconfig 插件，则编辑器缩进距离取值为 editorconfig 文件配置的值。如果 indent_style = space，则先取 indent_size 的值，如果没有则取 tab_width 的值；如果 indent_style = tab，则先取 tab_width 的值，如果没有则取 indent_size 的值。如果 useTabs 值为 false，则取 prettier 文件中 tabWidth 的值。

如果没有安装editorconfig 插件，则 useTabs 为 true，取值为编辑器 tabSize 值，如果 useTabs 为 false，取值为 tab_width 值。

优先级说明：

editorConfig 的优先级高于编辑器设置的值，前提是编辑器安装了EditorConfig插件。

prettier 中 useTabs 的优先级高于 editorConfig 中的 indent_style。