vscode设置vue代码片段

╰+攻爆jí腚メ 2022-10-27 12:18 299阅读 0赞

一、如何设置？

1.  打开用户片段
    
    ![clipboard.png][]
2.  选择或创建`vue.json`代码片段
    
    ![clipboard.png][clipboard.png 1]
3.  粘贴下面代码片段即可
    
        {
            "Print to console": {
                "prefix": "vue",
                "body": [
                    "<template>",
        			"  <div class='$0'>",
        			"    hellow",
        			" </div>",
        			"</template>",
        			"",
        			"<script>",
        			"export default {",
        			"  name: '',",
        			"  data () {",
        			"    return {",
        			"",
        			"    }",
        			"  },",
        			"  props: {",
        			"",
        			"  },",
        			"  components: {",
        			"",
        			"  },",
        			"  computed: {",
        			"",
        			"  },",
        			"  watch: {",
        			"",
        			"  },",
        			"  created () {",
        			"",
        			"  },",
        			"  mounted () {",
        			"",
        			"  },",
        			"  methods: {",
        			"",
        			"  }",
        			"}",
        			"</script>",
        			"",
        			"<style scoped>",
        			"</style>",
        			""
        		],
                "description": "Create vue template"
            }
        }

二、如何使用?

新建`*.vue`文件，输入`vue`，按`tab`即可

[clipboard.png]: /images/20221024/8853bf41bcca421b86969e7d38ac5fc2.png
[clipboard.png 1]: /images/20221024/64a9ea9cca2f4f10b3d276e88a7ae5f1.png

发表评论取消回复

表情：

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

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

相关阅读

相关 VsCode添加Vue模版代码片段

文章目录 VsCode添加Vue模版代码片段 1. 复制一段已有要制作模板的Vue代码，比如： 2. 粘贴到下方链接的工具网站，可自动生成

r囧r小猫/ 2024年03月17日 21:06/ 0 赞/ 99 阅读

相关 vscode片段

参考资料 https://blog.csdn.net/maokelong95/article/details/54379046 "狂客注释": \{ "pr

Bertha 。/ 2023年10月12日 01:53/ 0 赞/ 9 阅读

相关 Vscode设置console.log()快捷代码片段，代码快速生成，代码模板生成

点击文件>首选项>配置用户代码片段： ![70b412ccf3f64b92a6bc3eeb253f9849.png][] 点击一下：然后断则javascript.json!

迈不过友情╰/ 2023年10月04日 22:45/ 0 赞/ 35 阅读

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

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

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

相关 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 赞/ 651 阅读

相关 VScode中Vue快速生成代码片段

首先我们要找到设置（如下图）用户代码片段 ![20181106100412594.png][] 然后我们会看到这样一个框，然后搜索html.json ![20181106

素颜马尾好姑娘i/ 2022年04月18日 00:46/ 0 赞/ 663 阅读

相关 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 阅读