VSCode로 리액트 개발할 때 쓰기 편한 스니펫 모음

VSCode 스니펫 기능 써보기

리액트 개발을 하면서 반복적이고 기계적으로 작성해야하는 코드들을 vscode 스니펫 기능을 사용하여 최대한으로 줄이는데 도움이 되고자 제가 쓰는 설정 몇가지를 공유합니다.

---

우선 아토믹 디자인 패턴을 사용하여 <Digit value={number} />라는 원자 컴포넌트를 만들었다고 했을때의 파일구조는 대략 아래와 같을겁니다.

Digit 원자 컴포넌트의 파일구조

그리고 각각의 파일들의 내용은 이정도로만 작성해봤습니다.

index.js

export { default, default as Digit } from "./Digit";

Digit.js

import React from "react";
import PropTypes from "prop-types";
import c from "./Digit.module.scss";

function Digit({ value }) {
  return <div className={c["wrapper"]}>{value}</div>;
}

Digit.defaultProps = { value: 0 };
Digit.propTypes = { value: PropTypes.number };

export default Digit;

Digit.module.scss

.wrapper {
  display: inline-block;
}

---

이 내용까지만 봤을 때는 Digit.js에 value 속성이 정의되었다는 것 외에는 모두 컴포넌트를 구성하기 위해 최소한으로 필요한 필수적이고, 반복적인 코드들 뿐입니다.

바로 본론으로 들어가서, 예시로 든 기본 소스를 빠르게 작성하기 위해 제가 쓰는 스니펫부터 공유하겠습니다.

exdd.code-snippets

{
  "export default via index": {
    "scope": "javascript,typescript",
    "prefix": "exdd",
    "body": [
      "export { default, default as ${1:${TM_DIRECTORY/^.+\\/(.*)$/$1/}} } from \"./$1\";",
      ""
    ]
  },
  "Functional Component with Props": {
    "scope": "javascript,typescript",
    "prefix": "import-p",
    "body": [
      "import React from \"react\";",
      "import PropTypes from \"prop-types\";",
      "import c from \"./${2:${1:$TM_FILENAME_BASE}.module.scss}\";",
      "",
      "function $1(props) {",
      "  return <div$3>$1</div>;",
      "}",
      "",
      "$1.defaultProps = {};",
      "$1.propTypes = {};",
      "",
      "export default $1;",
      ""
    ]
  },
}

위 스니펫들을 사용하면 아래와 같이 척하면 척하고 코드가 나옵니다.

index.js

exdd 스니펫

Digit.js

import-p 스니펫

 

---

스니펫을 제공하는 확장 프로그램 써보기

스니펫 기능을 쓰기 전에는 VSCode 확장 프로그램 dsznajder.es7-react-js-snippets을 쓰고 있었습니다.

이 확장 프로그램에서 지원하는 스니펫들을 전체적으로 훑어보면 다양한 경우의 수에 대한 스니펫들이 많이 제공되고 있습니다. 그중 대표적인 것 하나의 사용 예제입니다.

확장 프로그램의 rfc 스니펫 사용

Extension rfc 스니펫

이 확장 프로그램에서 지원하는 스니펫의 종류가 아주 방대하기 때문에 기본적으로는 확장 프로그램을 쓰시되, 제공되지 않는 스니펫에 대한 갈증은 커스텀 스니펫을 직접 작성해서 사용해보시면 되겠습니다.

저같은 경우는 import c from "./Digit.module.scss";가 스니펫에 의해 자동으로 코드에 포함되기를 원했기에 예의 스니펫을 작성해서 쓰고 있습니다.

맺는 글

이 글이 제 블로그의 첫 글입니다. 첫 단추를 잘 끼워야하는데 제 글이 도움과 공감을 드렸으면 좋겠네요 :)

부족한 글 끝까지 읽어주셔서 감사합니다. 궁금하신 점이나 여러가지 의견 있으시면 댓글 남겨주세요!