vscode添加自定义html片段

最新推荐文章于 2024-03-30 16:00:00 发布
最新推荐文章于 2024-03-30 16:00:00 发布
阅读量2.5k 收藏
点赞数 4
分类专栏： Web前端 # Vue实战 文章标签： vscode添加自定义html片段 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IndexMan/article/details/88916235
版权

最近在学vue，用的是微软的vscode 开发工具。

很不错，赞一下微软。里面包含了众多插件大家可以各取所需。

另外有一项实用的功能，User Snippets 用户自定义代码段，

对于那些需要重复编写的代码段 用一个快捷键自动补全，很省事。下面就演示一下，

代码如下：

"vh": {
	"prefix": "vh", // 触发的关键字 输入vh按下tab键
	"body": [
		"<!DOCTYPE html>",
		"<html lang=\"en\">",
		"",
		"<head>",
		"    <meta charset=\"UTF-8\">",
		"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
		"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
		"    <title>Document</title>",
		"    <script src=\"./lib/vue-2.4.0.js\"></script>",
		"</head>",
		"",
		"<body>",
		"    <div id=\"app\"></div>",
		"    <script>",
		"        var vm=new Vue({",
		"           el:'#app',",
		"           data:{},",
		"           methods:{}",
		"        });",
		"    </script>",
		"</body>",
		"",
		"</html>",
	],
	"description": "vh components"
}

一图胜千言

用的时候输入vh 按TAB即可补全。

