讲师中心 微信公众号
AI工具推荐 视频效率加速

VSCode for Pug (Jade):模板引擎的智能提示与格式化

梦雪同学_9858

梦雪同学_9858

发布时间:2026-01-07 05:15:24

|

1022人浏览过

|

来源于php中文网

原创

需安装Pug扩展、配置Prettier及插件、设置语言模式并禁用冲突插件:1.安装DigitalBrain79的Pug扩展;2.全局安装Pretterr并配置为默认格式化工具;3.安装prettier-plugin-pug并在.prettierrc中声明;4.将文件语言模式设为Pug后手动格式化;5.禁用EJS等冲突模板插件。

vscode for pug (jade):模板引擎的智能提示与格式化

如果您在 VSCode 中编辑 Pug(原 Jade)模板文件,但缺乏语法高亮、智能提示或自动格式化支持,则可能是由于缺少对应语言支持扩展或配置未生效。以下是实现 Pug 智能提示与格式化功能的多种方法:

本文运行环境:MacBook Air,macOS Sequoia。

一、安装官方推荐的 Pug 扩展

VSCode 本身不内置 Pug 语言支持,需通过扩展提供语法识别、代码补全及错误检查能力。该扩展由社区维护,兼容最新版 Pug 语法规范。

1、打开 VSCode,点击左侧活动栏中的扩展图标(或按快捷键 Ctrl+Shift+X)。

2、在搜索框中输入 Pug,找到名称为 Pug (Jade) Snippets 的扩展(作者:DigitalBrain79)。

3、点击“安装”按钮,等待扩展下载并启用。

4、重启 VSCode,新建一个 .pug 文件,确认语法高亮已生效。

二、配置 Prettier 实现自动格式化

Prettier 是主流的代码格式化工具,配合插件可对 Pug 文件执行缩进、换行、属性排序等标准化处理,确保团队协作中模板风格统一。

1、在终端中执行命令全局安装 Prettier:npm install -g prettier。

2、安装 VSCode 扩展 Prettier(作者:Esben Petersen)。

3、打开 VSCode 设置(Cmd+,),搜索 default formatter,在“Editor: Default Formatter”中选择 esbenp.prettier-vscode。

4、创建项目根目录下的 .prettierrc 文件,写入以下内容:

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

三、启用 Pug 特定格式化支持

Prettier 默认不支持 Pug,需额外安装专用解析器以启用完整格式化能力,否则保存时可能报错或无响应。

Gitguard Skill
Gitguard Skill

Git 安全扫描与仓库健康审计 — 基于熵的密钥检测、复合健康评分、提交质量分析、陈旧分支清理以及依赖扫描

下载

1、在项目目录中执行:npm install --save-dev prettier-plugin-pug。

2、修改项目根目录下的 .prettierrc,添加插件声明:

{ "plugins": ["prettier-plugin-pug"] }

3、在 VSCode 设置中搜索 pug,找到“Pug: Format On Save”,勾选启用。

四、手动触发格式化并验证效果

格式化功能需在正确语言模式下激活,VSCode 必须识别当前文件为 Pug 类型,否则快捷键将无效。

1、打开任意 .pug 文件,点击右下角语言标识(如显示“Plain Text”)。

2、在弹出菜单中选择 Pug,确保状态栏显示 Pug。

3、按下快捷键 Shift+Alt+F(Windows/Linux)或 Shift+Option+F(macOS)触发格式化。

4、观察缩进是否从空格转为 2 字符、布尔属性是否移除等号、标签闭合是否自动补全。

五、禁用冲突格式化插件

部分用户安装了多个模板引擎插件(如 EJS、Handlebars),其内置格式化逻辑可能覆盖 Pug 配置,导致保存后代码被错误重排。

1、打开 VSCode 扩展面板,搜索 EJS 或 Handlebars 相关扩展。

2、对非 Pug 项目中不需要的模板类扩展,点击“禁用”而非卸载。

3、在设置中搜索 format on save,确认仅 Pug 关联文件类型启用该选项。

4、打开命令面板(Cmd+Shift+P),输入 Format Document With...,选择 Configure Default Formatter For '.pug',指定为 Prettier。

热门AI工具

更多
PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

花生AI
花生AI Hot

一款AI视频创作工具,主要用于B站推出的AI视频创作工具,适合需要提升相关任务效率的用户。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

相关专题

更多
format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

1829

2023.07.31

python中的format是什么意思
python中的format是什么意思

python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1231

2024.06.27

default gateway怎么配置
default gateway怎么配置

配置default gateway的步骤:1、了解网络环境;2、获取路由器IP地址;3、登录路由器管理界面;4、找到并配置WAN口设置;5、配置默认网关;6、保存设置并退出;7、检查网络连接是否正常。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

377

2023.12.07

windows查看端口占用情况
windows查看端口占用情况

Windows端口可以认为是计算机与外界通讯交流的出入口。逻辑意义上的端口一般是指TCP/IP协议中的端口,端口号的范围从0到65535,比如用于浏览网页服务的80端口,用于FTP服务的21端口等等。怎么查看windows端口占用情况呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

3419

2023.07.26

查看端口占用情况windows
查看端口占用情况windows

端口占用是指与端口关联的软件占用端口而使得其他应用程序无法使用这些端口,端口占用问题是计算机系统编程领域的一个常见问题,端口占用的根本原因可能是操作系统的一些错误,服务器也可能会出现端口占用问题。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2978

2023.07.27

windows照片无法显示
windows照片无法显示

当我们尝试打开一张图片时,可能会出现一个错误提示,提示说"Windows照片查看器无法显示此图片,因为计算机上的可用内存不足",本专题为大家提供windows照片无法显示相关的文章,帮助大家解决该问题。

1528

2023.08.01

windows查看端口被占用的情况
windows查看端口被占用的情况

windows查看端口被占用的情况的方法:1、使用Windows自带的资源监视器;2、使用命令提示符查看端口信息;3、使用任务管理器查看占用端口的进程。本专题为大家提供windows查看端口被占用的情况的相关的文章、下载、课程内容,供大家免费下载体验。

2699

2023.08.02

windows无法访问共享电脑
windows无法访问共享电脑

在现代社会中,共享电脑是办公室和家庭的重要组成部分。然而,有时我们可能会遇到Windows无法访问共享电脑的问题。这个问题可能会导致数据无法共享,影响工作和生活的正常进行。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

3350

2023.08.08

DBeaver怎么导入数据
DBeaver怎么导入数据

DBeaver数据导入专题,整理Excel、CSV、SQL、TXT等常见文件的数据导入方法,涵盖目标数据库选择、数据表创建、字段映射、数据类型设置及导入参数配置等操作,帮助用户将本地文件中的数据写入数据库,并了解批量导入、重复数据处理和导入失败等常见问题的解决方法。

20

2026.11.05

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Python uv官方安装与入门文档
Python uv官方安装与入门文档

共0课时 | 0人学习

Buffalo框架快速入门指南
Buffalo框架快速入门指南

共0课时 | 0人学习

Valgrind支持平台说明
Valgrind支持平台说明

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn