VSCode 자동완성 세팅(code snippets)

snippets 파일 생성

1. Cmd + Shift + P키를 누르고, 검색창에 Configure User Snippets을 입력합니다.

>Snippets: Configure User snippets

 

2. Enter 키를 누르면, 스니펫 설정 관련 메뉴가 나타납니다. 처음 설정하는 경우, New Global Snippets file... 항목을 선택합니다.

>New Global Snippets file...

 

3. 파일 이름을 입력하고 Enter 키를 누릅니다. 파일 이름은 [fileName].code-snippets로 설정해주는 것이 일반적입니다.

 

snippets 설정

파일이 열리면, 스니펫을 작성합니다. 스니펫은 JSON 형식으로 작성하며, prefix와 body 속성이 필요합니다.

 

▼ 예시 코드

 

{
  "Console log": {
    "prefix": "cl",
    "body": "console.log($1);"
  },
  "Console log with string template": {
    "prefix": "clt",
    "body": "console.log(`$1 ${$2}`);"
  },
  "Function": {
    "prefix": "fc",
    "body": ["function $1(){", "  $2", "}"]
  },
  "Arrow Function": {
    "prefix": "afc",
    "body": ["const $1 = () => {", "  $2", "};"]
  },

  // react
  "Arrow Function Callback": {
    "prefix": "ucb",
    "body": ["const $1 = useCallback(() => {", "  $2", "}, []);"]
  },
  "useState": {
    "prefix": "us",
    "body": ["const [$1, set${1/(.*)/${1:/capitalize}/}] = useState($2);"]
  },
  "useEffect": {
    "prefix": "ue",
    "body": ["useEffect(() => {", "  $1", "}, []);"]
  },
  "useEffect return": {
    "prefix": "uer",
    "body": ["useEffect(() => {", "  $1", "", "return () => {", "$2", "}", "}, []);"]
  },
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "export default function ${1:${TM_FILENAME_BASE/^(.)(.*)$/${1:/upcase}$2/}}() {", // 파일이름에 첫글자가 소문자여도 대문자로 바꾸기
      "  return (",
      "    <div>",
      "      ${2:$TM_FILENAME_BASE}",
      "    </div>",
      "  );",
      "}",
      ""
    ],
  },


  // storybook
  "Storybook Meta": {
    "prefix": "sm",
    "body": [
      "import type { Meta, StoryObj } from '@storybook/react';",
      "import { fn } from '@storybook/test';",
      "",
      "const meta = {",
      "  title: '$1',",
      "  component: ${2:Component},",
      "  tags: ['autodocs'],",
      "  parameters: {",
      "    layout: 'centered',",
      "  },",
      "  argTypes: {",
      "    children: { control: 'text' },",
      "  },",
      "  args: { ${3:event}: fn() },",
      "} satisfies Meta<typeof ${2:Component}>;",
      "",
      "export default meta;",
      "type Story = StoryObj<typeof meta>;",
      "",
      "export const Primary: Story = {",
      "  args: {",
      "    children: 'Button',",
      "  },",
      "};",
      ""
    ]
  },
  "Storybook Meta Render": {
    "prefix": "smr",
    "body": [
      "import type { Meta, StoryObj } from '@storybook/react';",
      "import { fn } from '@storybook/test';",
      "import { useArgs } from '@storybook/preview-api';",
      "",
      "const meta = {",
      "  title: '$1',",
      "  component: ${2:Component},",
      "  tags: ['autodocs'],",
      "  parameters: {",
      "    layout: 'centered',",
      "  },",
      "  argTypes: {",
      "    children: { control: 'text' },",
      "  },",
      "  args: { ${3:event}: fn() },",
      "} satisfies Meta<typeof ${2:Component}>;",
      "",
      "export default meta;",
      "type Story = StoryObj<typeof meta>;",
      "export const Primary: Story = {",
      "  args: {",
      "    children: 'Button',",
      "  },",
      "  render: (args) => {",
      "    const [{ isOpen }, updateArgs] = useArgs();",
      "",
      "    function onChange() {",
      "      updateArgs({ isOpen: !isOpen });",
      "    }",
      "",
      "    return <Checkbox {...args} onChange={onChange} isChecked={isChecked} />;",
      "  },",
      "};",
      ""
    ]
  },

}

us의 경우 변수명을 입력하고 tab을 누르면 set 다음 바로 나오는 첫번째 글자가 대문자로 바뀐다.

 

https://www.youtube.com/watch?v=umeqCopb96w 유튜브 강의
https://snippet-generator.app/ 이 사이트에 접속해서 편리하게 세팅해서 복사해와도 됨
https://code.visualstudio.com/docs/editor/userdefinedsnippets 관련 문서