프로그래밍/VSCode

[VSCode] 커스텀 언어 디버거 만들기 1 (언어등록, Breakpoint 설정)

Beginner:) 2024. 8. 30.
320x100

컴파일러 또는 인터프리터를 만든 후 VSCode 디버거 만드는 방법을 올릴 텐데, 내용이 많으니 핵심만 올릴 거다...

 

먼저 VSCode에서 무언가를 작업하고 싶으면 Extension을 개발해야 한다.

 

2024.07.20 - [프로그래밍/VSCode] - [Extension] VS Code extension 시작하기

 

[Extension] VS Code extension 시작하기

VSCode Tool 자체가 Web으로 작성되어있기 때문에 VSCode에서 어떠한 기능을 구현하려면 NodeJS가 설치되어 있어야하고 TypeScript 또는 JavaScript의 사전지식이 필요하다. 즉 VSCode는 WebView인 셈 NodeJS 등 설

park-duck.tistory.com

 

1. 디버거를 만들기 전에...

디버거를 만들기 전에 할 작업이 있다.

지금 VSCode로 text파일을 열어서 브레이크 포인트를 찍어보자.

안 찍힌다. 왜냐면 text파일은 디버그 기능이 없기 때문이다.

나의 언어가 "P"언어라고 하자.
그럼 확장자는 .p가 될 것이다.
main.p라는 파일을 만들고 브레이크 포인트를 찍어보자.

안 찍힌다. 왜냐면 main.p파일은 확장자가 .p인 text파일이기 때문이다.

근거로는 VSCode 우측 하단을 보면 "일반 텍스트"로 나온다



2. 언어 등록

언어등록을 하는 방법은 매우 간단하다.
package.json으로 들어가서 아래와 같이 language를 추가하면 된다

"contributes": {
    "languages": [
        {
            "id": "p",
            "aliases": [ "P", "p" ],
            "extensions": [ ".p" ]
        }
    ]
}

.

 

추가하면 .p파일이 text파일로 인식하던 것과 달리 언어 P가 찍히는 것을 볼 수 있다.



그러나 브레이크포인트는 아직 찍히지 않는다.

3. 브레이크포인트 설정

브레이크포인트를 설정할 수 있게 하는 방법은 더 간단하다.
p언어에 대해 브레이크 포인트를 추가해 주면 된다.

"contributes": {
    "languages": [
        {
            "id": "p",
            "aliases": [ "P", "p" ],
            "extensions": [ ".p" ]
        }
    ],
    "breakpoints": [
        { "language": "p" }
    ]
}



4. 결과

반응형

댓글