React + TypeScript styled-component 함수 자동완성 단축키 설정하기

🪴 React + Javascript srfc 단축키 설정

이전에 React 와 javascript 를 활용하여 개발할 때에는 srfc 단축키를 활용해서 자동완성을 했었다.

// srfc 단축키 입력시 아래와 같이 자동완성
import styled from 'styled-components';

const Main = () => {
  return <MainBlock></MainBlock>;
};

const MainBlock = styled.div``;

export default Main;

이에 대한 설정은 다음 경로에서 설정해준다.
한글 버전: 기본 설정 > 사용자 코드 조각 구성 > 새 전역 코드 조각 파일...
영문 버전: Preferences -> User Snippets -> New Global Snippets file...

파일 이름은 javascriptreact.json 으로 생성 하고 내용은 지시에 따라 다음과 같이 작성한다.

// javascriptreact.json
{
  "Styled React Functional Component": {
    "prefix": "srfc",
    "body": [
      "import styled from 'styled-components';",
      "",
      "const ${TM_FILENAME_BASE} = () => {",
      " return (",
      " <${TM_FILENAME_BASE}Block>",
      " ",
      " </${TM_FILENAME_BASE}Block>",
      " );",
      "};",
      "",
      "const ${TM_FILENAME_BASE}Block = styled.div``;",
      "",
      "export default ${TM_FILENAME_BASE};",
      ""
    ],
    "description": "Styled React Functional Component"
  }
}

---

🪴 React + Typescript srtfc 단축키 설정

과정은 위와 같고 파일 생성시 이름을 typescriptreact.json 으로 설정해준 뒤 아래 코드를 삽입했다.

// typescriptreact.json
{
  "Styled React Typescript Functional Component": {
    "prefix": "srtfc",
    "body": [
      "import styled from 'styled-components';",
      "",
      "const ${TM_FILENAME_BASE} = () => {",
      " return (",
      " <${TM_FILENAME_BASE}Block>",
      " ",
      " </${TM_FILENAME_BASE}Block>",
      " );",
      "};",
      "",
      "const ${TM_FILENAME_BASE}Block = styled.div``;",
      "",
      "export default ${TM_FILENAME_BASE};",
      ""
    ],
    "description": "Styled React Functional Component"
  }
}