[VSCode] VS Code에서 Code Snippet을 만들어보자! - 코드 스니펫의 모든 것 | Custom Code Snippet | User Snippets

매번 스크립트 파일을 새로 작성할 때,

import React from 'react';

부터 

export default 파일이름까지

 

일일이 작성해줘야하는 번거로움을 덜어주는 VS Code의 기능을 다뤄보도록 하겠다.

 

🟨 Code Snippet ?

- VS Code에서 새로 파일을 만들고 해당 파일에 들어가는 기본적인 코드들, 즉 거의 대부분의 파일에서

공통적으로 사용되는 코드들을 일일이 작성할 때 이를 간단한 명령어 하나로 작성해주는 기능이다.

 

예를 들어 앞서 적어놓은 부분을 좀 더 자세히 보면

 

import React from 'react';
import {View, Text} from 'react-native';

const filename = () => {

	return (
    	<View>
        	<Text>This is new file!</Text>
        </View>
        )

};
export deafult filename;

react-native 환경에서 새로 파일을 생성하게 되면 거의 90% 이상 위와 같은 형식은

모든 RN 개발자분들 사이에서 똑같이 작성하게 되는 것 같은데,

 

이를 일일이 작성하거나 미리 만들어놓은 텍스트를 복사+붙여넣기 하기보다

사용자가 지정해놓은 명령어로 간단하게 Snippet을 불러올 수 있다는 것이다!

 

🟨 How to Use

-> 해당 기능은 특별한 Extension이 아니라, VS Code 내에서 제공해주는 단순한 '기능' 이기에

사용법은 아주 간단하다.

 

1️⃣ VS Code > File > 기본 설정 > 사용자 기본 코드 조각 구성 선택

: 최근 Mac 환경에서는 File이 아닌 상단 'Code' 에 메뉴 탭이 있으니 참고하자.

 

2️⃣ '프로젝트명' 에 대한 새 코드 조각 파일... 선택

 

3️⃣ 코드 스니펫 사용자에 맞게 편집하기

2번 과정을 진행했다면 위 이미지와 같은 스니펫 파일이 생성될 것이다.

주석으로 잔뜩 달린 부분은 코드 스니펫의 예시인데, 이 중 Print to console, description 부분은 중요하지 않으니 패스,

우리에게 중요한건 prefix, body 부분이다.

 

Prefix : '스니펫을 불러올 명령어'
Body : '명령어를 통해 불러올 코드 조각 구성'

 

나는 편의를 위해 'qwer'로 지정했고, 이에 대한 구성은 아래와 같다.

 

"qwer": {
    "prefix": "qwer",
    "body": [
      "import React from \"react\";",
      "import styled from \"styled-components/native\";",
      "",
      "const Container = styled.SafeAreaView`",
      "    flex : 1;",
      "    background-color: #FFFFFF;",
      "`",
      "",
      "const ${1:filename} = () => {",
      "",
      "    return (",
      "        <Container>",
      "            ",
      "        </Container>    ",
      "    )",
      "}",
      "",
      "export default ${1:filename};"
    ],
    "description": "qwer"
  }

거의 대부분의 컴포넌트에서 위와 같은 형식을 사용하기에 작성했고,

여기서 ${1:filename} 부분은 실제로 'qwer' 명령어를 통해 코드 스니펫을 불러왔을 때,

filename 부분에 동시 커서가 활성화 된다. 다른 동작을 하지 않고 활성화가 된 상태에서 편집을 하게되면

filename을 한번에 편집을 할 수 있게 되어 편리하다.

(코드 조각을 통해 불러온다 해도 export하는 파일명은 바꿔줘야 하니까 필수로 해주면 좋다!)

 

이제 이를 저장해주기만 하면 아래와 같이 커스텀한 스니펫을 사용할 수 있다.

준비하시고~

쏘세요~!

filename 부분이 저렇게 회색 박스로 칠해져 있을 때 파일명을 작성하게 되면 동시에 편집이 가능하다~! 편-안..

 

🟪 More Easily

 

- 'qwer' 처럼 간단한 스니펫의 경우는 일일이 작성해줘도 번거로움이 없지만, 길어지면 더욱 번거로워지는 단점이 있다.

엔터 하나 칠때마다 "", 를 입력해주어야 하기에 사실 직접 작성해보면 정말 귀찮다.

 

이러한 단점을 보완해주기 위해 우리가 작성한 코드를 집어넣기만 하면 자동으로 스니펫 형식으로 만들어주는

아주 편리한 사이트가 있다. 자세한 사용법은 직접 사용해보면서 느끼도록-!

 

https://snippet-generator.app/

snippet generator

 

🟩 Snippets Extension

> 포스팅한 'User Snippets' 는 사용자가 직접 스니펫을 만들어야 한다.

이를 더 활용하려면 log를 찍는다거나, 함수를 작성할 때 등등 사용처가 굉장히 많아 이를 잘 활용한다면 개발 속도는

어마어마하게 빨라질 것이다.

 

VS Code 확장 중 JavaScript Code Snippets 이라는 익스텐션이 있는데,

이는 우리가 공통적으로 자주 사용하는 부분을 스니펫으로 만들어둔 것이기에

한번 사용해보는 것을 추천한다.