vscode에서 template을 사용해서 귀찮음을 줄이자

저렇게 상단 파일 탭 > 기본 설정 > 사용자 코드 조각이 있다. 저걸 누르면 vscode에서 템플릿을 사용할 수 있다.

vscode의 확장 중에 vue와 관련된 확장이 있어 vueinit을 사용하면 composite api 전용 템플릿이 바로 만들어진다. 이 부분이 굉장히 편해서 vue를 쓰기도 한다. 그런데 nuxt 전용 hook인 fetch는 확장에 등록이 되어있지 않아 하나하나 작성을 했었다. 굉장히 귀찮았는데 왜 이제야 해결 방법을 찾아봤을까? vue 파일을 상당히 많이 만들고 난 뒤에야 vscode에서도 template을 지원한다는 것을 검색해봤다.

 

vue 안의 script에만 scope를 적용하는 방법까지는 찾지 못 했다. javascript scope로 범위를 조금 넓혀도 vue 안의 script에서 원활하게 사용이 가능하다. async fetch에서 보통 axios로 get, post, put, delete를 사용하기 때문에 각각을 fetch-get, fetch-post, ... 으로 만들었다.

{
  // Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. 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": {
  // 	"prefix": "log",
  // 	"body": [
  // 		"console.log('$1');",
  // 		"$2"
  // 	],
  // 	"description": "Log output to console"
  // }

  "nuxt fetch-get": {
    "prefix": ["fetch-get"],
    "body": [
      "async fetch() { await this.$$axios.$$get(\n`${1:url}`\n).then(res=>{\n${2:data-process}\n}).catch(err=>{consoel.log(err)}) }"
    ],
    "description": "nuxt's fetch hook"
  },
  "nuxt fetch-put": {
    "prefix": ["fetch-put"],
    "body": [
      "async fetch() { await this.$$axios.$$put(\n`${1:url}`\n).then(res=>{\n${2:data-process}\n}).catch(err=>{consoel.log(err)}) }"
    ],
    "description": "nuxt's fetch hook"
  },
  "nuxt fetch-post": {
    "prefix": ["fetch-post"],
    "body": [
      "async fetch() { await this.$$axios.$$post(\n`${1:url}`\n).then(res=>{\n${2:data-process}\n}).catch(err=>{consoel.log(err)}) }"
    ],
    "description": "nuxt's fetch hook"
  },
  "nuxt fetch-delete": {
    "prefix": ["fetch-delete"],
    "body": [
      "async fetch() { await this.$$axios.$$delete(\n`${1:url}`\n).then(res=>{\n${2:data-process}\n}).catch(err=>{consoel.log(err)}) }"
    ],
    "description": "nuxt's fetch hook"
  }
}

 

스크린샷에서 보이듯이 fetch-get을 선택해서 귀찮고 반복적인 코드 타이핑을 많이 줄일 수 있었다.

 

intelliJ에서 테스트 코드 given when then 템플릿을 만들다가 vscode에도 템플릿을 만들게 됐다. 역시 더 많이 아는 사람이 더 효율적으로 산다. 지금부터라도 템플릿을 써서 다행이다.