Visual Studio Code修改HTML Snippets插件中默认模板内容
来源:互联网 发布:淘宝网站策划 编辑:程序博客网 时间:2024/06/03 04:49
最近在熟悉用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键之后会跳转到的下一个位置
阅读全文
0 0
- Visual Studio Code修改HTML Snippets插件中默认模板内容
- Visual Studio 2005 Code Snippets
- Visual Studio 2005 Code Snippets
- Visual Studio 2005 Code Snippets下载
- Visual Studio 2010 修改默认模板文件
- visual studio code 必备插件
- Visual Studio Code必备插件
- 如何在Visual Studio Code中直接运行html代码
- C# Visual Studio 2005中修改toolStrip的内容
- Visual Studio Code 如何安装插件
- 【VSCode】Visual Studio Code插件指南
- Visual Studio Code的插件配置
- Visual Studio 默认路径的修改
- 如何修改Visual Studio默认数据库localDB
- 修改visual studio的默认快捷键
- 【解决方案】Visual Studio替换/修改默认项目模板后无法创建该项目或不呈现修改
- 一劳永逸修改 Android Studio .gitignore 默认模板
- Visual Studio 2017中创建Windows桌面程序时的默认模板
- 大数据计算的四支精干队伍,你造吗
- VPS配置Git Hooks实现hexo博客更新
- Android studio 中的gradle粗解
- ssh 登录出现的几种错误以及解决办法
- eclipse实用方法--快捷键
- Visual Studio Code修改HTML Snippets插件中默认模板内容
- 九度[1038]-Sum of Factorials
- Lua 环境安装
- HDU 4055 Number String(计数dp)
- Integer数据和int数据之间的区别;
- 【整洁之道】如何写出更整洁的代码(上)
- 1331:局部最大值
- 阿拉伯数字转汉字
- 12个前端初学者必会技能