uniapp 如何实现保存时自动格式化代码

在uniapp开发过程中，如何在保存代码时自动触发格式化？目前每次手动格式化比较麻烦，希望能像VSCode那样在保存文件时自动执行代码美化。请问需要配置哪些插件或设置？如果是HBuilderX工具，有没有内置的自动格式化功能？求具体实现方法。

2 回复

在 HBuilderX 中，打开设置，搜索“format”，勾选“保存时自动格式化”即可。也可在项目根目录创建 .prettierrc 文件自定义规则。


在 UniApp 中，可以通过以下方法实现保存时自动格式化代码：

1. 使用 VS Code 编辑器（推荐）

  • 安装 Prettier 插件：

    1. 在 VS Code 扩展商店搜索 “Prettier - Code formatter” 并安装。
    2. 按 Ctrl + , 打开设置，搜索 “Format On Save”，勾选该选项。
    3. 在项目根目录创建 .prettierrc 配置文件，自定义规则，例如：
      {
  "semi": false,
  "singleQuote": true
}

  • 安装 ESLint 插件（可选）：

    1. 搜索 “ESLint” 并安装，用于代码质量检查。
    2. 在 package.json 或 .eslintrc.js 中配置规则。

2. 使用 HBuilderX

  • 内置格式化功能：
    1. 打开 HBuilderX，进入 工具 → 设置 → 编辑器设置。
    2. 在 “保存时格式化” 选项中勾选启用。
    3. 可通过 工具 → 设置 → 插件配置 调整格式化规则。

3. 配置 Prettier（跨编辑器）

在项目根目录创建 .prettierrc：

{
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "semi": false
}

安装 Prettier：

npm install --save-dev prettier

注意事项

  • 确保编辑器与 Prettier 配置兼容。
  • 团队开发时建议统一配置，避免格式冲突。

通过以上步骤，即可在保存文件时自动格式化 UniApp 代码。

回到顶部