VS Code extension 예제 리뷰 #2

VS Code 상태바, TreeView, Code assist, Text editor decorator 등을 어떻게 다루는지 확인해 봅니다.

2023-10-28

Status Bar Sample

선택영역 텍스트의 라인 수를 보여줍니다.

vscode.window.createStatusBarItem API로 vscode.StatusBarItem 객체를 생성하여 특정 역역을 제어합니다.

vscode.window.onDidChangeActiveTextEditor, vscode.window.onDidChangeTextEditorSelection 이벤트에 따라 상태 바를 업데이트 합니다.

Tree View Sample

Tree View API | Visual Studio Code Extension API

contribution points

viewsContainers, views, commands, menus, configuration을 확장 합니다.

node dependencies view

워크스페이스 내에 있는 package.json 파일을 찾아 의존 패키지 목록을 tree view로 보여 줍니다.

vscode.window.registerTreeDataProvider API를 사용하여 vscode.TreeDataProvider를 확장하는 인스턴스를 반환합니다.

viewsContainers 확장은 일종의 view group 입니다. View group은 explorer 등이 위치하는 좌/우측 영역을 나타내는 activitybar(Activity Bar)와 하단 영역인 panel(Panel)이 가능합니다.

views 확장은 각 view group에 속한 view(Views)를 정의합니다. VS Code를 설치하고 extension이 없는 상태에서 디폴트로 존재하는 activity bar는 Explorer(explorer), Debug(debug), SCM(scm) 등이 있고 해당 view group에 원하는 view 객체를 추가할 수 있습니다.

기본적으로 예제는 새로운 Activity bar item인 Package ExplorerviewContainers로 확장하고 해당 view group에 Node Dependencies라는 view를 확장합니다.

하지만, 분석 당시에 activity bar에 아이콘을 표시하는 동작을 확인하지 못 했습니다.

View action은 다음과 같이 다양한 위치에서 확장 가능합니다.

view actions

위에서 보이는 location, group 값을 참고하여 원하는 위치에 필요한 확장을 package.json에 기술합니다.

Task Provider Sample

Task Provider | Visual Studio Code Extension API

taskDefinitions을 확장하여 task.json에 정의할 수 있는 작업을 확장 패키지를 통해 제공할 수 있습니다.

Multi Root Sample

multi root sample

Workspace는 여러 project를 모아 놓은 그룹입니다.

workspace.workspaceFolders API를 통해 VS Code가 workspace를 열었는지 단일 프로젝트를 열었는지 확인할 수 있습니다.

workspace.getWorkspaceFolder API를 사용해 현재 editor에서 열려진 파일 정보를 얻어올 수 있습니다.

Completion Provider Sample

vscode.languages.registerCompletionItemProvider API를 사용하여 자동 완성 기능을 제공합니다.

provideCompletionItems 함수를 확장하여 vscode.CompletionItem 객체 목록을 반환하면 자동 완성 제안 목록을 표시할 수 있습니다.

Code Actions Sample

vscode.languages.registerCodeActionsProvider API를 사용하여 vscode.CodeActionKind.QuickFix action을 제공한 예시입니다.

vscode.languages.createDiagnosticCollection API를 사용하여 문제점 목록을 제공할 수 있습니다. emoji라는 단어를 찾으면 문제로 표시하고 quick fix를 제공합니다.

File System Provider Sample

vscode.workspace.registerFileSystemProvider API를 사용하여 파일 시스템 인터페이스를 제공할 수 있습니다.

메모리에 파일을 생성하고 저장할 수 있는 예제를 확인할 수 있습니다.

Editor Decorator Sample

vscode.window.createTextEditorDecorationType API를 사용하여 데코레이션 스타일을 정의하고 vscode.window.activeTextEditor.setDecorations API를 사용하여 데코레이션 영역을 지정할 수 있습니다.

Loading script...