VS Code에서 편안하게 Next.js를 작성하기 위한 스니펫

이 기사의 목표

새 구성 요소를 만들 때 항상 작성하는 스니펫을 만들어 더 쉽게 만듭니다.

VS Code를 사용하면 스니펫을 등록할 수 있습니다.

두 가지 유형이 있습니다.

명령 팔레트에서 전체적으로 VS Code의 스니펫을 설정합니다.( Reference )

*.code-snippets 디렉토리에 .vscode와 일치하는 파일 이름을 넣어 프로젝트별로 스니펫을 사용합니다.( Reference )

프로젝트별로 구성할 때 scope 속성을 사용하여 사용할 언어를 지정할 수 있습니다.

놀랍도록 다기능!

당신은 많은 일을 할 수 있습니다.
쓰기 귀찮아서 다 쓸 수 없으니 자세한 내용은 Documentation 로 가주세요.
예로서

파일 이름, 디렉터리 이름 등을 포함합니다(정규식도 사용할 수 있음).

기본값 등을 선택할 수 있습니다.

조각을 사용한 후 커서 위치를 지정할 수 있습니다.

Next.js에서 사용하는 스니펫

파일 이름과 동일한 이름으로 함수 구성 요소 템플릿을 만듭니다.

{
  "new Function Component": {
    "prefix": "FC", // ⬅ String to be entered into the editor for snippet call
    "body": [ //⬅ The string to be inserted. To enter multiple lines, write an array.
      "import { FC } from 'react';",
      "", 
      "type Props = {};",
      "const ${1:$TM_FILENAME_BASE}: FC<Props> = ({}) => {",
      "  return <></>;",
      "};",
      "export default ${1:$TM_FILENAME_BASE};"
    ],
    "description": "Template of new FC",
  }
}

스니펫이 있는 파일 이름이 Card.tsx인 경우
출력은

import { FC } from 'react';

type Props = {};
const Card: FC<Props> = ({}) => {
  return <></>;
};
export default Card;

파일 이름은 구성 요소 이름으로 사용됩니다.

디렉터리 이름과 동일한 이름으로 NextPage 템플릿을 만듭니다.

/pages/**/<page_name>/Index.tsx에 배치할 NextPage 템플릿을 만들고 싶습니다.

이름이 <Page_name> 인 구성 요소를 만들고 싶습니다.

{
  "new Next Page": {
    "prefix": "nextPage",
    "body": [
      "import type { NextPage } from 'next';",
      /* These lines are set differently for each project */
      "import HeadWrapper from '@/components/layout/HeadWrapper';", 
      "import Layout from '@/components/layout/Layout';",
      "import NeedLogin from '@/components/layout/NeedLogin';",
      "",
      /* POINT① */
      "const ${TM_DIRECTORY/.*\\/(.)(.+)$/${1:/upcase}$2/}: NextPage = () => {", 
      "  return (",
      "    <HeadWrapper>",
      "      <NeedLogin>",
      "        <Layout>",
      "          <main></main>",
      "        </Layout>",
      "      </NeedLogin>",
      "    </HeadWrapper>",
      "  );",
      "};",
      "",
      "export default ${TM_DIRECTORY/.*\\/(.)(.+)$/${1:/upcase}$2/};"
    ],
    "scope": "typescriptreact"
  }
}

POINT① 에서 다음이 수행됩니다.

TM_DIRECTORY는 절대 경로이므로 정규식을 사용하여 파일이 있는 디렉터리 이름을 가져옵니다

.

디렉토리 이름의 첫 글자를 대문자로 표시

스니펫을 사용하는 파일의 경로가 pages/**/mypage/Index.tsx 인 경우 출력은 다음과 같습니다.

import type { NextPage } from 'next';
import HeadWrapper from '@/components/layout/HeadWrapper';
import Layout from '@/components/layout/Layout';
import NeedLogin from '@/components/layout/NeedLogin';

const Mypage: NextPage = () => {
  return (
    <HeadWrapper>
      <NeedLogin>
        <Layout>
          <main></main>
        </Layout>
      </NeedLogin>
    </HeadWrapper>
  );
};

export default Mypage;

스니펫 확장이 이미 존재합니다😇.

React 스니펫 확장은 이미 marketplace 에 있습니다.

그러나 나는.

스니펫을 기억하기 어렵습니다.

Fragment 대신 기본적으로 div로 설정됩니다.

소품과 유형이 자동으로 연결되지 않습니다.

구성 요소 이름은 항상 디렉토리 이름이 아니라 파일 이름입니다.

~~제가 직접 만든 스니펫에 더 애착이 갑니다.

이러한 이유로 원본 스니펫을 계속 사용하겠습니다.