VScode新建自定义模板快捷方式

VS新建vue文件的自定义模板

在使用vscode开发的时候,新建vue文件是不可或缺的,但是VSCode并没有vue文件的初始化模板,这个需要自定义模板。
我们可以使用vscodesnippets在新建.vue 文件后轻松获得一套模板。

具体步骤

  • 打开VSCode -> “文件(mac机选Code)” -> “首选项” -> "用户代码片段”,然后会打开一个弹框。
  • 在弹框中选择"新建代码片段"新建一个全局代码片段文件,自定义名称保存后,VS编辑器就会打开这个文件。
    在这里插入图片描述
  • 然后复制以下内容覆盖文件内容。
{
   // Place your snippets for vue 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"
   // }
   	"Create vue template": {
   	"prefix": "vue",
   	"body": [
   		"<template>",
   		"  <div></div>",
   		"</template>",
   		"<script>",
   		"export default {",
   		"  name: \"${1:component_name}\",",
   		"  data () {",
   		"   return {}",
   		"  },",
   		"   methods:{}",
   		"}",
   		"</script>",
   		"<style lang=\"${2:scss}\" scoped>",
   		"</style>"
   	],
   	"description": "Create vue template"
   }
}

prefix 表示对应生成代码块的命令(我设置的是vue
然后将文件保存关闭。

  • 然后新建一个.vue文件
    在新建的.vue的文件中输入vue回车,然后就会生成初始化代码块。
    在这里插入图片描述
  • 生成初始化模板如图:
    具体参数可以根据实际修改,此处我是用的是scss预处理语言
    在这里插入图片描述

注意:

步骤二还有一个方法(方法二: 在弹框中搜索vue,选中vue.json,在vue.json中编辑自定义模板)

  • 新建全局代码片段的好处就是,在非vue文件中输入vue命令都能新建出vue初始化代码模板。
  • 如果是vue.json文件中定义初始化代码模板的话,就只能在.vue文件中vue命令才会有效。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vscode 是一款广受欢迎的开源代码编辑器,它具有丰富的扩展插件和自定义功能。其中一个重要的自定义功能就是添加自定义注释图案。 注释在代码中起着非常重要的作用,可以提高代码阅读的效率和代码可维护性。而自定义注释图案则更能使代码的视觉效果更加美观和清晰。 使用 vscode 添加自定义注释图案非常简单,只需按照以下步骤即可: 1. 打开 vscode 编辑器,进入 User Settings(按下快捷键 `Ctrl + ,`,或者点击左下角的“设置”图标)。 2. 在左侧的菜单栏中,找到“Extensions”选项,点击展开。 3. 在“Extensions”选项下找到“Edit in settings.json”按钮,或者直接搜索“editor.tokenColorCustomizations”并点击“编辑”。 4. 编辑 `tokenColorCustomizations`,可以根据自己的喜好来添加自定义注释图案。例如: ``` // 添加自定义注释图案 "tokenColorCustomizations": { "comments": { "fontStyle": "italic", "foreground": "#999999", "iconPath": "c:/users/yourusername/Desktop/mylogo.png", "iconWidth": "16px", "iconHeight": "16px" } } ``` 上面的例子中,我们添加了一个自定义注释图案,其中 `iconPath` 参数表示指定注释图标的路径,`iconWidth` 和 `iconHeight` 则表示指定注释图标的宽度和高度。 另外,可以在 `foreground` 参数中指定注释的字体颜色和样式,比如加粗或斜体,使注释更加突出和易读。 总的来说,使用 vscode 添加自定义注释图案非常简单,只需要运用一些基本的 CSS 样式知识,即可让注释更加生动和易读,提高编码效率和质量。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值