如何让VS Code的.html文件同时支持Django与HTML语法识别及自动补全

• 第一步：修正settings.json冲突配置
  原有配置冲突点在于files.associations中同时将**/templates/*.html关联为django-html，又将全局*.html关联为html，全局规则优先级覆盖了模板目录规则，导致识别混乱。替换为以下配置：

{
  "emmet.triggerExpansionOnTab": true,
  "emmet.includeLanguages": {
    "django-html": "html"
  },
  "files.associations": {
    "**/templates/**/*.html": "django-html",
    "**/templates/*": "django-txt",
    "**/requirements{/**,*}.{txt,in}": "pip-requirements"
    // 如果你所有项目的HTML文件都是Django模板，可额外添加下面这行全局关联规则
    // "*.html": "django-html"
  },
  "[django-html]": {
    "editor.quickSuggestions": {
      "other": true,
      "comments": true,
      "strings": true
    },
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "html.validate.scripts": true,
  "html.validate.styles": true
}

该配置仅指定模板目录下的HTML文件为django-html类型，同时给django-html类型继承HTML编辑器的所有语法校验、自动补全、标签闭合能力，Emmet也会正常识别HTML缩写。

• 第二步：确认文件语言模式
  打开Django项目模板目录下的任意HTML文件，查看VS Code右下角状态栏显示的语言模式，如果显示为HTML或Django，点击该标识，在弹出的选择框中选中Django HTML，后续所有模板目录下的HTML文件都会自动识别为该类型。
• 第三步：排除扩展冲突
  如果配置生效后仍有问题，暂时禁用其他自定义HTML扩展、格式化扩展（如部分第三方HTML补全插件、Beautify等），重启VS Code后验证功能，确认冲突扩展后调整其优先级即可。
• 第四步：验证功能
  配置完成后，在HTML文件中输入div按Tab可触发Emmet补全，输入{{ }}或{% %}可触发Django语法补全，标签闭合、HTML属性提示功能都会正常生效。

内容的提问来源于stack exchange，提问作者Samarth Bagga