如何在vscode中创建vue快捷键

灰太狼 2021-07-25 23:29 538阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70 1]

mac通过Code->Preferences->User Snippets->vue.json 编辑
    win通过File->Preferences->User Snippets->vue.json 编辑

官方示例如下，

// Example:
    // "Print to console": { 
    // "prefix": "log",
    // "body": [
    // "console.log('$1');",
    // "$2"
    // ],
    // "description": "Log output to console"
    // }

prefix为快捷键
    body部分为想自动填充的代码

以下可参考

"Print to console": { 
    	"prefix": "vue3ts",
    	"body": [
    	  "<template>",
    	  " <div></div>",
    	  "</template>\n",
    	
    	  "<script lang=\"ts\">",
    	  "import { Options, Vue } from \"vue-class-component\";",
    	
    	  "@Options({",
    	  " components: {},",
    	  "})",
    	  "export default class xx extends Vue {",
    	  
    	  "}",
    	  "</script>\n",
    	
    	  "<style scoped>",
    	  "</style>",
    	  "$2"
    	],
    	"description": "Log output to console"
    }

当我在页面输入 `vue3ts` 时，将会生成以下代码

<template>
      <div></div>
    </template>
    
    <script lang="ts">
    import {  Options, Vue } from "vue-class-component";
    @Options({ 
      components: { },
    })
    export default class xx extends Vue { 
    }
    </script>
    
    <style  scoped>
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]: /images/20210725/d1850c860d8544ab9c74f72a9ad3d7cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70 1]: /images/20210725/85c3c60c2a35428b9700cf2c32345506.png