vscode中快捷生成自定义vue3模板

简介: vscode中快捷生成自定义vue3模板

需求描述

新建 vue 文件后,需要先写出 vue3 的基础架构代码,手动输入效率低下!

期待:输入 v3 按 Tab 即刻生成自定义的vue3模板(如下图)

实现流程

  1. vscode 的设置中,选择 用户代码片段
  1. 输入 vue 回车,打开 vue.json 文件

    将其内容修改为
{
  "Print to console": {
    "prefix": "v3",  //键入该值,按tab快捷产生
    "body": [
      "<script setup lang='ts'>",
      "",
      "</script>",
      "",
      "<template>",
      "  <div>",
      "",
      "  </div>",
      "</template>",
      "",
      "<style scoped lang='scss'>",
      "",
      "</style>",
    ],
    "description": "vue3的ts模板"
  }
}
  • prefix 的属性值为输入的快捷索引,如 v3
  • body 的属性值为自定义的vue3模板,可以根据自己的需求修改
  • description 的属性值为描述信息
目录
相关文章
|
8月前
VScode用户自定义代码片段
VScode用户自定义代码片段
52 0
|
19天前
|
前端开发 搜索推荐 C++
Marp 教程:如何在 VSCode 中引入自定义样式和主题
本文介绍了如何在 Marp 中引入自定义样式和主题,使你的幻灯片更加个性化和独特。首先,你需要安装 VSCode 和 Marp 插件,了解 Marp 的基本结构。接着,通过创建自定义 CSS 文件并在 Markdown 文件中引入,实现样式定制。此外,还可以创建和使用自定义主题,以及进行高级自定义,如调整布局、引入自定义字体和定义复杂动画。最后,使用 Marp 的预览功能实时查看效果。
46 0
|
4月前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
370 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
6月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
397 3
|
6月前
|
JavaScript
vscode快速生成vue2及vue3模版
vscode快速生成vue2及vue3模版
vscode快速生成vue2及vue3模版
|
8月前
vscode快捷HTML结构 | Emmet
vscode快捷HTML结构 | Emmet
53 1
|
8月前
vscode中设置HTML模板
vscode中设置HTML模板
|
8月前
|
JSON JavaScript 数据格式
vscode添加自定义注释
vscode添加自定义注释
422 0
|
移动开发 HTML5
解决VScode 使用 ! +Tab键无法无法生成HTML模板的问题
解决VScode 使用 ! +Tab键无法无法生成HTML模板的问题
|
小程序 PHP Perl
vscode设置php自定义注释格式
写代码一般的注释都是有格式的,方便自己和他人阅读代码,多人开发的时候,也能更快的找到这部分代码是由谁来编写的。 好的代码注释确实是一个好习惯,但是,有的时候就是这玩意有敲起来有点费劲~
256 0

热门文章

最新文章