🙌 Vue Custom Snippets 만들기

😠 불편해!

 작업 시 새로운 .vue 파일을 만들 때 init snippets이 항상 불만이었습니다.

Vetur에서 제공되는 기본 snippet의 경우 아래와 같은 기본 템플릿밖에 없었습니다.

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

하지만 저는 scss를 이용하여 scoped 옵션을 사용하였기 때문에 직접 추가해줘야 했는데 이게 너무 귀찮았습니다.

그래서 만들어 보았다! Custom Snippets ~ 🔨 (만드는 게 재밌잖아요?)

📒 Snippets 작성하기

Custom Snippets 작성은 너무나도 쉽습니다.

상단의 메뉴에서 User Snippets를 찾습니다. Ctrl + Shift + P -> user snippets로 찾으셔도됩니다. (Mac은 cmd + Shift + P)

가운데에 나오는 검색창에서 vue를 검색한 후 vue.json을 들어갑니다.

vue.json에 들어오셨다면 이제 원하는 snippets을 작성합니다.

{
  "snippets 이름": {
    "prefix": "snippets 실행 트리거",
    "body": [
      // snippets 실행시 원하는 template 작성
    ],
    "description": "snippets에대한 설명을 작성합니다."
  }
}

작성 형식은 위의 형식을 사용합니다. 아래는 형식에 따라 제가 작성한 snippets입니다.

{
  "baegofda snippets 🥕": {
    "prefix": "baegofda 🥕",
    "body": [
      "<template></template>",
      "",
      "<script>",
      "export default {",
      "\tname: '${TM_FILENAME/(.*)\\..+$/$1/}$1',",
      "\tcomponents: {},",
      "\tprops: {},",
      "\tdata() {\n\t\treturn {}\n\t},",
      "\tmethods: {},",
      "}",
      "</script>",
      "",
      "<style lang='scss' scoped></style>"
    ],
    "description": "Vue snippet with scss and scoped"
  }
}

저는 snippets 사용 시 최대한 추가적인 텍스트를 작성하지 않기 위해 원하는 옵션들을 많이 추가하였습니다.

(자동으로 name 옵션에 파일 이름 넣어주기.. 커서 위치.. 줄 바꿈.. 띄어쓰기..)

자세한 옵션과 변수들은 공식문서를 참고하시면 좋습니다.

prefix 옵션에 작성한 단어의 앞글자만 작성하면 자동 완성으로 해당 snippets가 나옵니다.

실행시 작성한 snippets에 맞게 나오게됩니다.

이상 작업하다 귀차니즘으로 인해 뻘짓을 한 개발자였습니다.