Virtual Views (VS Code Extension)

여러 폴더에 흩어진 파일을 기능/레이어/데이터 흐름 등 원하는 관점으로 묶어 볼 수 있는 VS Code 확장입니다. 실제 파일 시스템은 그대로 둔 채, 설정 파일과 VS Code 상태만으로 가상 트리를 구성합니다.

핵심 특징

• 소스 파일 무변경: 실제 코드/리소스 파일은 건드리지 않고, Drag & Drop 시에도 설정 파일(virtualviews.json)만 업데이트합니다.
• 가상 트리: 여러 View 안에 Group을 정의하고, glob 패턴이나 명시적 파일 목록으로 파일 노드를 구성합니다.
• 멀티 루트 지원: 워크스페이스 폴더마다 별도의 virtualviews.json을 로드하고, 오류/경고도 폴더별로 표시합니다.
• 즉시 리프레시: Refresh 명령, 설정/워크스페이스 변경, virtualviews.json 변경을 감지해 트리를 다시 렌더링합니다.
• 파일명 검색: 캐시된 워크스페이스 파일 목록으로 파일명을 빠르게 검색해 바로 열 수 있습니다.
• 초기 설정 생성: 설정 파일이 없을 때 명령 하나로 기본 virtualviews.json을 생성할 수 있습니다.
• 그룹 요약 표시: 각 그룹에 현재 해석된 파일 개수를 표시합니다.
• Drag & Drop: Virtual Views 내부/기본 Explorer에서 끌어다 놓기만 하면 include 목록이 자동으로 이동·추가됩니다. 폴더 드롭은 폴더/**/* 패턴 또는 현재 파일 목록 snapshot 중 선택할 수 있습니다.
• 분리된 View Source: 팀 공유 config, 개인 workspace/global state, generated cache, Git status view를 별도 source provider로 로드합니다.

폴더 구조

vscode-virtual-views/
├── package.json
├── tsconfig.json
├── media/icon.svg
├── native/
│   └── virtual_views_server/
│       └── src/main.rs
└── src/
    ├── extension.ts
    ├── config.ts
    ├── virtualViewManager.ts
    ├── dndController.ts
    ├── fileResolver.ts
    ├── nativeResolverClient.ts
    ├── treeDataProvider.ts
    └── types.ts

설치 및 빌드

1. 의존성 설치:

   npm install
   

2. 빌드:

   npm run build
   

   이 명령은 TypeScript 컴파일, native resolver 빌드, VSIX 패키징을 함께 수행합니다.
3. 개발 중에는 TypeScript만 감시하려면 아래 명령을 사용합니다.

   npm run watch
   

4. VS Code에서 F5로 확장을 실행하거나, Extension Development Host에서 로컬 디버깅을 시작합니다.

사용 방법

1. 워크스페이스 루트 또는 .vscode 폴더에 virtualviews.json을 작성합니다. 설정 파일이 없다면 Virtual Views: Create Config 명령으로 기본 파일을 생성할 수 있습니다.
2. VS Code 사이드바의 Virtual Views 뷰에서 구성한 View/Group/파일을 탐색합니다.
3. 파일 노드를 더블 클릭하면 에디터가 열리고, 컨텍스트 메뉴로 Explorer에서 위치를 확인할 수 있습니다.
4. 상단 Refresh 버튼 또는 Virtual Views: Refresh 명령으로 트리를 다시 로드합니다.
5. Virtual Views: Search File by Name 명령으로 파일명을 검색해 바로 엽니다. 검색으로 연 파일이 Virtual Views 안에 포함되어 있으면 트리에서도 자동으로 선택됩니다.
6. 그룹 컨텍스트 메뉴에서 include/exclude 패턴을 추가하거나 해당 config 파일을 바로 열 수 있습니다.
7. Drag & Drop을 사용하면 include 리스트가 즉시 업데이트되며, 중복 항목은 자동으로 방지됩니다.

Drag & Drop

