代码标签联想求方法自动补全

Question

有没有知道class等其他的标签怎么联想啊之前vs里面行后来不知道点到什么了就不行了，有没有一种方法设置自己想要的联想标签

Answer 1

本答案参考 多次询问 ChatGPT-3.5 后选择的最佳回答，若是满意，还请采纳，谢谢

在HTML中实现代码标签联想（自动补全）以及设置自己想要的联想标签，以下是一些常见的方法：

一、在Visual Studio Code（VS Code）中的设置

1. 安装相关扩展

   • 对于HTML，有一些流行的扩展可以提供代码补全功能，如“HTML Snippets”。
   • 安装扩展：
     • 在VS Code中，点击左侧的“扩展”图标（看起来像四个方块）。
     • 在搜索框中输入“HTML Snippets”，然后点击安装。
   • 这些扩展通常会默认提供常见HTML标签（包括class属性相关的标签补全）的自动补全功能。

2. 自定义用户代码片段（针对特定标签和属性）

   • 打开用户代码片段：
     • 在VS Code中，依次点击“文件”->“首选项”->“用户代码片段”。
     • 选择“html.json”（如果没有则创建一个）。
   • 定义代码片段：
     • 例如，如果你想要创建一个自定义的<div>标签补全，包含特定的class，可以这样写：

       {
       "Custom div with class": {
        "prefix": "mydiv",
        "body": [
            "<div class='my - custom - class'>$1</div>",
            "$2"
        ],
        "description": "A custom div with a specific class"
       }
       }
       

   • 这里，“prefix”是你输入的触发自动补全的关键字（在这个例子中是“mydiv”），“body”是补全后的代码内容，“description”是对这个代码片段的描述。

3. 检查设置中的自动补全选项

   • 打开VS Code的设置（“文件”->“首选项”->“设置”）。
   • 在搜索框中输入“自动补全”。
   • 确保“Editor: Tab Completion”等相关选项被正确设置。例如，你可能希望将其设置为“on”以启用Tab键进行自动补全。

二、在其他编辑器中的类似方法（以WebStorm为例）

1. 内置的代码补全功能

   • WebStorm本身具有强大的HTML代码补全功能。它会根据HTML规范自动补全标签，包括class等属性。
   • 如果自动补全功能突然停止工作，可以检查是否有错误提示或者查看“设置”中的相关选项。

2. 自定义模板

   • 在WebStorm中，可以创建自定义的代码模板。
   • 打开“设置”（“File”->“Settings”）。
   • 在左侧导航栏中找到“Editor”->“Live Templates”。
   • 对于HTML，你可以创建一个新的模板，例如：
     • 定义一个缩写（如“mydiv”），然后在模板文本中输入<div class='my - custom - class'>$END$</div>。
     • 这样，当你在HTML文件中输入“mydiv”并按下相应的快捷键（通常是Tab键），就会自动补全为自定义的<div>标签。

3. 检查语言注入设置

   • 确保HTML语言注入设置正确。在WebStorm中，如果HTML文件被错误地识别为其他类型的文件，可能会影响代码补全功能。
   • 在“Settings”->“Languages & Frameworks”->“JavaScript”（因为HTML与JavaScript经常相关联）等相关设置中，确认HTML相关的设置正确。

Answer 2

安装一下Vs Code 插件
请参考：https://blog.csdn.net/weixin_74149305/article/details/143177722?spm=1001.2014.3001.5501