SpreadJS 디자이너 VSCode 플러그인

SpreadJS 디자이너 VSCode 확장은 전체 기능을 갖춘 SpreadJS 디자이너를 Visual Studio Code에 통합하여 VSCode 작업 영역 내에서 스프레드시트 파일을 직접 미리 보고 편집할 수 있도록 합니다.

이 확장은 사용자 지정 편집기로 동작하며 VSCode의 파일 시스템 모델, 테마 시스템 및 보안 제약 조건에 맞게 동작합니다.

image-20260312.7a9afc.png

지원되는 파일 형식

이 확장은 다음 형식에 대한 편집 기능을 제공합니다.

.sjs
.ssjson
.xlsx
.xltx
.xlsm
.xltm
.csv

이러한 형식에 대해 사용자 지정 편집기로 등록되며 VSCode에서 기본 편집기로 설정할 수 있습니다.

설치

요구 사항

Visual Studio Code(Desktop) 버전 1.107.0 이상

다음 위치에서 VSCode 버전을 확인할 수 있습니다.

Help → About

Visual Studio Code Marketplace에서 설치

Visual Studio Code를 엽니다.
확장(Extensions) 보기(Ctrl+Shift+X)로 이동합니다.
다음을 검색합니다.
1. SpreadJS XLSX Editor
2. MESCIUS
Mescius에서 게시한 확장을 선택합니다.
설치(Install)를 클릭합니다.

또는 Marketplace 페이지에서 설치할 수도 있습니다.

설치 후

창을 다시 로드할 필요가 없습니다.
확장은 지원되는 파일 형식의 기본 편집기로 자동 설정되지 않습니다.

기본 편집기로 설정하려면:

지원되는 파일(예: .xlsx)을 엽니다.
파일 탭을 마우스 오른쪽 버튼으로 클릭합니다.
Open with SpreadJS를 선택합니다.

image-20260420.628a17.png

파일 작업

파일 열기

지원되는 파일은 SpreadJS 디자이너에서 직접 열립니다.
다음 메뉴를 사용하여 명시적으로 파일을 열 수도 있습니다.
Explorer → 마우스 오른쪽 버튼 클릭 → Open with SpreadJS

암호로 보호된 XLSX

보호된 .xlsx 파일을 열 때:

암호 입력 대화 상자가 표시됩니다.
인증에 성공하면 파일이 열립니다.

passS-20260420.f8800f.gif

인증에 실패하면 오류 메시지가 표시되고 탭이 닫힙니다.

passF-20260420.821f77.gif

파일 로드 오류

파일을 열 수 없는 경우 오류 세부 정보를 표시하는 대화 상자가 나타납니다.

openFailed-20260312.4a57d5.gif

openFailed2-20260312.ec0a2d.gif

편집 및 저장

파일이 수정되면:

VSCode는 탭을 저장되지 않은 상태로 표시합니다.
Ctrl+S를 눌러 저장합니다.

저장하지 않은 상태로 수정된 파일을 닫으면 VSCode가 확인 메시지를 표시합니다.

image-20260312.4afb89.png

새 파일 만들기

이 확장은 새 스프레드시트 파일을 생성하는 명령을 등록합니다.

파일을 만들려면:

Ctrl+Shift+P를 누릅니다.
해당 SpreadJS 명령을 실행합니다.

새 통합 문서는 구성된 통합 문서 옵션에 따라 초기화됩니다.

VSCode 통합

사용자 지정 파일 메뉴

VSCode는 파일 시스템을 통해 파일을 관리하므로 디자이너 온라인의 일부 기능은 확장 환경에서 적용되지 않습니다.

다음 메뉴 항목은 제거되었습니다.

New
Open
Import
Save
Print

VSCode 확장은 window.print API를 호출할 수 없으므로 인쇄는 지원되지 않습니다.

내보내기

내보내기(Export)는 다른 이름으로 저장(Save As)처럼 동작합니다.

