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光標所在位置