VS Code 如何自动运行 Prettier?

使用 VS Code 自动运行 Prettier 是一个很好的提升开发效率的方法。下面是一步步如何设置的过程：

1. 安装 Prettier 扩展

首先，确保您的 Visual Studio Code 中已经安装了 Prettier 扩展。可以通过以下步骤完成：

• 打开 VS Code。
• 进入扩展视图通过点击侧边栏的扩展图标或者按下 Ctrl+Shift+X。
• 在搜索框中输入 “Prettier”。
• 找到 “Prettier - Code formatter” 扩展，点击安装。

2. 安装 Prettier 作为项目依赖

在大多数情况下，我们建议将 Prettier 作为项目的开发依赖进行安装，这可以通过运行以下命令完成：

bash
npm install --save-dev prettier

3. 创建配置文件（可选）

虽然 Prettier 有默认的配置，但您可以通过在项目根目录下创建一个 .prettierrc 文件来自定义格式化选项。例如：

json
{
  "semi": false,
  "singleQuote": true
}

这个配置会配置 Prettier 使用单引号而不是双引号，且不在语句末尾添加分号。

4. 启用格式化保存

为了使 Prettier 在每次保存文件时自动格式化代码，您可以修改 VS Code 的设置：

• 打开设置（File > Preferences > Settings 或 Ctrl+,）。
• 搜索 "Format On Save" 并确保勾选 “Editor: Format On Save” 选项。

这样，每次您保存文件时，Prettier 将自动格式化您的代码。

5. 测试配置

为了测试您的配置是否有效，您可以故意写一些格式不规范的代码，比如：

javascript
const name="World";console.log(`Hello, ${name}` );

保存文件时，如果一切设置正确，Prettier 应该会自动将其格式化为：

javascript
const name = 'World';
console.log(`Hello, ${name}`);

总结

通过以上步骤，您可以在 VS Code 中配置 Prettier 自动运行，以确保代码风格的一致性和提高代码的可读性。这不仅提升了个人开发效率，也有助于团队协作时保持代码风格的统一。