使用 vscode 代码片段：vue snippets

vscode 代码片段配置

以创建 vue 文件模板为例——
文件-首选项-用户片段（ 或使用快捷键 Ctrl + Shift + P，输入 snippets ）

输入 Vue，回车即可自动创建 vue.json 文件

配置成自己喜欢的 vue 模板，保存

// vue.json
{
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>",
			" <div>\n",
			" </div>",
			"</template>\n",
			"<script>",
			"export default {",
			"  name: '',",
			"  props: { },",
			"  data () {",
			"    return { }",
			"  },",
			"  computed: { },",
			"  watch: { },",
			"  methods: { },",
			"  mounted() { }",
			"}",
			"</script>\n",
			"<style lang=\"scss\" scoped>",
			"  @import \"./index.scss\";",
			"</style>",
			"$2"
		],
		"description": "Log output to console"
	}
}

使用

使用快捷键 Ctrl + Shift + P，输入 insert snippet ，选中即可自动插入

同理，可配置其他代码片段

//egg 框架的 controller、 service 代码片段

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"egg-controller": {
		"scope": "javascript,typescript",
		"prefix": "egg controller",
		"body": [
			"'use strict';",
			"const Controller = require('egg').Controller;",
			"class $1Controller extends Controller {",
				"    async index() {",
					"        const { ctx } = this;",
					"        ctx.body = '$2';",
					"    }",
				"}",
				"module.exports = $1Controller;",
		],
		"description": "egg 控制器的代码提示"
	},
 
	"egg-service": {
		"scope": "javascript,typescript",
		"prefix": "egg service",
		"body": [
			"const Service = require('egg').Service;",
			"class $1Service extends Service {",
				"    async find(uid) {",
					"        const sql = ``;",
					"        const data = await this.app.mysql.query(sql);",
					"        return data;",
					"    }",
				"}",
				"module.exports = $1Service;",
		],
		"description": "egg 控制器的代码提示"
	}
} 

效果：