옵시디언 RunJS: 파일 탐색기에 "VSCode에서 열기" 메뉴 추가하기

 

RunJS를 써서 옵시디언(Obsidian)의 파일 탐색기 컨텍스트 메뉴에 사용자 정의 메뉴를 추가하는 방법을 소개합니다. 이를 통해 파일 탐색기에서 특정 파일을 Visual Studio Code(VSCode)로 여는 기능을 구현할 수 있습니다.

 

이전 글 (옵시디언 RunJS: 외부 프로그램 실행하기 1 (VSCode))에서는 활성화된 노트를 VSCode에서 여는 방법을 다루었는데, 이번에는 옵시디언의 파일 탐색기에서의 활용법을 알아보겠습니다.

옵시디언의 파일 탐색기와 탭의 컨텍스트 메뉴에 추가된 사용자 정의 메뉴

소스 코드 작성

실행 소스 코드 작성

다음 코드 블럭을 옵시디언의 노트에 복사하여 붙여 넣으세요. 이 코드는 파일 탐색기와 탭의 컨텍스트 메뉴에 "Open with VSCode" 항목을 추가합니다.

```js RunJS="{n:'Event/file-menu/Open with VSCode'}"
// openVSCode 모듈에서 VSCode에서 파일을 여는 openVSCode 함수를 가져옵니다.
import { openVSCode } from "Examples/VSCode/openVSCode";

// 옵시디언에서 제공하는 이벤트 핸들러로부터 전달된 인자들을 구조 분해 할당으로 받습니다.
const [menu, file, source, leaf] = arguments;
// console.log("arguments:", arguments); // DevTools(Ctrl + Shift + I)에서 확인해 보기

// 파일 탐색기 메뉴에 새로운 항목을 추가합니다.
menu.addItem((item) => {
    // DOM 요소를 메뉴 항목에 추가합니다.
    menu.dom.appendChild(item.dom);

    // 메뉴 항목의 제목, 아이콘, 섹션을 설정합니다.
    item.setTitle("Open with VSCode") // 제목: "Open with VSCode"
        .setIcon("document")          // 아이콘: document 아이콘
        .setSection("open")           // 섹션: "open" 섹션 그룹에 묶음
                                      // "file-explorer-context-menu"에서는 안됨. "tab-header"에서는 됨.

        // 사용자가 메뉴를 클릭했을 때 실행될 동작을 정의합니다.
        .onClick(async () => {
            // file.path는 옵시디언 Vault에서의 상대 경로
            // app.vault.adapter.getFilePath는 URL 형식으로 변환합니다.(file:///D:/...처럼)
            // 'url' 모듈(Node.js의 기본 모듈)을 사용하여 파일 시스템 형식으로 변환합니다.(D:\...처럼)
            const url = require('url');
            let filePath = url.fileURLToPath(
                app.vault.adapter.getFilePath(file.path) // 현재 파일의 경로를 옵시디언에서 가져옵니다.
            );

            // VSCode를 열어 해당 파일을 엽니다.
            openVSCode(filePath);
        });
});
```

 

이 소스 코드에서 사용된 Menu.addItem() 메서드는 다음 옵시디언 레퍼런스를 참고하면 됩니다.

 

Menu.addItem() method - Developer Documentation
https://docs.obsidian.md/Reference/TypeScript+API/Menu/addItem

 

그리고 이 소스 코드는 RunJS에서 Workspace.on('file-menu') 메서드를 통해 이벤트 핸들러를 설정하게 됩니다. arguments에 대한 정보를 얻으려면 다음 옵시디언 레퍼런스를 보면 됩니다.

 

Workspace.on('file-menu') method - Developer Documentation
https://docs.obsidian.md/Reference/TypeScript+API/Workspace/on('file-menu')

모듈 소스 코드 작성

위 실행 소스 코드에서는 "openVSCode"라는 모듈을 사용하고 있고 이 모듈 또한 "RunJS/Utils"라는 모듈을 사용합니다. 이 두 개의 모듈들을 설치하는 방법은 이전글 "옵시디언 RunJS: 외부 프로그램 실행하기 1 (VSCode)"에서 볼 수 있습니다.

• openVSCode
  옵시디언 RunJS: 외부 프로그램 실행하기 1 (VSCode) - 2.2 모듈 코드 소스: 노트 안의 코드 블럭
  https://eoureo.tistory.com/entry/옵시디언-RunJS-외부-프로그램-실행하기-1-VSCode#2.2-모듈-코드-소스-노트-안의-코드-블럭
