Vue + TypeScript 코드 스니펫

typescript.json

{

	"Vue TS Component": {
		"prefix": "v-component",
		"description": "Vue TypeScript 컴포넌트",
		"body": [
			"import Vue from 'vue';",
			"import { Component${1:, Prop, Emit, Watch} } from 'vue-property-decorator';",
			"",
			"@Component({$3})",
			"export default class ${2:Component} extends Vue {",
			"\tconstructor(){",
			"\t\tsuper();",
			"\t}",
			"}"
		]
	},
	"Vue Prop": {
		"prefix": "v-prop",
		"description": "Vue TypeScript @Prop 데코레이터",
		"body": [
			"@Prop(${1:{default: 'value'\\}}) ${2:prop}:${3:types};"
		]
	},
	"Vue Watch": {
		"prefix": "v-watch",
		"description": "Vue TypeScript @Watch 데코레이터",
		"body": [
			"@Watch('${1:prop}', ${2:{ immediate: true, deep: true \\}})\n${3:method}(val${4::}, oldVal${5::}) {",
			"\t$6",
			"};"
		]
	},
	"Vue Emit": {
		"prefix": "v-emit",
		"description": "Vue TypeScript @Emit 데코레이터",
		"body": [
			"@Emit(${1:'event'})\n${2:methodName}() {",
			"\t$3",
			"}"
		]
	},
	"Vue Component Http": {
    "prefix": "v-component-http",
    "description": "Vue 컴포넌트 with HTTP",
    "body": [
      "import Vue from 'vue';",
      "import Component from 'vue-class-component';",
      "import axios, { AxiosResponse } from 'axios';",
      "",
      "@Component({",
      "\ttemplate: require('${feature}.html')",
      "})",
      "export class ${Feature}Component extends Vue {",
      "",
      "\tprivate url = '';",
      "",
      "\tconstructor() {",
      "\t\tsuper();",
      "\t\tthis.axios = axios;",
      "\t}",
      "",
      "\tmounted() {",
      "\t\tthis.axios.get(this.url).then((response: AxiosResponse) => {",
      "\t\t\tthis.items = response.data;",
      "\t\t}, (error) => {",
      "\t\t\tconsole.error(error);",
      "\t\t});",
      "}$0",
      "}"
    ]
  },
	"Vue Routes": {
    "prefix": "v-routing",
    "description": "Vue 라이팅 파일",
    "body": [
      "import Vue from 'vue';",
      "import VueRouter from 'vue-router';",
      "",
      "Vue.use(VueRouter);",
      "",
      "let router = new VueRouter({",
      "\troutes: [",
      "\t\t{ path: '${path}', component: ${Name}Component },",
      "\t]",
      "});",
      "",
      "new Vue({",
      "\tel: '#app-main',",
      "\trouter: router",
      "})"
    ]
  },
  "Vue Service Class": {
    "prefix": "v-service",
    "description": "서비스 클래스(싱글톤)",
    "body": [
      "class ${Feature}Service {",
      "",
      "\tprivate static _instance: ${Feature}Service;",
      "",
      "\tprivate constructor() {",
      "\t}",
      "",
      "\tstatic createInstance() {",
      "\t\t${Feature}Service.getInstance();",
      "\t}",
      "",
      "\tstatic getInstance() {",
      "\t\treturn this._instance || (this._instance = new this());",
      "\t}",
      "$0",
      "}"
    ]
  },
  "Vuex Store": {
    "prefix": "v-store",
    "description": "Vuex 스토어",
    "body": [
      "import axios from 'axios';",
      "import { ActionContext, Store } from 'vuex';",
      "import { getStoreAccessors } from 'vuex-typescript';",
      "",
      "export interface Product {",
      "\tid: number;",
      "\tname: string;",
      "\tunitPrice: number;",
      "}",
      "",
      "export interface ProductInBasket {",
      "\tproduct: Product;",
      "\tisSelected: boolean;",
      "}",
      "",
      "export interface BasketState {",
      "\titems: ProductInBasket[];",
      "\ttotalAmount: number;",
      "}",
      "",
      "type BasketContext = ActionContext<BasketState, BasketState>;",
      "",
      "export const basket = {",
      "\tnamespaced: false,",
      "",
      "\tstate: {",
      "\t\titems: [],",
      "\t\ttotalAmount: 0,",
      "\t},",
      "",
      "\tgetters: {",
      "\t\tgetProductNames(state: BasketState) {",
      "\t\t\treturn state.items.map((item) => item.product.name);",
      "\t\t},",
      "\t\tgetTotalAmountWithoutDiscount(state: BasketState) {",
      "\t\t\treturn state.items.reduce((total, item) => total + item.product.unitPrice, 0);",
      "\t\t},",
      "\t},",
      "",
      "\tmutations: {",
      "\t\tappendItem(state: BasketState, item: { product: Product; atTheEnd: boolean }) {",
      "\t\t\tstate.items.push({ product: item.product, isSelected: false });",
      "\t\t},",
      "\t\tsetTotalAmount(state: BasketState, totalAmount: number) {",
      "\t\t\tstate.totalAmount = totalAmount;",
      "\t\t},",
      "\t},",
      "",
      "\tactions: {",
      "\t\tasync updateTotalAmount(context: BasketContext, discount: number): Promise<void> {",
      "\t\t\tconst totalBeforeDiscount = readTotalAmountWithoutDiscount(context);",
      "\t\t\tconst response = await axios.get(`/api/calculatetotal/\\${totalBeforeDiscount}/\\${discount}`);",
      "\t\t\tcommitSetTotalAmount(context, response.data.totalAfterDiscount);",
      "\t\t},",
      "\t},",
      "};",
      "",
      "export const createStore = () => new Store<BasketState>(basket);",
      "",
      "const { commit, read, dispatch } = getStoreAccessors<BasketState, BasketState>('');",
      "",
      "export const readProductNames = read(basket.getters.getProductNames);",
      "export const readTotalAmountWithoutDiscount = read(basket.getters.getTotalAmountWithoutDiscount);",
      "export const dispatchUpdateTotalAmount = dispatch(basket.actions.updateTotalAmount);",
      "export const commitAppendItem = commit(basket.mutations.appendItem);",
      "export const commitSetTotalAmount = commit(basket.mutations.setTotalAmount);",
      "$0",
      ""
    ]
  },
  "Vue Component using Vuex store": {
    "prefix": "v-component-store",
    "description": "Vue 컴포넌트 with Vuex 스토어",
    "body": [
      "import Vue from 'vue';",
      "import Component from 'vue-class-component';",
      "import { readProductNames, readTotalAmountWithoutDiscount, dispatchUpdateTotalAmount } from './store';",
      "",
      "@Component({",
      "\ttemplate: require('./basket.html')",
      "})",
      "export class BasketComponent extends Vue {",
      "\t",
      "\tget productNames() {",
      "\t\treturn readProductNames(this.\\$store);",
      "\t}",
      "",
      "\tget totalAmountWithoutDiscount() {",
      "\t\treturn readTotalAmountWithoutDiscount(this.\\$store);",
      "\t}",
      "",
      "\tupdateTotal() {",
      "\t\tdispatchUpdateTotalAmount(this.\\$store, 10);",
      "\t}",
      "}",
      "$0",
      ""
    ]
  }
}

