转载001：使用vscode，新建.vue文件，tab自动生成vue代码模板

原文部分：

第一步: 新建模板并保存

文件 --> 首选项 --> 用户代码片段 --> 输入vue，选择vue.json -->复制 第三步中的模板内容中内容保存

第二步: 添加配置，让vscode允许自定义的代码片段提示出来

文件 --> 首选项 --> 设置 ---> 添加这2项

// Specifies the location of snippets in the suggestion widget
"editor.snippetSuggestions": "top",
// Controls whether format on paste is on or off
"editor.formatOnPaste": true

第三步: 复制以下代码，保存重启vscode

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div class=\"page\">\n",
            "  </div>",
            "</template>\n",
            "<script type=\"text/ecmascript-6\">",
            "export default {",
            "  data() {",
            "    return {\n",
            "    }",
            "  },",
            "  components: {\n",
            "  }",
            "}",
            "</script>\n",
            "<style scoped lang=\"stylus\">",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }
}

第四步:测试是否添加成功

测试方法： 新建vue后缀文件，输入vue，按下tab键，OK

我自己的部分

vue.json 中的具体内容：

{
	
	"editor.snippetSuggestions": "top",
	"editor.formatOnPaste": true,

	"Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div class=\"className\">\n",
            "  </div>",
            "</template>\n",
			"<script>\n",
			"/****************",
			" *@author   : Season",
			" *@date     : 2018-xx-xx",
			" *@direction: 相关描述",
			"****************/\n",
            "export default {",
            "  data() {",
            "    return {\n",
            "    }",
            "  },",
            "  components: {\n",
            "  }",
            "}",
            "</script>\n",
            "<style lang=\"scss\">\n",
            "</style>",
            "$2"
        ],
        "description": "Log output to console"
    }
}

实测更新：2018-04-10 23:38

    a. 上段代码中 “Print to console” 作为一个 key，可以自己更改;

    b. description 后面的值（“字符串”）是提示语句，可以自己修改成相关提示，可以汉语；

扫描二维码关注公众号，回复： 854910 查看本文章

    c. 我使用这种方式 也可以为 phyon 添加类似的功能。猜测，这是 vscode 编辑器的功能，应该有 **.json 文件的 **语言都可以。