若VSCode中Nunjucks模板语法高亮、补全或格式化异常，需安装Nunjucks扩展、绑定.njk文件语言模式、配置Prettier插件支持、启用Emmet HTML兼容性，并可添加自定义代码片段提升效率。
如果您在 Visual Studio Code 中编辑 Nunjucks 模板文件时遇到语法高亮缺失、代码补全失效或格式化异常等问题，则可能是由于默认配置未启用 Nunjucks 语言支持。以下是为 VSCode 配置 Nunjucks 支持的多种方法：
本文运行环境：MacBook Pro，macOS Sequoia。
一、安装 Nunjucks 语言扩展
VSCode 默认不识别 .njk 或 .html 中的 Nunjucks 语法，需通过专用扩展提供语法定义与基础功能支持。
1、打开 VSCode，点击左侧活动栏中的扩展图标（或按快捷键 Cmd+Shift+X）。
2、在搜索框中输入 Nunjucks，查找由 esbenp 发布的官方推荐扩展 Nunjucks（图标为橙色齿轮）。
3、点击“安装”按钮，安装完成后重启 VSCode 或重新加载窗口（Cmd+Shift+P → 输入 Developer: Reload Window 并回车）。
二、手动设置文件关联
扩展安装后，VSCode 仍可能无法自动将 .njk 文件识别为 Nunjucks 类型，需显式绑定语言模式以启用语法高亮与折叠功能。
1、打开任意一个 .njk 文件。
2、点击右下角显示的语言模式（如 Plain Text），弹出语言选择面板。
3、在搜索框中输入 Nunjucks，选择该项并确认。
4、若需永久生效，按下 Cmd+, 打开设置，搜索 files.associations，点击“在 settings.json 中编辑”，添加如下行："*.njk": "nunjucks"。
三、配置 Prettier 支持 Nunjucks 格式化
Prettier 默认不支持 Nunjucks，需借助插件桥接解析能力，使格式化命令可正确处理模板语法结构。
1、确保已全局安装 prettier 及其 Nunjucks 插件：npm install --global prettier @prettier/plugin-nunjucks。
2、在工作区根目录创建或编辑 .prettierrc 文件，内容包含：{"plugins": ["@prettier/plugin-nunjucks"]}。
3、打开 VSCode 设置，搜索 format on save，勾选启用；再搜索 default formatter，将 Nunjucks 文件的默认格式化工具设为 esbenp.prettier-vscode。
四、启用 Emmet 对 Nunjucks 标签的兼容
Emmet 在 Nunjucks 文件中默认禁用缩写展开，需显式启用以支持如 ul>li*3 这类快速生成结构的操作。
1、打开 VSCode 设置（Cmd+, ），搜索 emmet.includeLanguages。
2、点击“在 settings.json 中编辑”，添加键值对："nunjucks": "html"。
3、保存后，在 .njk 文件中输入 div.container 并按下 Tab，即可生成对应 HTML 结构。
五、配置自定义代码片段（Snippets）
通过用户级代码片段，可快速插入常用 Nunjucks 指令，避免重复手写 {% extends %}、{% block %} 等冗长结构。
1、按下 Cmd+Shift+P，输入 Preferences: Configure User Snippets 并回车。
2、在弹出菜单中选择 New Global Snippets file...，命名为 nunjucks.code-snippets。
3、在打开的 JSON 文件中，粘贴以下示例片段："extends template": {"prefix": "ext","body": ["{% extends \"$1.html\" %}","{% block $2 %}","$0","{% endblock %}"]}。
