介绍
一致地格式化代码是一项挑战，但现代开发人员工具可以自动维护团队代码库中的一致性。
在本文中，您将设置Prettier以在 Visual Studio Code（也称为VS Code）中自动格式化您的代码。
出于演示目的，以下是您要格式化的示例代码：
const name = "James";
const person ={first: name
}
console.log(person);
const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}
sayHelloLinting('James');
如果您熟悉代码格式，您可能会注意到一些错误：
- 单引号和双引号的混合。
person对象的第一个属性应该在它自己的行上。- 函数内部的控制台语句应该缩进。
- 您可能喜欢也可能不喜欢围绕箭头函数参数的可选括号。
先决条件
要学习本教程，您需要下载并安装Visual Studio Code。
要在 Visual Studio Code 中使用 Prettier，您需要安装扩展。为此，请Prettier - Code Formatter在 VS Code 的扩展面板中搜索。如果您是第一次安装它，您会看到一个安装按钮，而不是此处显示的卸载按钮：
步骤 1 — 使用格式化文档命令
安装 Prettier 扩展后，您现在可以利用它来格式化您的代码。首先，让我们使用“格式化文档”命令进行探索。此命令将使您的代码与格式化的间距、换行和引号更加一致。
要打开命令面板，您可以COMMAND + SHIFT + P在 macOS 或CTRL + SHIFT + PWindows 上使用。
在命令面板中，搜索format并选择Format Document。
然后可能会提示您选择要使用的格式。为此，请单击配置按钮：
然后选择Prettier-Code Formatter。
注意：如果您没有看到选择默认格式的提示，您可以在“设置”中手动更改。将编辑器：默认格式化程序设置为ebsenp.prettier-vscode.
您的代码现在使用间距、换行和一致的引号进行格式化：
const name = 'James';
const person = { first: name };
console.log(person);
const sayHelloLinting = (fname) => {
console.log(`Hello linting, ${fName}`);
}
sayHelloLinting('James');
这也适用于 CSS 文件。您可以将具有不一致缩进、大括号、换行符和分号的内容转换为格式良好的代码。例如：
body {color: red;
}
h1 {
color: purple;
font-size: 24px
}
将重新格式化为：
body {
color: red;
}
h1 {
color: purple;
font-size: 24px;
}
现在我们已经研究了这个命令，让我们看看如何实现它以自动运行。
第 2 步 — 在保存时格式化代码
到目前为止，您必须手动运行命令来格式化代码。要自动执行此过程，您可以在 VS Code 中选择一个设置，以便在保存时自动格式化文件。这也确保代码不会被检查到未格式化的版本控制。
要更改此设置，请COMMAND + ,在 macOS 或CTRL + ,Windows 上按以打开“设置”菜单。打开菜单后，搜索Editor: Format On Save并确保选中该选项：
设置完成后，您可以照常编写代码，并在保存文件时自动格式化。
第 3 步 – 更改更漂亮的配置设置
Prettier 默认为你做了很多事情，但你也可以自定义设置。
打开设置菜单。然后，搜索Prettier。这将显示您可以更改的所有设置：
以下是一些最常见的设置：
- 单引号– 在单引号和双引号之间进行选择。
- Semi – 选择是否在行尾包含分号。
- 制表符宽度– 指定您希望制表符插入的空格数。
在 VS Code 中使用内置设置菜单的缺点是它不能确保团队中开发人员之间的一致性。
第 4 步 – 创建更漂亮的配置文件
如果您更改 VS Code 中的设置，其他人的机器上可能会有完全不同的配置。通过为项目创建配置文件，您可以在整个团队中建立一致的格式。
创建一个名为以下扩展名之一的新文件：.prettierrc.extension
ymlyamljsonjstoml
下面是一个使用 JSON 的简单配置文件示例：
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
有关配置文件的更多细节，请查看Prettier Docs。创建其中之一并将其签入您的项目后，您可以确保每个团队成员都遵循相同的格式规则。
结论
拥有一致的代码是一种很好的做法。当与多个合作者一起处理项目时，它特别有用。就一组配置达成一致有助于代码的易读性和理解。可以将更多时间用于解决具有挑战性的技术问题，而不是为解决代码缩进等问题而苦苦挣扎。
Prettier 确保代码格式的一致性并使过程自动化。
