Better Jinja for VSCode：安装与配置指南

方苹奕

于 2024-08-24 10:00:42 发布

阅读量732

点赞数 4

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00647/article/details/141493943

Better Jinja for VSCode：安装与配置指南

jinjahtml-vscodeSyntax highlighting for jinja(2) html templates in vscode项目地址:https://gitcode.com/gh_mirrors/ji/jinjahtml-vscode

1. 项目目录结构及介绍

GitHub仓库 提供了一个名为Better Jinja的VSCode插件，专门用于提升在Visual Studio Code中编辑Jinja2模板的体验。由于这是一个VSCode扩展，其核心并不涉及传统的“项目”目录结构，而是遵循VSCode插件的标准布局：

src: 包含插件的核心代码。
package.json: 插件的元数据文件，定义了插件的信息、依赖及激活事件等。
README.md: 用户指南，详细介绍插件功能和如何使用。
icons: 存放插件可能使用的图标资源。

2. 项目的启动文件介绍

对于VSCode插件而言，并没有一个传统意义上的“启动文件”，但关键的是它的package.json文件。这个文件包含了插件的初始化指令、激活条件、依赖项等。当你在VSCode中安装该插件时，VSCode读取此文件以了解插件的功能和如何集成到编辑器中。比如，激活事件(activationEvents)决定了在何种条件下插件会被激活，常见如打开特定类型的文件（如.jinja, .html）。

3. 项目的配置文件介绍

用户配置

使用Better Jinja插件时，用户通常需要调整VSCode的设置来优化体验。主要通过以下步骤进行配置：

打开VSCode的设置（可以通过快捷键Ctrl + ,或在菜单栏选择文件 > 首选项 > 设置）。
搜索file associations，点击编辑settings.json。

添加以下内容来确保Jinja和HTML的正确高亮以及IntelliSense支持：

{
    "emmet.includeLanguages": {"jinja-html": "html"},
    "[jinja-html]": {
        "editor.defaultFormatter": "Glavin001.beautify-vscode",
        "editor.formatOnSave": true
    },
    "files.associations": {
        "*.html": "jinja-html"
    }
}

这一步确保了当处理包含Jinja语法的HTML文件时，既保持了正确的语法高亮，也启用了对HTML元素的自动补全。