vue-html.json

{
  "vClass": {
    "prefix": "v-class",
    "body": [
      "v-bind:class=\"{${1:cssClass}: ${2:expression}}\""
    ],
    "description": "Vue class snippet"
  },
  "vFor": {
    "prefix": "v-for",
    "body": [
      "v-for=\"${1:item} in ${2:list}\""
    ],
    "description": "Vue for snippet"
  },
  "vHref": {
    "prefix": "v-href",
    "body": [
      "v-bind:href=\"${1:expression}\""
    ],
    "description": "Vue href snippet"
  },
  "vShow": {
    "prefix": "v-show",
    "body": [
      "v-show=\"${1:expression}\""
    ],
    "description": "Vue show snippet"
  },
  "vModel": {
    "prefix": "v-model",
    "body": [
      "v-model=\"${1:expression}\""
    ],
    "description": "Vue model snippet"
  },
  "vSubmit": {
    "prefix": "v-submit",
    "body": [
      "@submit.prevent=\"${1:expression}\""
    ],
    "description": "Vue submit snippet"
  },
  "vClick": {
    "prefix": "v-click",
    "body": [
      "@click.prevent=\"${1:expression}\""
    ],
    "description": "Vue click snippet"
  },
  "vRouterView": {
    "prefix": "v-routerView",
    "body": [
      "<router-view>Loading...</router-view>"
    ],
    "description": "Vue router view snippet"
  },
  "vRouterLink": {
    "prefix": "v-routerLink",
    "body": [
      "<router-link v-bind:to=\"${1:linkPath}\">${2:linkName}</router-link>"
    ],
    "description": "Vue router link snippet"
  },
  "vIf": {
    "prefix": "v-if",
    "body": [
      "v-if=\"${1:expression}\""
    ],
    "description": "Vue if snippet"
  },
  "vElseIf": {
    "prefix": "v-else-if",
    "body": [
      "v-else-if=\"${1:expression}\" $0"
    ],
    "description": "Vue else if snippet"
  }
}

vue.json

{
  "Vue TypeScript 템플릿": {
		"prefix": "v-template",
		"description": "Vue TypeScript 컴포넌트",
		"body": [
			"<template>",
			"",
			"</template>",
			"",
			"<script lang=\"ts\">",
			"\timport Vue from 'vue';",
			"\timport { Component } from 'vue-property-decorator';",
			"",
			"\t@Component({})",
			"\texport default class ${1:Component} extends Vue {",
			"\t\t$2",
			"\t};",
			"</script>",
			"",
			"<style>",
			"",
			"</style>"
		]
	}
}