VSCode 如何格式化某个文件夹下所有的文件

前言

现代软件开发中，代码的可读性和一致性至关重要。无论是个人项目还是团队协作，保持代码格式的一致性都有助于提高代码的可维护性和减少潜在错误。Prettier 是一个广受欢迎的代码格式化工具，它支持多种编程语言，并且可以与 VSCode 无缝集成。

最近工作中，有一个特殊的需求，希望对历史代码做一下统一的代码格式化，需要限制在某个文件夹范围。本文聊聊如何解决这个问题。

为什么要格式化代码？

首先，让我们来聊聊为什么格式化代码是如此重要：

1. 提高可读性：一致的代码格式让代码更容易阅读和理解。
2. 减少错误：一致的格式可以减少在代码审查和合并时出现的冲突。
3. 节省时间：自动格式化工具可以让你专注于编写代码，而不是纠结于空格和缩进。

使用 Prettier 格式化代码

在 VSCode 中，我们通常使用 Prettier 这样的代码格式化工具。它支持多种编程语言，并且可以轻松集成到 VSCode 中。

第一步：安装 Prettier 扩展

1. 打开 VSCode。
2. 点击侧边栏的扩展图标（或者按 Ctrl+Shift+X）。
3. 在搜索框中输入 "Prettier - Code formatter"。
4. 找到 Prettier 扩展并点击安装。
   

第二步：配置 Prettier

安装完 Prettier 之后，我们需要进行一些配置：

1. 打开 VS Code 的设置（点击右上角的齿轮图标，然后选择 "Settings"，或者直接按 Ctrl+,）。
2. 搜索 Prettier 并确保 "Prettier: Require Config" 选项是禁用的。这样即使没有配置文件，Prettier 也会工作。
   

第三步：创建 Prettier 配置文件

在你的项目根目录下创建一个 .prettierrc 文件，并添加如下内容：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

这只是一个示例配置，你可以根据自己的喜好进行调整。

第四步：格式化文件夹下所有的文件

现在我们已经安装并配置好了 Prettier，接下来就是格式化整个文件夹下的所有文件。

方式一：使用 VS Code 命令面板

1. 打开 VS Code 命令面板（按 Ctrl+Shift+P）。

2. 输入并选择 "Format Document"。这将格式化当前打开的文件。
   

3. 要格式化整个文件夹，可以依次打开每个文件并执行格式化命令，但这显然不太高效。

方式二：使用 Prettier CLI

我们可以使用 Prettier 的命令行工具来一次性格式化整个文件夹下的所有文件：

1. 首先，确保你已经全局安装了 Prettier。你可以通过以下命令进行安装（需要 Node.js 环境）：
   npm install -g prettier
2. 在你的项目根目录下打开终端，然后运行以下命令：
   prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}"
   上面的命令会格式化 src 文件夹下所有匹配扩展名的文件。你可以根据你的项目结构和需要进行调整。

第五步：自动格式化

为了进一步提升开发体验，我们可以设置 VS Code 在保存文件时自动进行格式化：

1. 打开 VS Code 的设置。
2. 搜索 "Format On Save" 并勾选 "Editor: Format On Save"。
   

这样，每次你保存文件时，Prettier 就会自动帮你格式化代码了。

总结

通过这篇教程，我们了解了如何在 VSCode 中使用 Prettier 格式化一个文件夹下的所有文件。无论你是手动格式化还是使用命令行工具，Prettier 都可以帮助你保持代码的一致性和可读性。