乐闻世界logo
搜索文章和话题

How do I automatically run Prettier VS Code?

4 个月前提问
4 个月前修改
浏览次数18

1个答案

1

使用 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 > SettingsCtrl+,)。
  • 搜索 "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 自动运行,以确保代码风格的一致性和提高代码的可读性。这不仅提升了个人开发效率,也有助于团队协作时保持代码风格的统一。

2024年7月26日 00:07 回复

你的答案