[React/TypeScript] VSCode code snippet 사용법

Code snippet

 

VSCode에서 Code snippet을 사용하여 개발 속도 빨라지는 법

---

1. Code snippet이란?

코드 스니펫은 특정 작업을 수행하거나 프로그래밍 개념을 보여주는 작은 코드 조각이다. 공유, 학습 및 개발 가속화에 사용되는 재사용 가능한 코드 부분이다. VSCode의 Extension에서도 내가 원하는 언어에 맞는 Code snippet을 다운받아 사용할 수도 있고, 직접 파일을 생성하여 나만의 Code snippet을 만듬으로서 개발 생산성을 높일 수 있다. 특정 약어를 입력하면 그 약어랑 매칭된 코드를 바로 쓸 수 있으므로 코드 재사용에도 유용하며 시간과 노력을 절약할 수 있다.

---

2. Code snippet 생성 방법

2-1. Code snippet 파일 생성하기

Ctrl+shift+p 를 입력하여 명령 창에 snippet이라고 치면 다음과 같이 나온다.

snippet configure

Snippets:Configure User snippets를 클릭하면 아래와 같이 나오는데 global을 선택하여 파일명을 작성한다. 언어에 따라 작성할 경우 아래에서 알맞은 언어를 선택하면 된다.

snippet files

그럼 .vscode 폴더 내에 입력한 파일명으로 Code snippet 텍스트 파일 하나가 생성된다.

2-2. Code snippet 함수 작성하기

Code snippet 예시

예시를 보면 Print to console은 제목을 나타내고, scope은 언어 범위를 나타내며, prefix는 명령어(단축어)로 사용할 키를 입력하고, body에는 함수를 작성한다. 지정할 함수가 여러 줄로 되어있다면, [] 배열로 표현하여 여러 줄로 나눠 작성해 주면된다.

여러 줄로 함수를 작성하거나 Code snippet 작성이 힘들다면 아래 사이트에서 쉽게 작성할 수 있다.

반응형

https://snippet-generator.app/

snippet generator

Snippet generator

왼쪽 Description에 code snippet에 대한 설명을 입력하면, 오른쪽에 제목과 description에 입력한 값이 들어간다.

Tab trigger는 prefix에 들어가는 말이고 Your snippet에 입력할 코드를 넣으면 body안에 적절하게 라인별로 나눠져서 자동 생성된다.

아래는 내가 Snippet Generator를 이용하여 작성한 Custom UseQuery 훅이다. uqa라는 단축어를 입력하면 body에 있는 함수가 작성되도록 만들었는데, $1, $2 같이 위치에 달러표시로 지정해 두면, uqa를 입력한 경우 순서대로 커서가 해당 위치로 가 있는다. Tab키를 이용하여 이동이 가능하다.

 "Custom UseQuery function with Axios": {
    "prefix": "uqa",
    "body": [
      "export const $1 = ($2) => {",
      "  return useQuery(",
      "    [$3],",
      "    async () => {",
      "      return axios",
      "        .get<$4>(`${baseURL}$5`, {",
      "          headers: { \"Content-Type\": \"application/x-www-form-urlencoded\" },",
      "          params: {",
      "            $6",
      "          },",
      "        })",
      "        .then((response) => {",
      "          return response.data;",
      "        });",
      "    },",
      "    {",
      "      onError: (err) => {",
      "        console.log(err);",
      "      },",
      "      onSuccess: (data) => {",
      "        console.log(data);",
      "      },",
      "      enabled: !!$7,",
      "    }",
      "  );",
      "};"
    ],
    "description": "Asynchronized UseQuery function with Axios"
  }

---

3. Code snippet 결과

prefix 입력

code snippet 결과

함수의 커서가 있는 곳에서는 Tab키로 이동가능하며 순서는 snippet file에서 지정한 것과 같다. 이 외에도 env에서 파일명을 지정하여 함수에서도 바로 갖다 쓸 수 있도록 할 수 있고 다양한 기능들이 있기 때문에 좀 더 공부해두면 개발 속도를 더 빠르게 할 수 있을 것 같다. 

이 외에 기본적으로 지원해주는 code snippet도 있으니 몇 개 외워두는 것도 좋을 것 같다.