Visual Studio Code修改HTML Snippets插件中默认模板内容
2017-09-07 19:16
597 查看
最近在熟悉用VSC做前端开发编辑器,发现snippets这个功能很好用,就是自动帮你输入HTML标签,安装HTML Snippets插件(0.1.0)后,直接在代码里面输入html5然后敲回车就会自动帮你把一个HTML5标准标签模板给填充好,但是有一个小问题就是,自动填充的效果是这样的:
这里lang=”en”,我想修改默认填充成lang=”zh-CN”,小折腾了一下,找到了这个插件的配置文件位于
打开这个文件,找到定义html5映射的部分,修改如下,重启一下VSC,再输入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 常用插件整理
- Visual Studio Code的插件配置
- Code Snippets in Visual Studio 2010
- 令人惊叹的Visual Studio Code插件
- Visual Studio Code + live-server编辑和浏览HTML网页
- Visual Studio Code C++开发插件最佳组合
- 修改Microsoft Visual Studio.NET(IDE)提供的模板----VS2005
- Visual Studio Code编写HTML
- 使用Visual Studio Code下载安装插件
- Visual Studio Code + live-server编辑和浏览HTML网页
- 修改Sublime 2插件SublimeTmpl模板-Html生成模板
- javascript类定义的模板与代码层次化(适用环境:visual studio+jsParser插件)
- 微软Visual Studio Code发布支持JUnit的插件
- Visual Studio Code中修改Pylint设置,及python版本切换
- pligg9.7beta搭起后HTML编辑器插件的安装(-fckeditor的配置与修改变相支持中文文件名:默认上传后不能正常调用-)就像csdn的这个编辑器
- ionic2——开发利器之Visual Studio Code 常用插件整理
- Visual Studio Code (vscode)创建Node.js+Express+handlebars项目——handlebars页面模板
- visual studio code 插件安装不上
- Visual studio code离线安装插件 EsLint等等
- Visual Studio Code 设置同步到github的插件介绍及使用方法(Settings Sync)