如何在 Visual Studio Code 中使用 Prettier 格式化代码

简介

保持代码格式的一致性是一个挑战，但现代开发工具使得可以自动在团队的代码库中保持一致性成为可能。

在本文中，您将设置 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，您需要安装该扩展。要做到这一点，可以在 VS Code 的扩展面板中搜索 Prettier - Code Formatter。如果您是第一次安装它，您将看到一个 install 按钮，而不是下面显示的 uninstall 按钮：

!Prettier extension readme

步骤 1 — 使用格式化文档命令

安装了 Prettier 扩展后，您现在可以利用它来格式化您的代码。首先，让我们探讨如何使用 格式化文档 命令。该命令将使您的代码在格式上更加一致，包括空格、换行和引号。

要打开命令面板，您可以在 macOS 上使用 COMMAND + SHIFT + P，在 Windows 上使用 CTRL + SHIFT + P。

在命令面板中，搜索 format，然后选择 Format Document。

!Command palette opened with results for format

然后您可能会被提示选择要使用的格式。要这样做，点击 Configure 按钮：

!Prompt for selecting a default formatter

然后选择 Prettier - Code Formatter。

!Selecting Prettier

您的代码现在已经格式化，包括空格、换行和一致的引号：

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 中选择一个设置，使得在保存文件时自动格式化。这也确保了不会将未经格式化的代码提交到版本控制中。

要更改此设置，请按下 macOS 上的 COMMAND + ,，或者在 Windows 上按 CTRL + , 打开 Settings 菜单。一旦菜单打开，搜索 Editor: Format On Save，并确保选项已被勾选：

!Editor: Format On Save checked

设置完成后，您可以像往常一样编写代码，并在保存文件时自动进行格式化。

步骤 3 — 更改 Prettier 配置设置

Prettier 默认会为您做很多事情，但您也可以自定义设置。

打开 Settings 菜单。然后搜索 Prettier。这将显示您可以更改的所有设置：

!Configuration Settings for Prettier

以下是一些最常见的设置：

• Single Quote - 选择单引号或双引号。
• Semi - 选择是否在行末包含分号。
• Tab Width - 指定一个制表符要插入多少个空格。

使用 VS Code 中内置的设置菜单的缺点是它不能确保团队中的开发人员之间的一致性。

步骤 4 — 创建 Prettier 配置文件

如果您在 VS Code 中更改设置，其他人可能在他们的机器上有完全不同的配置。您可以通过为您的项目创建一个配置文件来确保团队中的一致格式。

创建一个名为 .prettierrc.extension 的新文件，其中扩展名可以是以下之一：

• yml
• yaml
• json
• js
• toml

以下是使用 JSON 的简单配置文件示例：

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

有关配置文件的更多具体信息，请查看 Prettier 文档。创建其中一个并将其检入您的项目后，您可以确保每个团队成员遵循相同的格式规则。

结论

保持一致的代码风格是一个良好的实践。在与多个合作者共同开发项目时尤其有益。达成一致的配置有助于提高代码的可读性和理解性。这样可以将更多的时间用于解决具有挑战性的技术问题，而不是在解决诸如代码缩进之类的问题上浪费时间。

Prettier 确保了代码格式的一致性，并使这一过程自动化。