VScode创建Vue模板代码-自定义代码片段

﹏ヽ暗。殇╰゛Y 2022-12-05 01:35 260阅读 0赞

前提：vscode中已安装vue

配置模块代码片段：

1.  依次选择 “ File（文件） -> preperences（首选项） -> User Snippets(用户代码片段)”， 此时，会弹出一个搜索框，输入vue， 如下图：
    
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZ2VsaWE2MjA_size_16_color_FFFFFF_t_70][]
    
        "vue-template": {
        		"prefix": "vuecj",
        		"body": [
        			"<template>",
        			"  <div>",
        			"",
        			" </div>",
        			"</template>",
        			"",
        			"<script>",
        			"export default {",
        			"  name: '',",
        			"  data () {",
        			"    return {",
        			"",
        			"    }",
        			"  },",
        			"  props: {",
        			"",
        			"  },",
        			"  components: {",
        			"  },",
        			"  mounted () {",
        			"",
        			"  },",
        			"  methods: {",
        			"",
        			"  }",
        			"}",
        			"</script>",
        			"",
        			"<style>",
        			"",
        			"</style>",
        			""
        		],
        		"description": "my vue template"
        	}
    
     
2.  选择 vue 后，VS Code 会自动打开一个名字为vue.json的文件，复制以下内容到这个文件中，如下图：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FuZ2VsaWE2MjA_size_16_color_FFFFFF_t_70]: /images/20221123/f203ee3c455944cfab1a0d4ce181865c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，260人围观）

还没有评论，来说两句吧...

相关阅读

相关 VSCode自定义代码模板

1.首先选择文件-首选项-配置用户代码片段 ![25963b07239b4c3494b50aab07c16b78.png][] 2.可以选择默认的全局代码片段进行修改也可以

不念不忘少年蓝@/ 2024年04月01日 10:22/ 0 赞/ 92 阅读

相关 VSCode 如何操作用户自定义代码片段（模板）

文章目录（1）VSCode 如何操作用户自定义代码片段（快捷键）（2）vetur的配置（3）安装了Vetur之后settin

淩亂°似流年/ 2023年02月20日 13:46/ 0 赞/ 31 阅读

相关 VScode创建Vue模板代码-自定义代码片段

前提：vscode中已安装vue 配置模块代码片段： 1. 依次选择 “ File（文件） -> preperences（首选项） -> User Snippets(用户

﹏ヽ暗。殇╰゛Y/ 2022年12月05日 01:35/ 0 赞/ 261 阅读

相关 vsCode自定义代码片段，生成个性化代码模板

在vscode编辑器里开发代码时会发现，vscode内置了一些语言的代码片段，会在智能提示框里一起出现，帮助自动补全代码，用起来很方便。这些代码片段是通过snippets

超、凢脫俗/ 2022年11月04日 15:23/ 0 赞/ 14 阅读

相关 vscode设置vue代码片段

一、如何设置？ 1. 打开用户片段 ![clipboard.png][] 2. 选择或创建`vue.json`代码片段 ![clipb

╰+攻爆jí腚メ/ 2022年10月27日 12:18/ 0 赞/ 300 阅读

相关 vscode创建vue3用户代码片段

vscode创建vue3用户代码片段 "create": { "prefix": "vue3demo", "body": [

╰+攻爆jí腚メ/ 2022年10月17日 10:41/ 0 赞/ 652 阅读

相关 VScode—自定义代码片段snippets

转载：[https://www.jianshu.com/p/1f1132df1def][https_www.jianshu.com_p_1f1132df1def] 自定义

缺乏、安全感/ 2022年03月18日 14:56/ 0 赞/ 351 阅读

相关 vscode 自定义代码片段

[原文地址][Link 1] 实现效果 ![1.gif][] 起因最近在写一个全新的项目，在项目中频繁创建各种类，这就导致很多重复的东西需要频繁的写，例如类名

青旅半醒/ 2022年03月09日 01:58/ 0 赞/ 366 阅读

相关 VScode用户代码片段——快速生成vue片段

在VScode编译器中，Ctrl + Shift + p 输入：preferences:configure User Snippets ![2019032109073721

偏执的太偏执、/ 2022年03月06日 14:58/ 0 赞/ 429 阅读

相关 vscode创建vue快捷代码片段

（1）打开文件首选项 —> 用户代码片段 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

迷南。/ 2022年02月03日 00:55/ 0 赞/ 506 阅读