vscode自定义HTML、vue等模板内容（一个、多个）- 教程篇
文章目录
- vscode自定义HTML模板内容（一个、多个）- 教程篇
- 操作如下：
- 注意事项：`参考上图所示`；
- 如何调用？ `如下图示`
- 附：参考文章
vscode自定义HTML模板内容（一个、多个）- 教程篇
如何让VSCode自定义一个或多个HTML模板或者其他文件模板（再如.vue模板）？
如何让VSCode调用和选择使用自定义的模板？
操作如下：
打开编辑器，依次操作
【文件】--->【首选项】 ---> 【用户片段】 ---> 【输入自定义的文件名称，如html.json】，然后enter回车
输入自定义的 模板代码如下：
(即：html.json){// Place your ckt.net.docs 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. 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": {// "scope": "javascript,typescript",// "prefix": "log",// "body": [// "console.log('$1');",// "$2"// ],// "description": "Log output to console"// }// 第一个模板代码"create new HTML5 file":{"prefix": "html5","body": ["<!DOCTYPE html>","<html>","<head>","\t<meta charset=\"UTF-8\">","\t<meta name=\"author\" content=\"LF\">","\t<meta name=\"keywords\" content=\"LF\">","\t<meta name=\"description\" content=\"$1\">","\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\">","\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">","\t<title>我的模板</title>","\t<style></style>","</head>","<body>","<script>"," ","</script>","</body>","</html>"],"description": "create new HTML5 file"},// 第二个模板代码"create new Bootstrap@4.6 HTML file":{"prefix": "bt4.6","body": ["<!DOCTYPE html>","<html lang=\"zh-CN\">","<head>","\t<meta charset=\"UTF-8\">","\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">","\t<!-- Bootstrap CSS -->","\t<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css\" integrity=\"sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l\" crossorigin=\"anonymous\">","\t<title>Bootstrap模板文件</title>","\t<style>","\t\t","\t</style>","</head>","<body>"," ","<!--CDN加速提供-->","<!-- Optional JavaScript; choose one of the two! -->","<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->","<script src=\"https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js\" integrity=\"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj\" crossorigin=\"anonymous\"></script>","<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns\" crossorigin=\"anonymous\"></script>","","</body>","</html>"],"description": "create new Bootstrap@4.6 HTML file"} }
注意事项：参考上图所示；
- 关于标签内属性值引号
contetn="属性值"都需要添加反斜杠，即格式：contetn=\"属性值\"
代码内部的双引号的正确格式，应为：\" - 关于模板代码
\bt：两个表示两个tab缩进 - 换行请直接使用
"", html.json文件路径，及后期修改；- vue模板的建立也是一样的原来，不再赘述。
如何调用？ 如下图示
注意上文
prefix对应的关键词，就是新建文件后调用模板的关键词，如下图所示：
- 只需要新建文件》然后输入prefix定义的关键词，选择相应模板enter 即可。
附：参考文章
- vscode自定义HTML模板内容
- VSCode 自定义html5模板
以上就是关于“ vscode自定义HTML模板内容（一个、多个）- 教程篇 ”的全部内容。
vscode自定义HTML、vue等模板内容（一个、多个）- 教程篇相关推荐
- vscode 自定义小清新主题色
vscode 自定义小清新主题色 作为一个弱小卑微的社畜怎么还不能拥有可可爱爱的编辑器,记录生活中的亿点点自娱自乐 步骤一 打开settings.json文件 windows: ctrl + shif ...
- VSCode自定义代码片段1——vue主模板
VSCode自定义代码片段(vue主模板) {// vue// 1,自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 => 自定义片段名称 =>编辑用户片段 ...
- VSCode自定义代码片段2——.vue文件的模板
.vue文件的模板 {// v'// 2 如何自定义用户代码片段:VSCode =>左下角设置 =>用户代码片段 =>新建全局代码片段文件... => 自定义片段名称 => ...
- VSCode 如何新建vue模板 - 插件引入篇
还在一个代码一个代码的敲打吗? VSCode 如何新建vue模板 ?附图讲解:如何引入插件. 问题: 在哪儿搜索插件? 搜什么名称的插件? 如何安装插件? 解决办法:(上述问题,均如下图所示) 安装完 ...
- 用vscode实现vue.js项目的一个完整过程
1.新建项目 打开Visual studio code 打开一个你想要创建项目的文件夹 打开集成终端:查看 –> 集成终端 或者直接按 ctrl+` 如果没有安装vue-cli,在终端输入: n ...
- vue基础--模板语法、常用指令：v-if、v-show、v-for、虚拟DOM、v-once、v-cloak、v-text、v-html、v-bind、v-on、自定义指令
一.模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 ...
- 怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
- vscode 新建php模板,使用VSCode快速创建vue文件模版的方法介绍
VSCode怎么自定义代码模版?下面本篇文章给大家介绍一下VSCode快速创建vue文件模版的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 修改位置 打开vscode首选项- ...
- Babylonjs入门02——VsCode+vue+babylonjs开发第一个babylon项目程序
Babylonjs入门02--VsCode+vue+babylonjs开发第一个babylon项目程序 1 环境搭建 2 创建vue项目 3 基于vue项目写第一个babylon项目 4 下一期再见 ...
最新文章
- 谷歌自动驾驶之父疯狂打Call, 无人车连续5小时不接管,又快又稳
- 中国无碳复写纸行业竞争现状与运行态势研究报告2022年
- VS2008下最新X264(svn 2009.9)编译不过的解决办法
- 实例构造函数与静态构造函数执行顺序
- Android系统自带样式(@android:style/) (转)
- Android应用程序反编译
- Atitit tomcat 启动报错 ZipException: archive is not a ZIP archive. 1.1. ----Should sh lib jar err... 1
- java 使用response方式下载txt文件
- 2019最新超详细HUSTOJ在线判题系统及Virtual Judge的搭建
- 【转】Endnote X3破解版和教程
- SPSS实现神经网络（多层感知器）
- 本地电脑安装虚拟机-解决USB驱动报错(代码 39)问题
- 响应式布局之案例--常见电商类页面效果
- 抖音四面被拒，再战头条终获offer，在线面试指南
- 唯一ID生成算法剖析
- c语言编程文曲星猜数字,文曲星里的猜数字代码(原创)
- ANSYS FLUENT二维结构网络数值计算及后处理——流动传热
- python处理问题汇总三（字体显示，显示上标，x轴重叠，添加标签，保存图片等）
- 如何使用计算机处理文件,怎么处理电脑的缓存文件
- 容器-Docker《二》命令帮助镜像管理