VSCode 小技巧：自动生成vue模板内容

港控/mmm° 2021-07-24 17:21 474阅读 0赞

**目录**

一、综述

二、实现

1、vscode，IDE左下角，管理——用户代码片段

2、新建代码片段

3、编辑代码片段样式

4、保存即可

三、使用

--------------------

# 一、综述 #

vue工程模板几乎都是一致的，三个标签，template、script、style。每次新建一个vue工程，都需要编辑这些模板，可以将这个模板写成文件，直接调用。

# 二、实现 #

## 1、vscode，IDE左下角，管理——用户代码片段 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70][]

## 2、新建代码片段 ##

新建代码名称——给代码片段起个名称，我这里就叫vue

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1][]

## 3、编辑代码片段样式 ##

"Print to console": {
    		    "prefix": "vue",  //这个vue就是每次快速找到这个模块的关键
    		    "body": [
    		      "<template>",
    		      "  <div>$0</div>",
    		      "</template>",
    		      "",
    		      "<script>",
    		      "export default {",
    		      "  data () {",
    		      "    return {}",
    		      "  },",
    		      "  methods: {},",
    		      "}",
    		      "</script>",
    		      "",
    		      "<style type=\"text/css\" scoped>",
    		      "</style>",
    		      ""
    		    ],
    		    "description": "A vue file template"
    		  }

## 4、保存即可 ##

# 三、使用 #

新建的vue文件中，输入代码片段名称：vue，这时候vscode会自动提示，，选中第一个，回车即可自动输出之前设定的模板。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70]: /images/20210724/6b06ec2320684074b637aa6a232cb710.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 1]: /images/20210724/d99f921ec0f249c18f2a80b113b0f698.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcHB5ODE5OTc_size_16_color_FFFFFF_t_70 2]: /images/20210724/93d4be3bf9fc4d2dad7991edb5e7289c.png