VSCode Extension Dev1

Vscode Extension (플러그인) 만들기1

vscode 확장에서는 코드로 직접 키 입력을 감지해서 단축키 작업을 실행하는것이 아니라, 특정한 이름으로 커맨드를 만들고 유저가 직접 커맨드와 단축키를 바인딩하는 과정을 거칩니다.

VSCode API

확장 프로그램의 activate 함수 아래에 아래와 같은 코드를 작성합니다.
커맨드 이름은 extension.확장프로그램이름.기능이름 과 같이 작성합니다.

let disposable = vscode.commands.registerCommand('extension.foo.helloWorld', () => {
    // 이곳에 커맨드가 눌리면 실행될 코드를 작성합니다.
});

context.subscriptions.push(disposable);

커맨드를 등록하는 코드를 작성했으면, 실제로 단축키와 연결하기 위해 vscode의 단축키 설정을 변경해야 합니다.
단축키 조합은 파일 -> 기본 설정 -> 바로가기 키 에서 설정할 수 있습니다.

[
    {
        "key": "ctrl+space",
        "command": "extension.foo.helloWorld",
        "when": "editorTextFocus"
    }
]

텍스트 가져오기

// 현재 포커싱된 윈도우의 텍스트 에디터를 가져옵니다.
let editor = vscode.window.activeTextEditor;
 
let doc = editor.document;
// 실제 String 타입의 코드입니다.
let src = doc.getText();
// 파일 이름입니다.
let fileName = doc.fileName;

// 현재 유저가 선택한 위치의 텍스트만 가져올 수도 있습니다.
doc.getText(editor.selection);

텍스트 편집하기

소스를 수정할때는 직접 string 값에 접근해 작업하는것이 아닌, edit 메소드를 이용합니다.

editor.edit(builder => {
    // 현재 선택된 텍스트를 "AA" 로 치환합니다.
    builder.replace(editor.selection, "AA");
    
    // 현재 커서의 끝에 "BB" 를 삽입합니다.
    builder.insert(editor.selection.end, "BB");
});

edit 메소드의 반환값에 then을 이용하여 모든 편집이 수행된 후의 작업을 지정할 수 있습니다.

editor.edit(builder => {

}).then(() => {
    // 텍스트 편집이 수행된 후 하고싶은 작업을 작성합니다.
});

확장 플러그인을 만들어 보는 과정은 아래와 같습니다.

---

Vscode Extension 패키지 설치

$ npm install -g yo generator-code

설치 후 yo code 입력시 아래 화면이 뜹니다.

타입스크립트로 만들어서 앤터 !

열심히 설치가 됩니다.

hello-world로 들어가서 작업하라는데 안됩니다.

디버그 눌러도 없다고 뜨고 만들어서 해봐도 안된다 뜨고.. (이 오류때문에 안되는줄 알고 포기했었던..)

하지만 하는 방법을 찾았습니다.! 요게 vscode 에서 디버그? 경로잡고 해주는 파일 같은데 (아닐수도) workspaceFolder 가 cd로 들어가져도 안바뀌나봐요..

아예 새창을 띄우시고 hello-world 폴더를 띄우셔서 디버그 하시면 됩니다.

디버그에 성공하시면 새창이 뜹니다.!

실패한게 아니에요.!

여기서 Mac 은 Cmd +shift + p, 윈도우는 ctrl + shift + p ?? (제가 지금 맥이라..)
단축키를 누르시면 뜹니다. 거기에 hello world를 치시면 ~

아래에 hello world 라고 출력되었습니다 ~

다음에는 조금 응용해서 발전하는걸 보여드리겠습니다.!

참조

• https://kdinner.tistory.com/6