vscode怎么创建自定义代码模板

vscode怎么创建自定义代码模板

本文以vue的创建为例,不过这个vue是在html中创建的。

初学Vue,我们一般都是在.html文件中引入vue包,然后编写自己的vue代码。

因为我们创建的模板是在.html文件下,所以我们的模板也得是在html.json中来进行编写。

具体方法如下:

1、在Vscode中找到设置 -> 用户代码片段,在输入框内输入html,并点击第一个html.json:

8746581e41f864742792683be2da91a.png

初次输入的话,第一个html.json可能会不带.json后缀,不用管,直接点击html进入即可。

2、进入到html.json页面,这里就是我们编写自己模板的地方

2fc46c7432c29e5889a036c8fc31d2f.png

接下里就是编写我们的模板了,我们的模板需要的大致有以下几项:

1、基本的HTML架构。

2、引入Vue包的script路径。

3、一些基本的Vue代码结构。

模板我已经备好了,模板如下:

"Html5-Vue": {"prefix": "vue","body": ["nbsp;html>","","","","","","Document","","","","
$1
","","var vm = new Vue({","el: '#app',","data: {},","methods: {}","});","","",""],"description": "快速创建在html5编写的vue模板"}

登录后复制

4、把上面的这个模板拷贝到html.json中即可,当然路径要变成自己的本机路径,其余的地方如果看着不舒服也可以自行更改。

5、保存之后,我们创建一个.html文件,输入vue,回车即可自动生成我们需要的模板了。模板示例图:

b6102853f262d7668afbfc4f9ea7fa1.png

f8f5d04cea64247d6a795cf61b55c1c.png

必要的说明:

为了防止大家更改模板时出现不必要的错误,我给大家简单说一下模板中的东西:

不要纠结一开头写的:”Html5-Vue”,这只是一个模板名字而已。

“prefix”: “”这里规定的是触发模板的关键词,我这里规定触发词为vue。

我们的模板都是在”body”:[]中编写的。

每一行模板代码都要用双引号””来包括。

如果双引号包括的代码中间也出现了双引号,那么需要用转义字符转义。

意味着换行,是制表符,这两个用于生成时模板的缩进,让生成出来的模板便于阅读。

模板中出现的$1代表着光标,它的位置即光标的默认位置,可以有多个光标:$2,$3,$4等。

“description”:””双引号包括的是对模板描述,同时也是你在.html页面输入触发词后,智能提示中出现的对触发词的解释。

千万别把Vscode中html.json文件自带的{}覆盖了,只需覆盖注释部分,或直接写到注释下面即可。

相关文章教程推荐:vscode教程

以上就是vscode怎么创建自定义代码模板的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3043760.html

(0)
上一篇 2025年3月13日 15:02:22
下一篇 2025年3月13日 15:02:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vscode怎么更改rem

    vscode怎么更改rem? 在开发h5页面时,我们需要使用到rem单位,那么vscode中如何将px转rem呢? 相关推荐:vscode教程 此处我选择的是px to rem插件,使用步骤: 首先安装px to rem插件; 然后在设置-…

    2025年3月13日
    200
  • vscode可以运行c语言吗

    vscode可以运行c语言吗?  首先,安装VScode,直接上官网下载安装包安装即可,这里不再赘述。然后,安装插件扩展: 相关推荐:vscode入门教程 立即学习“C语言免费学习笔记(深入)”; 然后安装mingw-w64,对应自己电脑装…

    2025年3月13日 编程技术
    200
  • vscode如何运行py文件?

    vscode如何运行py文件? 1、首先需要确保安装了VScode的Python插件,打开Python脚本,可以直接拖入,点击文件,点击首选项里的用户设置,这时候会出现用户设置配置文件。 2、然后在左边文件Ctrl+F搜索Python关键字…

    2025年3月13日 编程技术
    200
  • vscode如何变为中文

    vscode是一款开源的跨平台编辑器。默认情况下,vscode使用的语言为英文(us),如何将其显示语言修改成中文了? 1、打开vscode工具,在商店中搜索Chinese(Simplied) Lang,安装即可; 2、使用快捷键组合【Ct…

    2025年3月13日
    200
  • 如何设置vscode打开文件时新建窗口

    1、使用ctrl+shift+p快捷键,打开搜索框;  2、然后在搜索框中输入 settings 3、settings.json 这个文件是编辑器配置文件,打开文件如下: 4、控制这个窗口展示的属性为:workbench.editor.sh…

    2025年3月13日 编程技术
    200
  • vscode控制台乱码设置

    vscode控制台乱码设置: 按F1,输入settings.json, 添加 “code-runner.runInTerminal”: true, 本文来自PHP中文网vscode教程栏目。 以上就是vscode控制…

    2025年3月13日
    200
  • vscode的菜单栏和工具栏不显示

    显示菜单栏: 按下组合键Ctrl+Shift+P,然后会出来一个命令框,输入view:toggle menu bar,然后回车即可。 显示工具栏: 找到配置文件:settings.json,把”workbench.activit…

    2025年3月13日
    200
  • 解决vscode终端无法输入问题

    依次点击-文件–首选项–设置 搜索“shell”,找到Windows设置项,点击在“settings.json” 输入如下代码:  {    “python.jediEnabled”: false,    “term…

    2025年3月13日
    200
  • vscode阅读c代码outline不显示

    问题:使用vscode code 阅读C代码 outline 显示No symbols found in document ‘xxxx’ 解决方法如下: 安装C/C++ 扩展 下载安装最新版的MINGW_64 配置工…

    2025年3月13日 编程技术
    200
  • vscode怎么断点调试js项目

    1、首先安装 debugger for chrome 插件 2、打开项目,按 F5 ,打开搜索框,选择 chrome 会打开launch.json文件,如图: 3、添加配置信息,如图: {            “name”: “使用本机 …

    2025年3月13日 编程技术
    200

发表回复

登录后才能评论