Visual Studio Code修改HTML Snippets插件中默认模板内容

最近在熟悉用VSC做前端开发编辑器,发现snippets这个功能很好用,就是自动帮你输入HTML标签,安装HTML Snippets插件(0.1.0)后,直接在代码里面输入html5然后敲回车就会自动帮你把一个HTML5标准标签模板给填充好,但是有一个小问题就是,自动填充的效果是这样的:

<!DOCTYPE html>
<html lang="en"><head><title></title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="css/style.css" rel="stylesheet"></head><body></body>
</html>

这里lang=”en”,我想修改默认填充成lang=”zh-CN”,小折腾了一下,找到了这个插件的配置文件位于

C:\Users\Dexter\.vscode\extensions\abusaidm.html-snippets-0.1.0\snippets\snippets.json

打开这个文件,找到定义html5映射的部分,修改如下,重启一下VSC,再输入html5就变成想要的效果了

"html5": {"prefix": "html5","body": ["<!DOCTYPE html>","<html lang=\"$1zh-CN\">",            ~~这里原来是en~~"\t<head>","\t\t<title>$2</title>","\t\t<meta charset=\"UTF-8\">","\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">","\t\t<link href=\"$3css/style.css\" rel=\"stylesheet\">","\t</head>","\t<body>","\t$4","\t</body>","</html>"],"description": "HTML - Defines a template for a html5 document","scope": "text.html"},

补充一下

也可以在文件-首选项-用户自定义代码段,找到HTML后,在html.json配置文件里面写上自己常用的代码段,例如下面这个是我修改的包含Vue.js引用的HTML5代码模板:

{/*// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the // same ids are connected.// Example:"Print to console": {"prefix": "log","body": ["console.log('$1');","$2"],"description": "Log output to console"}
*/"Vue": {"prefix": "vue","body": ["<!DOCTYPE html>","<html lang=\"zh-CN\">","\t<head>","\t\t<title>$1</title>","\t\t<meta charset=\"UTF-8\">","\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">","\t\t<script src=\"https://cdn.bootcss.com/vue/2.2.2/vue.min.js\"></script>","\t</head>","\t<body>","\t$2","\t</body>","</html>"],"description": "vue - Defines a template for a vue & html5 document"}
}

这里需要注意一下,代码中`$1,$2`标注的位置是自动插入代码段之后光标的位置,`$1`是默认位置,`$2`是按tab键之后会跳转到的下一个位置

Visual Studio Code修改HTML Snippets插件中默认模板内容相关推荐

Visual Studio Code开发HTML5安装插件快捷使用Bootstrap样式
Visual Studio Code开发HTML5安装插件快捷使用Bootstrap样式一.引入bootstrap.css 下载bootstrap,地址:Bootstrap中文网点击Bootstr ...
Visual Studio Code：利用 MSSQL 插件创建数据库 IDE
尽管面对繁重的 .NET 开发任务 Visual Studio 仍是我的首选 IDE,但我却已深深迷恋上 Visual Studio Code (VS Code),无论我使用的语言是 C#.JavaS ...
Visual Studio Code安装(软件及插件)教程
官网下载地址https://code.visualstudio.com/Download 百度网盘下载链接分享链接:https://pan.baidu.com/s/1fTb4aG91N_Z-3VGk ...
Visual Studio Code修改字体大小
VS Code界面字体过大导致使用不便按住ctrl+shift+p的组合键,输入user settings 打开设置的json文件可以看到界面字体过大是缩放等级zoomlevel过高导致的修 ...
visual studio code 调试ROS的插件
ctrl+p搜索: ext install ros https://marketplace.visualstudio.com/items?itemName=ajshort.ros 进行安装其他可以调 ...
VS Code || Visual Studio Code 修改、添加背景图片的方式
第一步,打开扩展工具第二步,搜索:background,安装第三步,左上角打开文件→首选项→设置第四步,点击右上角中的"{}",这个按钮,展开JSON模式设置第五步,配置相 ...
visual studio code 修改工具栏风格
用windows版vscode的同学们是否发现它的工具栏是白色的跟整个界面看起来不太搭调,如下图: 其实要改变标题栏颜色也很简单,点击:文件> 首选项>设置将 "window. ...
Visual Studio Code修改主题背景颜色
点击"文件"--"首选项"--"颜色主题",即可设置背景颜色啦,快捷键Ctrl+K,Ctrl+T:
visual studio code 重置所有设置（还原默认设置）
1.背景:配置失误,导致vscode无法使用,如窗口缩放太大,快捷键失效. 2.解决方法 a.打开如下目录:C:\Users\pcName\AppData\Roaming\Code\User( 注意替 ...

Visual Studio Code修改HTML Snippets插件中默认模板内容

补充一下

这里需要注意一下,代码中`$1,$2`标注的位置是自动插入代码段之后光标的位置,`$1`是默认位置,`$2`是按tab键之后会跳转到的下一个位置

Visual Studio Code修改HTML Snippets插件中默认模板内容相关推荐

最新文章

热门文章

Visual Studio Code修改HTML Snippets插件中默认模板内容

补充一下

这里需要注意一下,代码中$1,$2标注的位置是自动插入代码段之后光标的位置,$1是默认位置,$2是按tab键之后会跳转到的下一个位置

Visual Studio Code修改HTML Snippets插件中默认模板内容相关推荐

最新文章

热门文章

这里需要注意一下,代码中`$1,$2`标注的位置是自动插入代码段之后光标的位置,`$1`是默认位置,`$2`是按tab键之后会跳转到的下一个位置