vsCode 设置代码片段

1. 生成代码片段：

代码片段要求每行都要用双引号包起来，比较麻烦，可以通过 snippet-generator.app/ 这里进行转换为相应格式。

vue2 + js 的代码片段

vue2 + ts 的代码片段

2. 打开 vsCode 编辑器
3. 点击文件(File) => 首选项(Preferences) =>用户片段(Configure User Snippets)
4. 选择需要添加的代码片段类型 这里以 vue 为例：
5. 将第 1 步中的生成的代码片段添加到 vue.json 中

{
	"Vue2+js": {
		"prefix": "vue2js",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"  name: '',",
			"  components: {},",
			"  props: {},",
			"  provide: function(){",
			"    return {};",
			"  },",
			"  data(){",
			"    return {};",
			"  },",
			"  computed: {},",
			"  watch: {},",
			"  created(){},",
			"  mounted() {},",
			"  methods: {},",
			"}",
			"</script>",
			"",
			"<style lang=\"less\" scoped>",
			"</style>"
		],
		"description": "vue2+js"
	},
	"Vue2+ts": {
		"prefix": "vue2ts",
		"body": [
			"<template>",
			"  <div></div>",
			"</template>",
			"",
			"<script lang=\"ts\">",
			"  import { Component, Vue, Prop, Watch, Inject } from 'vue-property-decorator';",
			"  import { State, namespace, Action } from 'vuex-class';",
			"  import {} from 'lodash';",
			"  @Component({",
			"    name: 'Demo',",
			"    components: {",
			"    }",
			"  })",
			"  export default class Demo extends Vue {",
			"    /*** vuex ***/",
			"    /*** Prop ***/",
			"    /*** data ***/",
			"    /*** computed ***/",
			"    /*** watch ***/",
			"    /*** life cycle ***/",
			"    created() { }",
			"    mounted() { }",
			"    /*** methods ***/",
			"    /**",
			"     * @desc 初始化数据",
			"     * @author ",
			"     * @param {Object} data 参数",
			"     * @returns   {null}    [没有返回]",
			"     */",
			"    initData() {}",
			"  }",
			"",
			"</script>",
			"",
			"<style scoped lang=\"less\"></style>"
		],
		"description": "Vue2+ts"
	}
}

5. 使用

6. 我的模板示例

vue2 + js

<template>
  <div></div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  provide: function(){
    return {};
  },
  data(){
    return {};
  },
  computed: {},
  watch: {},
  created(){},
  mounted() {},
  methods: {},
}
</script>

<style lang='less' scoped>
</style>

vue2 + ts

<template>
  <div></div>
</template>

<script lang="ts">
  import { Component, Vue, Prop, Watch, Inject } from 'vue-property-decorator';
  import { State, namespace, Action } from 'vuex-class';
  import {} from 'lodash';
  @Component({
    name: 'Demo',
    components: {
    }
  })
  export default class Demo extends Vue {
    /*** vuex ***/
    /*** Prop ***/
    /*** data ***/
    /*** computed ***/
    /*** watch ***/
    /*** life cycle ***/
    created() { }
    mounted() { }
    /*** methods ***/
    /**
     * @desc 初始化数据
     * @author 
     * @param {Object} data 参数
     * @returns   {null}    [没有返回]
     */
    initData() {}
  }

</script>

<style scoped lang="less"></style>