VSCode React styled-components 스니펫

스니펫은 "코드 조각"이라는 뜻으로,
자주 사용되는 코드 형식을 미리 만들어두고 간편하게 불러와 사용할 수 있다.

 

지금 진행 중인 리액트 프로젝트에서는 각 컴포넌트 별로 .jsx 파일을 생성하고

동일한 이름으로 .styles.jsx 파일을 생성한 다음

.styles.jsx에 스타일드 컴포넌트를 import해 스타일을 정의하는 식으로 구조를 작성하고 있다.

/Testimonial
    Testimonial.jsx
    Testimonial.styles.jsx

 

내가 사용하는 기본적인 .styles.jsx 파일 형식은 다음과 같다.

Testimonial.styles.jsx

import styled from "styled-components";

const TestimonialStyled = styled.div``;

export default TestimonialStyled;

 

처음엔 그냥 VSCode 자동완성을 이용해서 일일히 손으로 치다가

컴포넌트 갯수가 많아지니까 안되겠어서

.styles.jsx 파일에서 사용할 커스텀 코드 스니펫을 만들었다.

 

VSCode 커스텀 코드 스니펫을 만드는 방법 :

1. 상단바에서 File > Preferences > User Snippets 클릭

2. 어떤 언어의 스니펫을 만들 것인지 선택 - jsx(React)는 javscriptreact를 선택한다.

3. 그러면 %userprofile%\AppData\Roaming\Code\User\snippets\javscriptreact.json 파일이 생성된다.

생성된 파일 안에는 이렇게 설명과 예제가 주석처리된 상태로 기본적으로 제공된다.

{
  // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  // "Print to console": {
  //     "prefix": "log",
  //     "body": [
  //         "console.log('$1');",
  //         "$2"
  //     ],
  //     "description": "Log output to console"
  // }
}

 

 

4. 예제를 참고해서 원하는 대로 스니펫을 작성하면 된다.

• prefix : 스니펫을 불러올 키워드. jsx 파일에서 "rdst"를 입력하면 스니펫을 불러올 수 있도록 설정했다.
• body : 스니펫 내용. 줄바꿈을 기준으로 배열로 나눠서 작성해야 한다. 한 줄을 하나의 문자열로 감싼다.
• $0, $1 등을 이용해 커서 위치와 순서를 정할 수 있다. 탭을 이용해 정해둔 커서 위치로 순서대로 이동할 수 있다.

{  
  // Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and  
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:  
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the  
  // same ids are connected.  
  // Example:  
  // "Print to console": {  
  //  "prefix": "log",  
  //  "body": \[  
  //  "console.log('$1');",  
  //  "$2"  
  //  \],  
  //  "description": "Log output to console"  
  // }  
  "create styles.jsx": {  
    "prefix": "rdst",  
    "body": \[  
      "import styled from \\"styled-components\\";",  
      "",  
      "const Name$1Styled = styled.div\`\`;",  
      "",  
      "export default Name$0Styled;"  
    \]  
  }  
}

 

이제 .jsx 파일에서 "rdst"를 입력하면 작성한 스니펫을 불러올 수 있다.