在 Vue 的 template 中使用 Pug 的完整教程

---

1. 安装 Pug

安装 Pug 作为开发依赖：

npm

npm install -D pug

yarn

yarn add -D pug

pnpm

pnpm add -D pug

说明：

• 安装后，Pug 将用于编译 template lang="pug" 中的模板。

2. 安装 Prettier 插件

Prettier 是一个代码格式化工具，但默认不支持 Pug。为此，您需要安装 @prettier/plugin-pug 以支持 Pug 代码格式化：

npm

npm install -D @prettier/plugin-pug

yarn

yarn add -D @prettier/plugin-pug

pnpm

pnpm add -D @prettier/plugin-pug

说明：

• 如果未安装 Prettier，先运行：

npm

npm install -D prettier

yarn

yarn add -D prettier

pnpm

pnpm add -D prettier

• 该插件确保 Prettier 能正确格式化 Pug 代码，保持代码风格一致。

3. 配置 Prettier

在项目根目录创建或编辑 .prettierrc 文件，添加以下配置：

{
  // 其他配置......
  "plugins": ["@prettier/plugin-pug"],
  "pugCommentPreserveSpaces": "keep-all",
  "pugSortAttributes": "desc",
  "pugFramework": "vue",
  "pugSingleFileComponentIndentation": true
}

详细解释：

• "plugins": ["@prettier/plugin-pug"]：启用 Pug 格式化。
• "pugCommentPreserveSpaces": "keep-all"：保留注释前空格。
• "pugSortAttributes": "desc"：按降序排序属性。
• "pugFramework": "vue"：优化 Vue 单文件组件。
• "pugSingleFileComponentIndentation": true：启用 SFC 缩进。

4. 安装 ESLint 插件

安装 eslint-plugin-vue-pug 以支持 Pug 模板的代码质量检查：

npm

npm install -D eslint-plugin-vue-pug

yarn

yarn add -D eslint-plugin-vue-pug

pnpm

pnpm add -D eslint-plugin-vue-pug

说明：

• 如果未安装 ESLint 和 Vue 插件，先运行：

npm

npm install -D eslint eslint-plugin-vue

yarn

yarn add -D eslint eslint-plugin-vue

pnpm

pnpm add -D eslint eslint-plugin-vue

5. 配置 ESLint

在 .eslintrc 中添加：

{
  // 其他配置......
  "extends": ["plugin:vue/vue3-recommended", "plugin:vue-pug/vue3-recommended"]
}

详细解释：

• "plugin:vue/vue3-recommended"：Vue 3 的推荐规则。
• "plugin:vue-pug/vue3-recommended"：支持 Pug 模板 linting。
• 该插件仅 lint 与 HTML 对应的 Pug 语法，暂不支持 Pug 的 mixin、循环等高级特性。
• 使用 LF 换行符以避免 Pug 词法分析错误。

6. 配置 Vite

编辑 vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  // 其他配置......
  optimizeDeps: {
    include: ['pug']
  }
})

说明：

• optimizeDeps.include: ['pug'] 确保 Vite 预构建 Pug。

7. 安装 Vue 语言插件

到这一步我们已经可以正常在 vue 里使用 pug 模板语法了，但是你会发现，在 vue 单文件组件里使用 pug 模板语法，vscode无法识别到变量，以及没有标签、属性、指令（如 v-if、v-for）、组件名等的自动补全，如下图：

这里我们需要安装 @vue/language-plugin-pug 以支持 vscode 的语法高亮和 vue 语法自动补全：

npm

npm install -D @vue/language-plugin-pug

yarn

yarn add -D @vue/language-plugin-pug

pnpm

pnpm add -D @vue/language-plugin-pug

然后在 tsconfig.json 或者 jsconfig.json 中添加：

{
  "compilerOptions": {
    // 其他配置...
  },
  "vueCompilerOptions": {
    "plugins": ["@vue/language-plugin-pug"]
  }
}

说明：

• 启用 Pug 语言支持，确保 vscode 识别 Vue 的动态语法。