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 的属性值为描述信息
目录
相关文章
VScode用户自定义代码片段
VScode用户自定义代码片段
77 0
|
8天前
|
C++ Windows
Windows10添加自定义右键菜单VS Code
本文介绍了如何在Windows 10中通过修改注册表,将VS Code添加到右键菜单,实现右键文件、文件夹或空白处时使用VS Code打开。方法同样适用于其他程序,如Sublime Text 3。
|
10月前
|
JSON JavaScript 小程序
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
`uniapp` 是一个基于 Vue.js 的框架,支持一次开发多端部署,深受前端开发者喜爱。本文详细介绍如何使用 `VSCode` 搭建 `uniapp` 项目,包括安装 `node` 和 `pnpm`、创建项目、安装扩展组件、配置 `Json` 文件注释及安装相关插件。通过这些步骤,你可以高效地使用 `VSCode` 开发 `uniapp` 项目,并享受代码提示和自动补全功能,提高开发效率。
655 24
使用VSCode搭建UniApp + TS + Vue3 + Vite项目
|
7月前
|
前端开发 搜索推荐 C++
Marp 教程:如何在 VSCode 中引入自定义样式和主题
本文介绍了如何在 Marp 中引入自定义样式和主题,使你的幻灯片更加个性化和独特。首先,你需要安装 VSCode 和 Marp 插件,了解 Marp 的基本结构。接着,通过创建自定义 CSS 文件并在 Markdown 文件中引入,实现样式定制。此外,还可以创建和使用自定义主题,以及进行高级自定义,如调整布局、引入自定义字体和定义复杂动画。最后,使用 Marp 的预览功能实时查看效果。
646 0
|
11月前
|
Rust Shell 开发者
7步开始rust(自定义环境安装与vscode开发环境配置)
本文档详细记录了当改变Rust安装路径至特定目录(如 `/home/local_rust`)时,如何在VSCode环境中正确配置Rust开发环境的过程。主要包括:设置环境变量、使用清华大学镜像安装Rust及更新镜像源、手动部署 `rust-analyzer`、安装标准库源码、安装与配置VSCode插件等七个步骤,确保开发者能够顺利搭建并使用定制化的Rust开发环境。
1484 0
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
967 3
vscode快速生成vue2及vue3模版
vscode快速生成vue2及vue3模版
vscode快速生成vue2及vue3模版
vscode快捷HTML结构 | Emmet
vscode快捷HTML结构 | Emmet
74 1
|
JSON JavaScript 数据格式
vscode添加自定义注释
vscode添加自定义注释
544 0

热门文章

最新文章