내용에 앞서

프로젝트 규모가 커질수록 하나의 기능을 구현하기 위해 생성되는 파일도 함께 늘어난다. React, Next.js 프로젝트에서는 컴포넌트 파일뿐만 아니라 테스트 코드, 타입 정의, 빌드 결과물, 설정 파일 등 서로 관련된 파일들이 같은 위치에 존재하는 경우가 많다.

파일 개수가 많아질수록 Explorer에서 원하는 파일을 찾기 어려워지고, 프로젝트 구조를 파악하는 데에도 시간이 더 소요된다. VSCode에서는 이러한 문제를 해결하기 위해 File Nesting 기능을 제공한다.

File Nesting이란 무엇인가

File Nesting은 서로 관련된 파일을 하나의 부모 파일 아래로 묶어서 표시하는 Explorer 기능이다.

중요한 점은 실제 파일 위치가 변경되는 것이 아니라 Explorer에서만 계층 구조로 보여준다는 것이다.

Button.tsx
Button.ts
Button.test.ts
Button.test.tsx
Button.stories.tsx

하나의 폴더에 모든 기능을 넣는다면 위처럼 보여진다.

src
 └── Button.tsx
      ├── Button.ts
      ├── Button.test.ts
      └── Button.test.tsx

File Nesting을 적용하면 깔끔하게 위처럼 표시된다.

개인적으로 깔끔하다고 생각하지만, 팀과 협의해서 결정하는 것이 좋다.

실제 폴더 구조 이미지로 비교하기

설정 방법

VSCode settings.json에 아래 세 가지 옵션을 추가한다.

"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
  "*.tsx": "${capture}.ts, ${capture}.test.ts, ${capture}.test.tsx",
}

enabled로 기능을 활성화하고, expand를 false로 설정하면 Nesting 파일이 기본적으로 접힌 상태로 표시된다.

patterns에서 부모 파일과 하위로 묶을 파일의 규칙을 정의한다. ${capture}는 부모 파일의 이름(확장자 제외)을 그대로 참조한다. 예를 들어 Button.tsx가 있다면 Button.ts, Button.test.ts, Button.test.tsx가 자동으로 하위에 묶인다.

"explorer.fileNesting.patterns": {
  ...
  "package.json": "pnpm-lock.yaml"
}

여러 파일을 묶고 싶다면 ,로 중첩될 파일을 추가할 수 있다.
// "package.json": "pnpm-lock.yaml, next.config.js, next-env.d.ts"

만약 package.json, pnpm-lock.yaml 을 묶고 싶다면, 위와 같이 설정하면 된다.

VSCode File Nesting으로 깔끔하게 목록 정리 방법