• RunJS/Utils
  옵시디언 RunJS: 외부 프로그램 실행하기 1 (VSCode) - 2.3 모듈 코드: RunJS-Utils.mjs 파일
  https://eoureo.tistory.com/entry/옵시디언-RunJS-외부-프로그램-실행하기-1-VSCode#2.3-모듈-코드-runjs-utils.mjs-파일

소스 코드 확인

다음 그림에서 보이는 것처럼 RunJS 코드목록 패널에 실행 코드와 모듈 코드들이 설치된 것을 확인할 수 있습니다.

이벤트 핸들러에 추가

RunJS 플러그인 설정에서 이벤트 핸들러를 추가하여 기능을 적용하세요:

1. 옵시디언 설정에서 RunJS > Event handler로 이동합니다.
2. + 버튼을 눌러 새 이벤트 핸들러를 만듭니다.
3. 실행할 코드는 위에서 작성한 실행 소스 코드를 선택합니다.
4. 이벤트 객체는 "작업공간(workspace)"을 선택합니다.
5. 이벤트 이름은 "file-menu"로 설정합니다.
6. 이벤트를 "사용(Enable)"으로 설정합니다.

이렇게 설정하게 되면 RunJS에서는 Workspace.on('file-menu') 메서드로 파일 탐색기와 탭에 컨텍스트 메뉴를 추가합니다.

RunJS 플러그인 설정에서 이벤트 핸들러를 추가

실행 확인

옵시디언의 파일 탐색기 또는 탭에서 파일을 선택한 후 마우스 오른쪽 버튼을 클릭하여 컨텍스트 메뉴를 열어보세요. "Open with VSCode" 메뉴 항목이 나타납니다. 이 항목을 클릭하면 파일이 Visual Studio Code에서 열립니다.

 

 

추가: ES 모듈 형식의 실행 소스 코드

위 Node.js 모듈 형식의 코드를 ES 모듈 방식으로 변환하면 다음과 같습니다. 이 역시 RunJS에서는 사용할 수 있습니다.
옵시디언의 노트에 넣으면 위 그림들에서 보는 것같이 "Open with VSCode (ES)" 추가된 것을 볼 수 있고 "Open with VSCode"와 똑같이  작동합니다.

```js RunJS="{n:'Event/file-menu/Open with VSCode (ES)'}"
// openVSCode 모듈에서 VSCode에서 파일을 여는 openVSCode 함수를 가져옵니다.
import { openVSCode } from "Examples/VSCode/openVSCode";

// 'url' 모듈 가져오기 (Node.js의 기본 모듈)
import { fileURLToPath } from 'url';

// 옵시디언에서 제공하는 이벤트 핸들러로부터 전달된 인자들을 구조 분해 할당으로 받습니다.
const [menu, file, source, leaf] = arguments;
// console.log("arguments:", arguments); // DevTools(Ctrl + Shift + I)에서 확인해 보기

// 파일 탐색기 메뉴에 새로운 항목을 추가합니다.
menu.addItem((item) => {
    // DOM 요소를 메뉴 항목에 추가합니다.
    menu.dom.appendChild(item.dom);

    // 메뉴 항목의 제목, 아이콘, 섹션을 설정합니다.
    item.setTitle("Open with VSCode (ES)") // 제목: "Open with VSCode"
        .setIcon("document")          // 아이콘: 문서 아이콘
        .setSection("open")           // 섹션: "open" 섹션으로 설정
                                      // "file-explorer-context-menu"에서는 안됨. "tab-header"에서는 됨.

        // 사용자가 메뉴를 클릭했을 때 실행될 동작을 정의합니다.
        .onClick(async () => {
            // file.path는 옵시디언 Vault에서의 상대 경로
            // app.vault.adapter.getFilePath는 fileURL 형식의 경로를 가져옵니다.(file:///D:/...처럼)
            // fileURLToPath을 사용하여 파일시스템 형식의 파일 경로(D:\...처럼)를 가져옵니다.
            const filePath = fileURLToPath(app.vault.adapter.getFilePath(file.path));

            // VSCode를 열어 해당 파일을 엽니다.
            openVSCode(filePath);
        });
});
```

마무리

옵시디언의 파일 탐색기를 사용자화하여 작업 환경을 더욱 효율적으로 만들어 보세요.

다음 글에서는 "클립보드로 파일 경로 복사"와 "Total Commander에서 열기" 메뉴를 추가 방법을 다룰 예정입니다.
위 실행 소스 코드를 아주 조금만 바꾸면 됩니다. 한번 시도해 보세요. 😊

 

이 글은 GitHub Discussions에서도 확인할 수 있습니다.

 

궁금한 점이나 의견이 있다면 댓글로 남겨 주세요!