罗汉爷
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VS Code中自定义Emmet代码片段
老赵学习专栏
10-14 3353
vscode中内置了Emmet的扩展，这让我们在写网页代码时方便了很多，但是有时我们也需要自定义一些Emmet的代码片段来实现一些特殊代码的生成，比如：自动导入一些来自CDN的js或css样式（Bootstrap、jQuery等）文件。 那么在vscode中如何来添加Emmet的自定义snippets呢？ 首先我们需要创建一个snippets.json的文件，在该文件中输入以下代码 {  ...
vue添加html片段,VSCode--HTML代码片段（基础版，react、vue、jquery）
weixin_31200621的博客
06-26 2027
起因是最近在学习前端，看的网上的demo也是在react、vue、jquery之间穿插，为了方便一键生成html模板(懒)写demo，有了以下折腾。本人使用的前端编辑工具是vscode(方便、懒)，可配置成中文界面，很友好，丰富的第三方插件，真香。以下是基于vscode设置的html代码片段：1. 文件->首选项->用户代码片段2. 输入html，打开第一个html.json文件3.编...
vscode 用户代码片段创建 html css js vue less
Tom的博客
10-12 930
html.json { "mask&popup": { "prefix": "popup", // 快速创建蒙版弹窗 "body": [ "<div class=\"popupmask\">", " <div class=\"popup$1\">$2</div>", "</div>" ] } } css.json { "trancenter": { "prefix": "trancenter", //.
VSCode自定义代码片段5——HTML元素结构
Java_53的博客
04-13 1277
HTML元素结构 { // HTML'element // 如何自定义用户代码片段：VSCode =》左下角设置 =》用户代码片段 =》新建全局代码片段文件... =》自定义片段名称 =》编辑用户片段 =》ctrl+S 保存 // HTML元素结构 "Print to console": { "prefix": "HTML'element", "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "",
VS Code自定义HTML代码片段
庸人方自扰，自在就好
12-02 2776
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
VSCode自定义代码模板
最新发布
qq_36472969的博客
03-30 1019
vscode 中代码片段整理
vscode怎么创建代码标签（代码书签、代码标记、代码标注）？Bookmarks插件
Dontla的博客
03-01 1万+
先显示所有命令（ctrl + shift + P），然后键入。安装这个插件：Bookmarks。
VsCode自定义HTML模板（附模板）ElementUI模板
严泽熠的博客
09-09 3552
VsCode自定义HTML模板（附模板）ElementUI模板
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
10-14
在Visual Studio Code (VSCode) 中，添加自定义注释是一项非常实用的功能，它能帮助开发者快速地插入标准格式的注释，提高编程效率。本文将详细介绍如何在VSCode中设置自定义注释，特别引入了红色警戒的经典注释风格...
VSCode软件，软件编辑工具
03-31
13. **插件系统**：通过插件系统，开发者可以为VSCode添加自定义功能，如Linter、代码分析工具等，进一步提升开发体验。 14. **协作开发**：利用Live Share插件，开发者可以实现实时共享代码编辑会话，协同编辑同一...
vscode常用插件包Linux C
10-30
2. 添加VSCode的官方存储库： ``` curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > microsoft.gpg sudo mv microsoft.gpg /etc/apt/trusted.gpg.d/ ``` 3. 更新软件源列表： ``` ...
VSCode用法及插件详细教程
11-06
VSCode不仅具备这些基础功能，还允许用户自定义配置和安装各种插件以增强其功能。 2. **VSCode下载与安装** 你可以访问官方网站下载VSCode。下载安装过程中，建议勾选创建桌面快捷方式、添加到上下文菜单和添加到...
vscode-canvas-snippets:画布片段扩展
05-09
这个“画布片段”扩展为它添加了专门针对Canvas API的代码片段，让开发者可以快速输入常见的Canvas函数和结构，从而更高效地编写与画布交互的JavaScript代码。 【描述】：“适用于Visual Studio代码的画布片段 从...
vscode自定义HTML模板内容
lifei932734766的博客
06-30 1115
经常使用vscode编辑器的朋友都知道，新建html文件之后直接！+Tab键即可新建一个HTML模板，但是这只是一个基础版，当然也可以自定义HTML模板。 1、打开首选项--用户代码片段（） 2、在打开的搜索框内搜索 ‘html.json’，并打开html.json文件 3、html.json文件中有一段文字以及一个example // Place your snippets for html here. Each snippet is defined under a snippet na
如何在vscode里面快速运行html代码（包含如何在vscode里面编写html代码）
热门推荐
快乐学习
11-16 2万+
​前言： 1.如何在vscode编写html代码在我的另一篇文章当中有详细教程，这是超链接。 2.很多小伙伴编写了html代码后，在vscode里面右键找不到如何去运行代码，或者运行代码的方式很不方便。那么就要在vscode里面下载一个插件，这个插件运行html代码会非常的方便没有下载vscode插件之前，右键是没有这个open in Default Browser，就找不到怎么样运行vscode里面的html代码了。 三、额外知识（vscode选择html代码在哪个浏览器页面运行）
VS Code的HTML代码模板
qq_42416602的博客
11-11 1152
1 文件/首选项/用户片段，在搜索框中搜索html.json，打开此文件 2 在文件中写入如下代码： "Print to index": { "prefix": "html", //模板的快捷键 "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "\t<head>", "\t\t<m
vscode用户代码片段
qq_38253549的博客
04-07 1万+
vscode用户代码片段，提升开发效率
VS Code添加HTML代码片段
Good_zwn的博客
08-20 2510
打开VS Code找到设置-用户代码片段-html然后在json文件里添加如下代码： { "HTML Snippets": { "prefix": "!doc", "body": [ "<!DOCTYPE html>", "<html>", "\t<head>", "\t\t<meta charset=\"UTF-8\...
使用marquee标签实现文字滚动
老徐的博客只有干货
03-29 5270
代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body style="text-align: cen
vscode html代码片段设置
10-09
你可以使用 Visual Studio Code 的自定义代码片段功能来设置 HTML 代码片段，具体步骤如下： 1. 打开 VS Code，打开你的项目文件夹。 2. 在左侧的资源管理器中，右键单击要添加代码片段的文件夹，选择“新建文件夹”。 3. 将新文件夹命名为“snippets”。 4. 在“snippets”文件夹中创建一个名为“html.json”的新文件。 5. 在“html.json”文件中输入以下示例代码，以创建一个简单的 HTML 代码片段： ```json { "HTML5": { "prefix": "html5", "body": [ "<!DOCTYPE html>", "<html>", "<head>", "<meta charset=\"UTF-8\">", "<title>${1:Title}</title>", "</head>", "<body>", "${2}", "</body>", "</html>" ], "description": "HTML5 template" } } ``` 6. 保存“html.json”文件，并在 HTML 文件中使用“html5”前缀调用此代码片段。在 HTML 文件中输入“html5”并按 Tab 键，即可插入上述 HTML 模板。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值