[vscode] code snippet 만들기

1. 코드 스니펫이란?

자주 사용하는 코드를 자동완성으로 저장하여 귀찮게 일일이 하나씩 안쳐도 되게 만드는 기능이라고 생각하면 편하다.

2. 리액트 코드 스니펫 적용하기

난 리액트로 컴포넌트 만들 때 하나씩 일일이 치기 싫었고 자동완성으로

const 파일이름 = () => {

  return(
  <div>
    <h1>타이틀</h1>
  </div>
  )
}

위의 코드 처럼 만들 것이다.

3. 코드 스니펫 만들기

vs코드를 들어가서 상단의 코드-기본설정-사용자 코드 조각 구성을 들어가준다.

그 후 자기가 원하는 이름으로 코드 스니펫 이름을 지정하고 만들어 준다.

아래와 같이 입력한다.

{
  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "const ${TM_FILENAME_BASE} = () => {",
      "  return (",
      "    <div>",
      "      <h1>${1:Title}</h1>",
      "    </div>",
      "  );",
      "}",
      "",
      "export default ${TM_FILENAME_BASE};"
    ],
    "description": "Create a new React function component with filename as component name."
  }
}

위 처럼 입력하고 컴포넌트에서 rfc라고 치면 원하는대로 코드가 자동완성 되어 나온다.

여기서 prefix란 내가 코드 스니펫을 어떻게 정의할 것인지를 말해주고 rfc로 정의했기 때문에 rfc 명령어를 입력하면 되는 것이다.

body 부분은 이제 코드 쓰는 곳이고 description은 설명이다.

이제 귀찮게 하나씩 안쳐도 되겠다