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

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

在使用vscode开发的时候，新建vue文件是不可或缺的，但是VSCode并没有vue文件的初始化模板，这个需要自定义模板。
我们可以使用vscode的snippets在新建.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命令才会有效。

VScode新建自定义模板快捷方式相关推荐

vscode 新建php模板,使用VSCode快速创建vue文件模版的方法介绍
VSCode怎么自定义代码模版?下面本篇文章给大家介绍一下VSCode快速创建vue文件模版的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 修改位置打开vscode首选项- ...
C++VS2019中新建自定义模板与删除自定义模板
如果经常项目需要用到相同的一些代码,如头文件,命名空间等,可以考虑创建一个模板,以后新建项目时可以直接选用该模板.下面跟着我一起来看看怎样新建一个模板和怎样删除一个模板. 为了保证模板里面没有其他的东 ...
vscode 新建php模板,使用vscode快速建立vue模板
当我们希望每次新建.vue文件后,vscode能够根据配置,自动生成我们想要的内容. 打开vscode编辑器,依次选择"文件 -> 首选项 -> 用户代码片段",此时, ...
易优如何新建自定义模板
比如lists_article_xxx.htm (xxx为自己定义的模板名称,可以随便写) 保持"lists_article_"不变则可以关联给列表栏目页,可以在后台编辑栏目时选 ...
VSCode 如何新建vue模板 - 插件引入篇
还在一个代码一个代码的敲打吗? VSCode 如何新建vue模板 ?附图讲解:如何引入插件. 问题: 在哪儿搜索插件? 搜什么名称的插件? 如何安装插件? 解决办法:(上述问题,均如下图所示) 安装完 ...
前端开发：VS Code编辑器新建Vue文件自定义模板的方法
在前端开发过程中,尤其是对于经验不足的初级开发者来说,需要掌握一些必备的提升开发速度的技巧,比如使用各种插件来提升开发速度,这样才能事半功倍. 本篇博文来分享一个开发常用的技巧,资深开发者不屑于知道的 ...
vscode Vue ts 自定义模板
vscode Vue ts 自定义模板首先打开vscode选择用户片段选择vue.json {// Place your snippets for vue here. Each snippet i ...
VSCode生成自定义代码块
关于 VSCode生成自定义代码块如何新建代码片段中的内置变量如何新建第一步: 文件 >> 首选项 >> 用户代码片段,新建一个全局的代码段,以下是本人新建的仅供参考 ...
VS Code 安装插件、自定义模板、自定义配置参数、自定义主题、配置参数说明、常用的扩展插件
1. 下载和官网教程下载地址:https://code.visualstudio.com/ 官方教程:https://code.visualstudio.com/docs 2. 安装插件安装扩展插 ...

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

具体步骤

VScode新建自定义模板快捷方式相关推荐

最新文章

热门文章