likes
comments
collection
share

!+tab快捷键“失灵”？，vscode自定义html快捷模板解决!+tab无法生成html快捷模板的问题，自定义htm

作者站长头像
站长
· 阅读数 29

解决!+tab无法生成html快捷模板的问题

    好家伙，今天突然发现html文件中!+tab快捷键无法生成html模板了，害的我跟代码较劲了一个小时（说白了浪费了
我一个小时的时间），为什么呢，因为网上根本找不到有效的解决方案，这次不是简单的设置vscode语言模式能解决的,
网上讲的方法全是让你在vscode上更改语言模式，因为他们认为是你语言没调对。这里教给大家一个更“自由”的方法，
自定义快捷模板。
  1. 首先打开vscode,然后找到左下方的齿轮（下图由于我个人的vscode调整了设置，所以是在右侧，默认是左侧），点击配置用户代码片段
!+tab快捷键“失灵”？，vscode自定义html快捷模板解决!+tab无法生成html快捷模板的问题，自定义htm
  1. 然后搜索输入html，找到html.json(HTml),找这个文件的时候主要看括号里的内容，因为我记得，是配置完后它才变成json后缀的，总之看到差不多的就点开，后文有打开后的图片，以判断是否打开正确，图中箭头2，是可以自己创建新的json文件，在其中定义快捷键，点击后会让你输入创建的文件名，剩下的步骤都一样，下文以html.json为例。
!+tab快捷键“失灵”？，vscode自定义html快捷模板解决!+tab无法生成html快捷模板的问题，自定义htm
  1. 点开之后是如下图一样的文件，那就说明找对了文件，放心，没几个文件，很容易找的
!+tab快捷键“失灵”？，vscode自定义html快捷模板解决!+tab无法生成html快捷模板的问题，自定义htm
  1. 最后在这个文件的花括号里添加如下代码
"h5 template": {
    "prefix": "!", // 对应的是使用这个模板的快捷键,这里定义的是!，大家自己可以随意定义，
                    //但最好不要与系统自带的重复，如果是符号注意中英文
    "body": [//body里面就是按下tab键后生成的内容，可以根据自己的需求更改
     "<!DOCTYPE html>",
     "<html lang=\"en\">",
     "<head>",
     "\t<meta charset=\"UTF-8\">",
     "\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
     "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
     "\t<title>Document</title>",  
     "</head>\n",
     "<body>\n",
     "</body>\n",
     "</html>"
    ],
    "description": "HT-H5" // 模板的描述
 }

代码中的转义字符解释：

\t " \n都是转义字符，而空格就是单纯的空格，输入时可以输入空格 \t 的意思是 横向跳到下一制表符位置 等于 Tab键 " 的意思是 双引号 \n 的意思是回车换行

!+tab快捷键“失灵”？，vscode自定义html快捷模板解决!+tab无法生成html快捷模板的问题，自定义htm

做完这些调整，稳妥起见ctrl+s保存一下，再去html上，用你定义的快捷键，上述代码快捷键是!，故!+tab，就能生成你定义好的html模板了

!+tab快捷键“失灵”？，vscode自定义html快捷模板解决!+tab无法生成html快捷模板的问题，自定义htm !+tab快捷键“失灵”？，vscode自定义html快捷模板解决!+tab无法生成html快捷模板的问题，自定义htm

自定义的方法更加“自由”，且有效的解决了快捷键生成模板的问题，希望这个方法对大家有帮助

转载自:https://juejin.cn/post/7118037161084977183
评论
请登录