에디터 지원

설치

typeshade.vscode-typeshade를 Visual Studio Marketplace에서 설치합니다. Open VSX에서 확장을 받는 에디터는 Open VSX를 씁니다. 터미널에서는 한 줄로 설치합니다.

code --install-extension typeshade.vscode-typeshade

데스크톱에서는 VS Code 1.90 이상이 필요합니다. 확장은 작업 영역이 쓰는 TypeScript 버전에 TypeScript 서버 플러그인을 켜 주므로, 자체 typescript를 고정해 둔 저장소에서도 플러그인이 동작합니다.

VS Code에서

"use typeshade"로 시작하는 파일을 열면 확장이 컴파일러와 같은 기준으로 답합니다.

• 진단, 호버, 자동 완성, 시그니처 도움말, 정의로 이동, 참조, 이름 바꾸기는 TypeScript 서버 플러그인을 거쳐 TypeShade 언어 서비스가 답합니다. 셰이더 파일에 뜨던 TypeScript 자체의 오류는 사라지고, 다른 TypeScript 파일은 그대로 둡니다.
• TypeShade: Show WGSL, TypeShade: Show GLSL, TypeShade: Show Reflection은 에디터 옆에 미리 보기를 엽니다. 미리 보기는 활성 파일을 따라가며 입력할 때마다 다시 컴파일합니다.
• TypeShade: Show Canvas는 미리 보기에서 셰이더를 WebGPU로 그립니다. WebGPU 어댑터가 있는 VS Code 웹뷰가 필요하며, 어댑터가 없으면 그렇다는 안내를 보여 줍니다.
• TypeShade: Run Entry on CPU는 파일의 함수 하나를 입력한 인자로 CPU에서 실행합니다.

웹용 VS Code

vscode.dev를 비롯한 웹용 VS Code 페이지에서는 같은 플러그인이 셰이더 파일에 진단, 호버, 셰이더 파일 사이의 import를 제공합니다. 위 명령은 모두 데스크톱 버전이 필요합니다. 웹에서는 명령마다 그렇다는 메시지만 보여 줍니다.

조건이 두 가지 있습니다.

• 웹용 VS Code 1.110 이상. 이보다 낮은 버전은 플러그인을 불러오지 않아서 셰이더 파일에 TypeScript 자체의 오류가 그대로 남습니다.
• 교차 출처 격리(cross-origin isolated)가 된 페이지. 격리되지 않으면 TypeScript 서버가 브라우저에서 의미 검사를 하지 않으므로 TypeShade도 TypeScript도 오류를 보고하지 않습니다. 직접 호스팅하는 웹용 VS Code에는 Cross-Origin-Opener-Policy와 Cross-Origin-Embedder-Policy 헤더가 필요합니다.

조건이 하나라도 빠지면 확장이 경고를 한 번 보여 줍니다. 웹 빌드는 Chromium에서 웹용 VS Code 1.110과 1.139.1로 시험했고 다른 브라우저는 써 보지 않았습니다. vscode.dev에서는 배포된 확장을 직접 확인했습니다. 페이지와 TypeScript 서버가 교차 출처 격리 상태이고, 진단과 호버가 나타납니다. github.dev는 확인하지 않았고, 자동 완성, 시그니처 도움말, 참조, 이름 바꾸기에는 브라우저 시험이 없습니다.

Playground 연동

Playground의 폴더로 내려받기 버튼은 작업 영역을 폴더째 담은 zip 파일로 내려받습니다. 폴더에는 파일, 메인 파일과 패스를 적은 typeshade.json, 이 확장을 권장하는 설정이 들어 있습니다. 바로 옆의 VS Code에서 열기 버튼은 작업 영역을 확장에 넘기고, 확장은 폴더를 물은 뒤 파일을 쓰고 그 폴더를 엽니다.

반대 방향에서는 TypeShade: Open in Playground가 활성 파일과 그 파일이 가져오는 파일, 패스를 Playground에서 엽니다. TypeShade: Open Playground Link는 Playground 링크가 담은 작업 영역을 폴더에 쓰고 엽니다. 두 명령 모두 데스크톱 버전이 필요합니다.

코딩 에이전트

@typeshade/mcp는 npm으로 받는 Model Context Protocol 서버입니다. 코딩 에이전트에 에디터가 보여 주는 진단, 컴파일러가 내는 WGSL과 GLSL, 타입과 탐색 정보, 셰이더 함수의 CPU 실행 결과를 줍니다. Claude Code, Codex, Cursor, VS Code 에이전트 모드, Gemini CLI가 이 서버를 실행할 수 있습니다. Claude Code에서는 플러그인 하나가 서버와, 언어를 가르치는 스킬을 함께 설치합니다.

/plugin marketplace add typeshade/vscode-typeshade
/plugin install typeshade@typeshade

다른 클라이언트는 npx -y @typeshade/mcp를 실행하며, 클라이언트별 설정은 패키지 README에 있습니다.

확장과 서버는 typeshade/vscode-typeshade 저장소에서 개발합니다.