在Visual Studio Code中使用漂亮的代码格式化

Formatting code consistently is a pain, especially when working on a team. The beauty of modern day web development is that the tooling has gotten so much better! In this article, we will look at setting up Prettier to automatically format your code in Visual Studio Code.

一致地格式化代码是一件痛苦的事情，尤其是在团队中工作时。 现代Web开发的美丽之处在于工具已经变得越来越好！ 在本文中，我们将研究如何设置Prettier以在Visual Studio Code中自动设置代码格式。

样例代码 ( Sample Code )

For demo purposes, here's the sample code we will be formatting. If you're picky about code formatting, you'll pick up on some obvious misteps immediately.

出于演示目的，这是我们将要格式化的示例代码。 如果您对代码格式不满，您会立即发现一些明显的错误。

• mix of single vs double quotes
  单引号与双引号的混合
• the first property of the person object should be on it's own line
  人员对象的第一个属性应位于其自己的行上
• the console statement inside of the function should be indented
  函数内部的控制台语句应缩进
• you may or may not like the optional parenthesis surrounding the parameter of the arrow function
  您可能喜欢或可能不喜欢arrow函数参数周围的可选括号

安装漂亮的扩展 ( Installing the Prettier Extension )

To work with Prettier in Visual Studio Code, you'll need to install the extension. Search for Prettier - Code Formatter. You can see the extension below. If you're installing it for the first time, you'll see an "install" button instead of the "uninstall" button you see on mine.

要在Visual Studio Code中使用Prettier，您需要安装扩展。 搜索更漂亮的代码格式化程序 。 您可以在下面看到扩展名。 如果您是第一次安装它，将会看到一个“安装”按钮，而不是您在我上面看到的“卸载”按钮。

格式文件命令 ( The Format Document Command )

With the Prettier extension installed, we can now leverage it to format our code. We'll work more on this later, but to start, we can use the Format Document command.

安装了Prettier扩展程序后，我们现在可以利用它来格式化我们的代码。 稍后我们将对此进行更多工作，但首先，我们可以使用Format Document命令。

To open the command pallette, you can use Command **+ Shift + P** on Mac or Control **+ Shift + P** on Windows. In the command pallette search format, then choose** Format Document**.

要打开命令调色板，可以在Mac上使用Command ** + Shift + P **或在Windows上使用Control ** + Shift + P **。 在命令调色板搜索格式中，然后选择**格式文档**。

You may then be prompted by to choose which formatter to use. To do so, click the Configure button.

然后可能会提示您选择要使用的格式化程序。 为此，请单击配置按钮。

Then choose Prettier **- Code Formatter**.

然后选择更漂亮的**-代码格式化器**。

And the VOILA! Your code is nice and formatted. Notice all the fancy improvements!

还有VOILA！ 您的代码很漂亮，而且格式合理。 注意所有花哨的改进！

• spacing
  间距
• line wrappings
  线包装
• consistent quotes
  一致的报价

Prettier also works with CSS files!

漂亮的文件也可以使用CSS文件！

The awesome thing is that this also works on CSS files!

令人敬畏的是，这也适用于CSS文件！

From this...

由此...

To this!

为了这个！

保存时自动格式化 ( Automatically Format on Save )

So far, we have had to manually run a command to format our code. Instead, you can choose a setting in VS Code to have your files automatically formatted when you save. This has some great benefits.

到目前为止，我们不得不手动运行命令来格式化代码。 相反，您可以在VS Code中选择一个设置，以在保存时自动格式化文件。 这有一些好处。

You never have to manually format your code again!

您无需再手动格式化代码！

• ensure code is formatted without having to think about it
  确保无需考虑代码即可格式化代码
• code doesn't get checked in that's not formatted
  未格式化未检查的代码

To change this setting, use** Command + , on Mac or Control + , ** on Windows to open the settings menu. Then search for Editor: Format on Save and make sure it is checked.

要更改此设置，请在Mac上使用** Command + ，在Windows 上使用Control + ** **打开设置菜单。 然后搜索“ 编辑器：保存时格式化”并确保已选中。

With this setting in place, you can go about your business writing sloppily formatted code like we all do knowing that it will all be taken care of automatically for you!

有了此设置后，您就可以像编写众所周知的那样随意编写格式格式化的代码，这将自动为您服务！

VS代码设置中的更漂亮配置 ( Prettier Configuration in VS Code Settings )

Prettier does a lot of things for you by default, but you can also customize the settings. Here are a few of the most common settings.

默认情况下，Prettier会为您做很多事情，但是您也可以自定义设置。 以下是一些最常见的设置。

• Single Quote - choose between single and double quotes
  单引号-在单引号和双引号之间选择
• Semi - choose whether or not to include semi colons at the end of lines
  半-选择是否在行尾添加半冒号
• Tab Width - how many spaces you want a tab to consist of
  标签宽度-您希望标签包含多少个空格

Open the settings menu as above. Then, search for Prettier. This will bring up all of the settings that you can change right there in your editor.

如上打开设置菜单。 然后，搜索Prettier 。 这将显示所有可以在编辑器中更改的设置。

For example, what if I change the tab width to 10.

例如，如果我将制表符宽度更改为10，该怎么办？

Then save my file.

然后保存我的文件。

Pretty easy right?! This is probably not the tab width size you want to keep, but it's all up to you!

很容易吧？！ 这可能不是您要保留的制表符宽度大小，但这完全取决于您！

创建更漂亮的配置文件 ( Creating a Prettier Configuration File )

The downside to using the buit in settings menu in VS Code is that it doesn't ensure consistency across developers on your team. If you change settings in your VS Code, someone else could have an entirely different set of settings in theirs.

在VS Code的“设置”菜单中使用buit的不利之处在于，它不能确保团队中开发人员之间的一致性。 如果您在VS Code中更改设置，则其他人的设置可能会完全不同。

Establish consistent formatting across your team by creating a configuration file!

通过创建配置文件，在整个团队中建立一致的格式！

To solve this, you can create a Prettier configuration file. It has to be titled .prettierrc.(ext) with one of the following extensions.

为了解决这个问题，您可以创建一个Prettier配置文件。 它的标题必须是.prettierrc。 （ ext ）具有以下扩展名之一。

• yml, yaml, or json
  yml，yaml或json
• js
  js
• toml
  托姆
• include in package.json file (alternate option)
  包含在package.json文件中（替代选项）

I typically prefer JSON configuration files where you can define key **-> value** pairs for your settings. VS Code will even provide some intellisense for you as you type.

我通常更喜欢JSON配置文件，您可以在其中为设置定义键**-> value **对。 键入时，VS Code甚至会为您提供一些智能提示。

Here's an example of a simple configuration file.

这是一个简单配置文件的示例。

For more specifics on the configuration files, check out the Prettier Docs. After creating one of these and checking it in to your project, you can ensure that every team member follows the same formatting rules.

有关配置文件的更多详细信息，请查看“ 更漂亮的文档”。 创建其中一个并将其签入您的项目后， 您可以确保每个团队成员遵循相同的格式设置规则 。

结语 ( Wrap Up )

Don't waste your time manually formatting your code. It takes time that can be better spent writing more code. Take advantage of the amazing modern tools out there and set up Prettier!

不要浪费时间手动格式化代码。 花一些时间可以花更多时间编写更多代码。 利用出色的现代工具，并设置Prettier！

翻译自: https://scotch.io/tutorials/code-formatting-with-prettier-in-visual-studio-code