SpreadJS 형식으로 저장하려면 다음 메뉴를 사용합니다.

Export > SpreadJS File

image-20260312.1755df.png

리본 모드

다음 두 가지 리본 모드를 지원합니다.

classic
toolbar

디자이너 UI에서 모드를 전환하거나 settings.json에서 기본값을 정의할 수 있습니다.

{
  "spreadjs": {
    "ribbonMode": "classic"
  }
}

ribbonMode-20260312.cd1e71.gif

테마 지원

디자이너는 활성 VSCode 테마에 자동으로 맞춰집니다.

밝은 테마 → 밝은 UI
어두운 테마 → 어두운 UI

별도의 설정은 필요하지 않습니다.

theme-20260312.fed03a.gif

언어 및 문화권

기본적으로 확장은 VSCode의 표시 언어를 사용합니다.

다음과 같이 이 동작을 재정의할 수 있습니다.

{
  "spreadjs": {
    "language": "zh",
    "culture": "zh-cn"
  }
}

파일 아이콘

이 확장은 다음 형식에 대해 사용자 지정 아이콘 image-20260312.1ddd34.png 을 제공합니다.

.sjs
.ssjson

이를 통해 Explorer에서 파일을 더 쉽게 식별할 수 있습니다.

상태 표시줄

확장은 Powered by MESCIUS SpreadJS. 상태 표시줄 항목을 추가합니다.

클릭하면 SpreadJS 제품 홈페이지가 열립니다.

구성

모든 구성은 settings.json에서 정의합니다.

통합 문서 옵션

새 빈 통합 문서를 만들 때 적용됩니다.

{
  "spreadjs": {
    "workbookOptions": {
      "allowDynamicArray": true,
      "allowInvalidFormula": true
    }
  }
}

지원되는 속성은 API 참조의 GC.Spread.Sheets.IWorkbookOptions를 참조하세요.

파일 열기 및 가져오기 옵션

파일을 로드할 때 적용됩니다.

{
  "spreadjs": {
    "openOptions": {},
    "importOptions": {},
    "importCsvOptions": {}
  }
}

다음을 참조하세요.

호환성 및 제약 사항

버전 호환성

이 확장은 항상 최신 번들 SpreadJS 런타임에서 실행됩니다.

파일이 다른 메이저 또는 마이너 버전에서 생성된 경우 호환성 제한이 적용될 수 있습니다.

이러한 파일을 열면:

알림이 표시됩니다.
최신 버전으로 원본 파일이 덮어써지는 것을 방지하기 위해 직접 저장(Save)이 비활성화됩니다.

대신 다른 이름으로 저장(Save As)(Export)을 사용하여 새 파일로 저장할 수 있습니다.

파일은 계속 편집할 수 있지만 원래 버전으로 다시 저장할 수는 없습니다.

image-20260312.eefe23.png

왜 저장이 비활성화되나요?
직접 저장하면 파일이 현재 런타임 버전으로 업그레이드되고 버전 메타데이터가 영구적으로 변경됩니다.
의도하지 않은 업그레이드를 방지하기 위해 확장은 버전 계열이 일치하지 않을 경우 직접 저장을 차단합니다.

키보드 단축키 충돌

디자이너의 내부 명령 팔레트 단축키는 VSCode의 파일로 이동(Ctrl+P)과 충돌합니다.

따라서 다음으로 변경되었습니다.

Ctrl + Alt + P

외부 하이퍼링크

VSCode 보안 정책으로 인해 외부 링크를 열려면 사용자 확인이 필요합니다.

hyperlink-20260312.f4244d.gif

라이선스

확장을 설치하거나 활성화하는 데 라이선스 키는 필요하지 않습니다.

상용 라이선스가 없으면 디자이너 오른쪽 아래에 평가판 워터마크가 표시됩니다.

image-20260312.44bd5e.png