使用 Prettier 格式化代码

Prettier是一个代码格式化的工具，支持JavaScript、TypeScript、CSS、SCSS、LESS、JSON、HTML、Vue、Angular和Markdown等文件格式的代码格式化。它可以解决开发过程中代码风格统一的问题。

本文将介绍如何使用Prettier格式化代码，并且结合一些实际的例子来介绍一些常用的配置参数。

安装

首先，需要在本地安装Prettier：

npm install --save-dev prettier

使用

命令行

Prettier提供了命令行工具来格式化文件，可以通过以下命令行执行：

prettier --write **/*.js

这会格式化当前目录及其子目录中的所有.js文件。使用--write参数会覆盖原文件，使用--list-different参数会列出不符合预期格式的文件列表。

集成开发工具

大多数编辑器都支持Prettier的插件或集成方式，如：

• Visual Studio Code：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• WebStorm：https://www.jetbrains.com/help/webstorm/prettier.html
• Sublime Text：https://prettier.io/docs/en/editors.html#sublime-text
• Atom：https://prettier.io/docs/en/editors.html#atom
• ...

配置

Prettier默认使用一些规则（如缩进、单引号或双引号、行末分号等），但也可以修改这些规则。可以通过.prettierrc文件或者package.json文件的prettier属性来进行配置。以下是一些常用的配置：

tab 宽度

默认情况下，Prettier 将一个 tab 视为 2 个空格。可以通过以下方式更改 tab 宽度：

{
	"tabWidth": 4
}

分号

默认情况下，Prettier 在句末自动添加分号。可以通过以下方式关闭此功能：

{
	"semi": false
}

引号

默认情况下，Prettier 使用单引号。可以通过以下方式将其更改为双引号：

{
	"singleQuote": false
}

换行符

默认情况下，Prettier 在 Unix 格式下使用 \n 作为换行符。可以通过以下方式将其更改为 Windows 格式：

{
	"endOfLine": "auto"
}

如果你希望使用 Unix 换行符，则替换为"endOfLine": "lf"。如果你希望使用 macOS 换行符，则替换为"endOfLine": "cr"。

导入

默认情况下，Prettier 不使用花括号导入单个导入。可以通过以下方式强制使用花括号：

{
	"bracketSpacing": true
}

以下是一个完整的.prettierrc文件的例子：

{
	"tabWidth": 4,
	"semi": false,
	"singleQuote": false
}

结论

如果你想让你的代码在团队中保持一致的风格，或者想要自动格式化，Prettier 绝对是必须掌握的技能之一。虽然前期需要一些时间来定制化设置，但是在项目中得到统一的结果，后期可以带来巨大的收益。