vsc代码片段

如何新建

• 文件=>首选项=>用户片段=>选择对应的语言或者新建全局代码片段文件
• ctrl +shift + p=>snippet=>插入片段=>选择对应的语言或者新建全局代码片段文件

注意：新建一定要选择好对应的语言，否则会不生效

示例文件

• 快速生成typescript的vue组件代码

  vue.json

  {
  	"Print to typescript": {
  		"prefix": "vue-ts",
  		"body": [ "<template>\r\n\t<div>\r\n\t\r\n\t</div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { Component, Prop, Vue } from 'vue-property-decorator';\r\n\r\n@Component\r\nexport default class HelloWorld extends Vue {\r\n\t@Prop() private msg!: string;\r\n\t\r\n}\r\n</script>\r\n<style lang=\"stylus\">\r\n\r\n</style>\r\n"
  		],
  		"description": "typescript"
  	}
  }
  

  快速生成代码键：vue-ts

  使用：在.vue文件输入快速生成代码键

• 快速生成vue里面的v-for代码

  vue-html.json

  {
  	"Print to vfor": {
  		"prefix": "vfor",
  		"body": [
  			"<div v-for=\"$0item in items\" :key=\"item.id\">",
        		"  {{item}}",
      		"</div>",
  		],
  		"description": "vfor"
  	}
  }
  

  快速生成代码键：vfor

  使用：在.vue文件的template中输入快速生成代码键

注释：

• \r\n换行
• \ttab空格
• \转义
• $0光标所在位置