VSCode 自定义html模板
- 找到 html.json 文件?
- 添加html模板
- 使用自定义的快捷键快速创建模板
第一步: 找到 html.json 文件?
打开vscode → 设置 → 选择User Snippets![](https://img-blog.csdnimg.cn/20210127233616694.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dsczY2Ng==,size_16,color_FFFFFF,t_70#pic_center)
搜索 html.json 文件?
![](https://img-blog.csdnimg.cn/20210127234132837.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dsczY2Ng==,size_16,color_FFFFFF,t_70#pic_center)
第二步: 添加html模板
在 html.json 文件中自定义html模板?![](https://img-blog.csdnimg.cn/20210730191355248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FvYmE2NjY=,size_16,color_FFFFFF,t_70)
?第三步:使用自定义的快捷键快速创建模板
第二步中自定义创建模板快捷键是 “ qy” 输入qy即可快速创建html模板![](https://img-blog.csdnimg.cn/20210730191552560.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FvYmE2NjY=,size_16,color_FFFFFF,t_70)
?![](https://img-blog.csdnimg.cn/20210730191608900.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FvYmE2NjY=,size_16,color_FFFFFF,t_70)
?json代码如下:
{
"vh": {
"prefix": "qy", // 触发的关键字 输入qy按下tab键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <title>青叶-Aoba</title>",
" <style>",
" *{",
" margin: 0;",
" padding: 0;",
" }",
"",
" </style>",
"</head>",
"",
"<body>",
"",
"</body>",
"",
"</html>",
],
}
}
|