Jump to definition 기능을 보완하는 Vscode extension 개발기

Hayoung Lee

Published in

bgpworks

5 min readAug 1, 2021

VScode extension을 개발한 이유

회사에서 vscode에서 reagent, clojurescript, css module 기반 프로젝트에 작업을 하고 있다. 이 프로젝트에서 사용하고 있는 빌드 구조는 아래와 같다.

(프로젝트 구조에 대한 상세한 글)

이 구조에서 Jump to definition 기능이 원하는대로 동작하지 않는 문제가 있었다. 아래와 같은 코드가 있을때 s/class-name의 정의로 이동하고자 할때 hello.css 파일이 아니라 hello.cljs 파일로 이동하는 문제가 있었다. 매번 파일을 직접 열면 되지만 꽤나 귀찮아져서 extension 을 하나 만들어서 jump to definition 을 커스터마이징 하기로 했다.

[:div
   {:class hello/class-name}
]

전체적인 개발 순서

우선 vscode에서jump to definition 같은 기능을 확장하려면 vscode extension 개발 docs 에서 Language Extensions 부분 중 Programmatic Language Features 문서를 확인하는 것이 좋다.

Programmatic Language Features가 auto completion, error checking, jump to definition 같은 기능들이다. Language server랑 관련있는 부분이고, Jump to definition 기능 확장을 위해서는 vscode.languages.registerDefinitionProvider API를 사용해야한다.

프로젝트 구조

내 프로젝트 구조는 간략하게 아래와 같다.

My Project
|- src
    |- extension.ts
    |- CSSModuleDefinitionProvider.ts
|- package.json

package.json 파일에서 activationEvents를 정하고 언제 실행될지를 지정한다.

"activationEvents": [    
    "onLanguage:clojure"  
],

extension.ts에는 activation 됬을때 일어나야하는 일들을 정의한다.

CSSModuleDefinitionProvider.ts

여기는 최종적으로 Location을 반환해주도록 custom definition provider를 정의하는 곳이다. 나는 내가 원하는 규칙에 따라 css 파일 위치를 찾아서, 해당 위치를 반환해주었다. 임의로 “/filepath/hello.css” 이렇게해도 그냥 거길 열어준다.

Vscode extension을 개발하면서 실행하는 방법

debugging 탭에서 run and debug 설정에서 Run Extension을 선택해서 실행한다

디버깅 탭에서 Run Extension을 하면 ‘Extension Development Host’ 가 열리는데 이 안에서 테스트하고 싶은 프로젝트를 열고 테스트를 할 수가 있다.

Extension 퍼블리싱 하는 방법

상세한건 여기를 참고하는 것이 좋다. 나는 extension을 스토어에 올리지 않고, vsce 패키지를 통해서 .vsix 파일을 생성하고 이 파일을 가지고 extension을 설치했다.

npm install -g vsce

설치한 후 extension 프로젝트 내에서 아래와 같은 명령어를 치면 extension을 패키지화 할 수 있다.

vsce package

이제 이 파일을 가지고 원하는 프로젝트로 이동한다음 extension 탭에서 vsix를 통한 설치옵션을 통해서 개발한 extension을 설치 할 수 있다.

개발 후기

예전에 vscode extension을 개발하겠다고 잠깐씩 본적이 있는데, 이번에 진짜 필요한 기능을 위해서 만들어보니 extension 개발하는 쪽도 잘알아두면 개발 효율성이 올라갈 수 있는 기능들을 많이 만들 수 있을 것 같다. 지금은 프로젝트가 css 파일을 열어주는 역할만 하는데 원하는 라인까지 포커싱 해 줄 수 있도록 기능을 확장하면 좋을 것 같다.

결과물

내 repository