VSCode Snippet 추가하기

JS, TS로 개발하면서 Console.log 등 정말 자주 사용하는 메소드나 리액트에서 Component 개발시 직접 타이핑하던 습관들을 고치며 에디터를 쓰는 덕을 좀 보고자 스니펫을 추가 해 보고자 한다.

여러 메서드나 문법들을 자주 쓰고 있지만, 대표적으로 바로 생각나는건 2가지 이다.

1. Console.log
2. Arrow Function Component

우선 이 두 가지만 스니펫을 추가해보고 스니펫 사용에 익숙해지면 여러 가지를 추가해 볼 예정이다.

Mac 기준 Cmd+P 를 누르면 VSCode의 검색창이 뜨게 된다.

여기서 > 를 입력해주고 Snippet 이라고 검색하여 추가할 수 있다.

언어에 맞게 따로 설정이 가능하지만, 나는 Global로 추가를 할 것 이다.

가이드가 주석으로 남겨져 있으며, VSCode Snippet Guide 공식 가이드에서 확인 가능하다.

그럼 추가해보자!

아 우선 선행으로 editor.tabCompletion": "on" 설정을 바꾸어주어야 한다.
그럼 prefix 입력 후 탭을 눌러주면 설정한 Snippet이 딱 추가된다.

// global.code-snippets
{
  "Console log": {
    "scope": "javascript, typescript, javascriptreact, typescriptreact",
    "prefix": "cl",
    "body": "console.log($1);",
    "description": "Console.log Snippet"
  },
  "Arrow Function React Component": {
    "scope": "javascript, typescript, javascriptreact, typescriptreact",
    "prefix": "arrowcomponent",
    "body": [
      "const $1 = ($2)=> {",
      "return (",
      "$4",
      ")",
      "}",
      "export default $3;"
    ],
    "description": "Arrow Function Component Snippet"
  },
  "Arrow Function": {
    "scope": "javascript, typescript, javascriptreact, typescriptreact",
    "prefix": "arrowfunction",
    "body": ["const $1 = ($2)=> {", "$3", "}"],
    "description": "Arrow Function"
  }
}

설정 깂들에서 $1 이런것들은 해당 스니펫을 부르고 탭을 누르면 그 위치로 이동하게 되어 더욱 편하게 나머지 값들을 입력할 수 있다.