설정하기
프로젝트를 처음 시작하면 만들 파일이 너무나도 많습니다.
그런데 하나하나 다 만들어내기엔 너무 귀찮죠,
이를 위해서 VSC 에서는 Snippet 이라는 기능을 제공하고 있습니다.
간단하게 VSC 를 실행한 이후, Code -> Preferences -> Configure User Snippets 로 실행하면 VSC 에서 어느 확장자에 적용할 것인지 확인한 이후 설정파일을 열어줍니다.
어느 확장자에 적용할 것인지 선택했을 때, 만약 typescript react 를 선택한다면 .tsx 파일 내부에서만 설정한 snippet 를 사용할 수 있습니다.
기본 설정파일을 보면 영어로 간단히 설명이 적혀있지만, 각각의 속성에 대해서 이야기 하자면
prefix : 어느 단축어로 해당 snippet 을 사용할 것인지 설정, 문자열로 작성하면 단일로 적용되며 배열로 작성하면 여러 snippet 을 설정할 수 있음
body : 본문에 설정될 코드를 작성
description : snippet 의 설명을 작성
입니다.
"snippet -> component": {
"prefix": "rfc",
"body": [
"const ${1:$TM_FILENAME_BASE}: React.FC = () => {",
"\treturn <div>Hello World</div>;",
"}\n",
"export default ${1:$TM_FILENAME_BASE}"
],
"description": "컴포넌트 시작: 파일명"
},여기서 $TM_FILENAME_BASE 와 같은 사전정의 변수를 사용할 수 있습니다. 자세한 사전정의 변수는 해당 링크를 통해 확인해보세요.
마무리
저는 Storybook, Styled-component, MyComponent/index.tsx, MyComponentButton.tsx 등을 주로 사용합니다.
디렉터리구조와 파일 이름을 아래와 같이 사용합니다.
├── src
│ ├── App.tsx
│ ├── components
│ │ └── common
│ │ └── Button
│ │ ├── button.stories.tsx
│ │ ├── button.styled.tsx
│ │ └── index.tsx
│ ├── index.tsx
│ ├── pages
│ │ ├── LoginPage
│ │ │ ├── GithubLoginButton
│ │ │ │ ├── githubLoginButton.stories.tsx
│ │ │ │ └── index.tsx
│ │ │ ├── index.tsx
│ │ │ └── loginPage.stories.tsx글을 작성하면서 해당 경로와 파일 이름에 맞추어 저는 설정을 아래와 같이 하였습니다. ( 필요에 따라 계속 수정해나갈 예정입니다. )
{
"snippet -> index component": {
"prefix": "rfci",
"body": [
"const ${TM_DIRECTORY/^.+\\/(.*)$/$1/}: React.FC = () => {",
"\treturn <div>Hello World</div>;",
"}\n",
"export default ${TM_DIRECTORY/^.+\\/(.*)$/$1/}"
],
"description": "컴포넌트 시작: 인덱스(디렉터리 명)"
},
"snippet -> component": {
"prefix": "rfc",
"body": [
"const ${1:$TM_FILENAME_BASE}: React.FC = () => {",
"\treturn <div>Hello World</div>;",
"}\n",
"export default ${1:$TM_FILENAME_BASE}"
],
"description": "컴포넌트 시작: 파일명"
},
"snippet -> styled components": {
"prefix": ["styled", "sc"],
"body": [
"import styled from 'styled-components'\n",
"const Styled${TM_FILENAME_BASE/(.*?)\\..*/${1:/pascalcase}/g} = styled.div``;\n",
"export default Styled${TM_FILENAME_BASE/(.*?)\\..*/${1:/pascalcase}/g}"
],
"description": "Styled component"
},
"snippiet -> storybook": {
"prefix": ["sb", "story"],
"body": [
"import { ComponentStory, ComponentMeta } from '@storybook/react';\n",
"import ${TM_FILENAME_BASE/(.*?)\\..*/${1:/pascalcase}/g} from '.';\n",
"export default {",
"\ttitle: 'CATEGORY/${TM_FILENAME_BASE/(.*?)\\..*/${1:/pascalcase}/g}',",
"\tcomponent: ${TM_FILENAME_BASE/(.*?)\\..*/${1:/pascalcase}/g},",
"\targs: { },",
"} as ComponentMeta<typeof ${TM_FILENAME_BASE/(.*?)\\..*/${1:/pascalcase}/g}>;\n",
"export const Default: ComponentStory<typeof ${TM_FILENAME_BASE/(.*?)\\..*/${1:/pascalcase}/g}> = (args) => (",
"\t<${TM_FILENAME_BASE/(.*?)\\..*/${1:/pascalcase}/g} {...args} />",
");"
],
"description": "Storybook by index"
},
"snippet -> storybook template": {
"prefix": "sbt",
"body": [
"const Template: ComponentStory<typeof ${TM_FILENAME_BASE/(.*?)\\..*/${1:/pascalcase}/g}> = (args) => <${TM_FILENAME_BASE/(.*?)\\..*/${1:/pascalcase}/g} {...args} />;\n",
"export const CustomTemplate = Template.bind({});\n",
"CustomTemplate.args = {};",
"CustomTemplate.storyName = '';\n"
],
"description": "Storybook Template"
}
}
button.stories.tsx 는 앞 button 이라는 컴포넌트 이름만 가져와서 PascalCase 로 Component 를 사용하기 때문에 아래처럼 설정하였습니다.
마찬가지로 styled component 도 PascalCase 로 바꾸면서, export default 의 Component 명을 Styled${ComponentName} 으로 설정하였습니다.
index.tsx 는 해당 디렉터리의 default import 를 담당하기에 해당 디렉터리의 이름을 가져와 사용할 수 있도록 하였습니다.
참고
