Why is Prettier not working on save VS Code?

当 VS Code 在保存代码时 Prettier 没有自动格式化代码，通常可能是由以下几个原因造成的：

1. Prettier 插件未安装或未启用

首先检查是否已经在 VS Code 中安装了 Prettier 插件。可以在 VS Code 的扩展市场中搜索并安装。安装后，确保插件是启用状态。

2. 未在 VS Code 中配置为默认格式化工具

安装并启用 Prettier 后，需要在 VS Code 的设置中配置它为默认的代码格式化工具。可以通过以下步骤进行设置：

• 打开设置（快捷键：Ctrl + , 或 Cmd + ,）
• 搜索 “Default Formatter” 并选择 esbenp.prettier-vscode 作为默认格式化工具
• 确认 “Format On Save” 选项是被勾选的，这样每次保存文件时，Prettier 将自动格式化代码。

3. 项目中没有 Prettier 配置文件

如果项目中没有 .prettierrc 或类似的 Prettier 配置文件，Prettier 可能不会按预期运行。确保项目根目录中有 Prettier 的配置文件，或者在 VS Code 的用户设置中配置全局的 Prettier 规则。

4. 代码文件不符合 Prettier 支持的格式

Prettier 支持多种文件格式，如 JavaScript、TypeScript、CSS、Markdown 等。确保正在编辑的文件格式被 Prettier 支持。如果是非支持格式，Prettier 将不会格式化该文件。

5. 存在语法错误

如果代码文件中存在语法错误，Prettier 可能无法正确解析和格式化代码。检查代码中是否有语法错误，修正后再尝试保存。

例子

假设我们正在使用 VS Code 编辑一个 JavaScript 文件，并希望在保存时自动格式化。我们需要进行以下步骤：

• 确保 VS Code 已安装 Prettier 插件。
• 在 VS Code 设置中配置 Prettier 为默认格式化工具，并确保启用了“在保存时格式化”。
• 在项目根目录添加 .prettierrc 文件，定义了所需的代码风格设置。
• 确保 JavaScript 代码没有语法错误。

按照这些步骤操作后，每次保存 JavaScript 文件时，Prettier 将自动格式化代码，使代码风格保持一致。

这种设置确保了代码的美观与一致性，提高了代码的可读性和维护性。