• Virtual Views 내부 이동: 동일 워크스페이스의 다른 그룹으로 파일 노드를 끌어놓으면 기존 그룹의 include에서 제거되고, 대상 그룹 include에 상대 경로가 추가됩니다.
• Explorer → Virtual Views: 기본 Explorer에서 파일을 그룹 노드 위로 드롭하면 해당 그룹 include 배열에 상대 경로가 추가됩니다.
• Explorer 폴더 → Virtual Views: 폴더를 그룹 노드 위로 드롭하면 relative/folder/**/* 패턴으로 추가할지, 현재 파일 목록을 files 배열에 snapshot으로 고정할지 선택합니다.
• Drop 이후 곧바로 config JSON을 저장하며, 실제 파일 위치나 이름은 바뀌지 않습니다.
• 현재는 동일 워크스페이스와 동일 view source 내부 Drag & Drop만 지원합니다(다중 루트/다른 source 간 이동은 경고 후 무시).

설정 스키마 요약

{
  "views": [
    {
      "id": "byFeature",
      "label": "By Feature",
      "groups": [
        {
          "id": "featureHome",
          "label": "Home",
          "include": ["pages/home/**/*.{ts,tsx}", "api/home/**/*.ts"],
          "exclude": ["**/*.spec.ts"],
          "children": [
            /* 하위 그룹 */
          ],
        },
        {
          "id": "featureAuth",
          "label": "Auth",
          "files": [
            "pages/login.tsx",
            "api/auth/login.ts",
            "entities/user/AuthUser.ts",
          ],
        },
      ],
    },
  ],
}

• virtualViews.configPath 설정(기본값 .vscode/virtualviews.json)으로 경로를 바꿀 수 있습니다.
• 멀티 루트 워크스페이스에서는 각 폴더마다 설정 파일을 따로 둘 수 있습니다.
• type 필드는 사용하지 않습니다. include는 glob 패턴, files는 명시적 파일 목록으로 해석됩니다.
• files에 적힌 파일이 없으면 그룹 아래에 warning node로 표시됩니다.

View Source

• Config file: 팀 공유용 .vscode/virtualviews.json입니다. Drag & Drop, 패턴 추가, 그룹 추가가 이 파일에 저장됩니다.
• Workspace state: 현재 워크스페이스에서만 쓰는 개인용 view 저장소입니다.
• Global state: 여러 워크스페이스에서 재사용 가능한 개인용 view 저장소입니다.
• Generated cache: 자동 생성/임시 view를 위한 별도 cache 파일입니다.
• Git status: git status --porcelain 결과로 만드는 read-only 동적 view입니다. Modified, Added, Deleted, Untracked 그룹으로 나뉩니다.

주요 명령

내부 아키텍처

• config.ts: 설정 파일 로딩 및 검증, 오류 수집.
• virtualViewManager.ts: 로드한 설정을 기억하고 TreeDataProvider가 쓰기 쉬운 형태로 노출하며, Drag & Drop 요청 시 config를 업데이트.
• fileResolver.ts: 그룹의 include/files 정보를 실제 vscode.Uri 목록으로 해석하고 워크스페이스 파일 목록을 캐시.
• nativeResolverClient.ts: native resolver 프로세스와 JSON-RPC 형태로 통신.
• viewSources.ts: config 파일, 개인 state, generated cache, Git 동적 view source를 분리해서 로드.
• treeDataProvider.ts: View/Group/File/Message 노드를 생성하고 VS Code 트리를 구현.
• dndController.ts: TreeView Drag & Drop 이벤트를 받아 viewManager API를 호출하고 refresh를 트리거.
• extension.ts: 명령과 이벤트를 등록하고, 설정 변경/워크스페이스 변경 시 재로딩.
• native/virtual_views_server: Rust 기반 glob resolver. 워크스페이스 파일 목록과 glob matcher를 캐시합니다.

제한 및 로드맵

• Drag & Drop은 동일 워크스페이스 폴더와 동일 view source 안에서만 동작합니다. 다른 워크스페이스/source로 이동하면 경고 후 무시됩니다.
• Git status view는 read-only입니다. 편집 액션은 config/state/cache source에서만 저장됩니다.
• 그룹별 파일 개수는 현재 resolver 결과를 기반으로 표시되며, 파일 변경이나 config 변경 시 캐시가 무효화됩니다.
• 네이티브 resolver는 워크스페이스별 파일 목록과 glob matcher를 캐시하고, 파일 변경 watcher가 캐시를 무효화합니다.
• 나중에 개인 view 생성/관리 명령, generated view 생성 API, Git view 필터 옵션 등 확장 기능을 고려할 수 있습니다.

라이선스

• 프로젝트 정책에 맞춰 자유롭게 추가하세요.