VS Code配置snippets代码片段快速生成html模板，提高前端编写效率

朱雀 2024-04-07 14:03 80阅读 0赞

先看下示例，在输入 **!** 号回车后自动生成一段代码片段。  
这样我们就可以更便捷的进行代码编写了。  
![请添加图片描述][09cae84e829c4d98bc038cd597f8a0d5.gif]  
配置方法如下：  
![在这里插入图片描述][af3ae4e9ea404164838424bd27df2673.png]  
然后找到对应的文件进行配置，例如 **html.json**，编写 `.html` 扩展名文件时就能触发。  
![在这里插入图片描述][8fd0d91c267248efa0aa084b2cdeb955.png]  
我这选的 **html.json** 进行的配置，  
其中 `"prefix": "html"` 里的 **html** 就是关键词，后面就靠它来触发，这个可以自己随便定义。  
**Html templates** 名也是随便定义的。  
里面用的 `$0` 表示光标所落的位置。  
其它的例如 `$TM_FILENAME` 是引用的一些内置的变量，这个是表示当前文件名，更多的可以查看后面的表格。

{
        
    	"Html templates": {
        
    		"prefix": "html",
    		"body": [
    			"<!DOCTYPE html>",
    			"<html>",
    			"<head>",
    			"  <meta charset=\"UTF-8\">",
    			"  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
    			"  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
    			"  <title>xxx</title>",
    			"</head>",
    			"<body>",
    			"$0",
    			"</body>",
    			"</html>",
    			"$BLOCK_COMMENT_START",
    			"文件名：$TM_FILENAME",
    			"日期：$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
    			"$BLOCK_COMMENT_END"
    		],
    		"description": "Html templates"
    	}
    }

然后输入 **html** 就能触发了，那个前面有个方块的就是。  
![在这里插入图片描述][483f84f5c6fd43e394d2d6495d0bceb7.png]  
按回车或 **Tab** 键后就能展示代码了。  
![在这里插入图片描述][fcf9f3912ba64d348577fbbaac635bcd.png]  
相关的变量表如下：  
![在这里插入图片描述][e84ccbace353479c844dff77055d9f52.png]  
更多详细内容可以查看：  
[官方说明文档][Link 1]  
喜欢的点个赞❤吧！

[09cae84e829c4d98bc038cd597f8a0d5.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/303018731e00412dab20054f71d2d4f6.gif
[af3ae4e9ea404164838424bd27df2673.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/9fa1ae6099444541bfaadb292a30b95d.png
[8fd0d91c267248efa0aa084b2cdeb955.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d41ba06f517148adb31ea1b182d97df7.png
[483f84f5c6fd43e394d2d6495d0bceb7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1708ed4eb8fc40a185d9ad7051a0c7f3.png
[fcf9f3912ba64d348577fbbaac635bcd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5bef63f2ce63443d9200aeaf1ed01798.png
[e84ccbace353479c844dff77055d9f52.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/303fb4dc5ead4a74ab1c695ad69e5e36.png
[Link 1]: https://code.visualstudio.com/docs/editor/userdefinedsnippets