VS Code 용 자작 TTL LSP 익스텐션
VS Code 용 TeraTerm TTL LSP 익스텐션을 제작해 보았다.
동기
나는 간혹 Teram Term 매크로를 TTL(Tera Term Language)로 작성하는데, VS Code를 비롯하여 다른 에디터 용으로도 TTL용 LSP를 발견할 수 없었다. 그런데 얼마 전부터 팀 계정으로 Claude Code를 받아서, Claude Code 연습용으로 VS Code 용 TTL LSP 익스텐션을 구현해 보기로 하였다.
사전 준비
아무리 AI에게 일을 시키더라도 알고 시켜야 하므로, 먼저 LSP 관련 자료를 찾아 보았다.
LSP(Language Server Protocol) 개념은 내가 전에 작성했던 LSP 소개 페이지를 참조한다.
추가로 VS Code 용 LSP 익스텐션을 작성하려면 VSCode 익스텐션 - Language Server Extension Guide 문서를 봐야 한다.
또, LSP 예제 소스는 LSP Example 페이지에서 찾아볼 수 있다.
Syntax Highlighting을 위해서는 TextMate 문법(ttl.tmLanguage.json)을 작성하면 된다.
LSP는 클라이언트와 서버로 나뉘어지는데, 각각은 아래와 같이 구현할 수 있다.
- LSP 클라이언트 구현
- package.json: 확장 프로그램이 .ttl 파일이 열릴 때만 활성화되도록 설정한다. (activationEvents: onLanguage:ttl)
- extension.ts: Extension 진입점 (.ttl 파일이 열릴 때 TTL 언어 서버 클라이언트를 시작하고, LSP 서버를 구동하고 LSP 연결을 맺음)
- LSP 서버 구현
- vscode-languageserver 패키지를 이용하면 된다.
- 텍스트 동기화 (onDidChangeContent): 사용자가 코드를 바꿀 때마다 서버 내에 가상으로 코드를 업데이트한다.
- 진단 기능 (Diagnostics / 문법 검사): 해당 언어용 parser를 만든다. (알 수 없는 명령어는 빨간 밑줄을 띄우게 함)
- 자동완성 (onCompletion): 사용자가 타이핑할 때 명령어 리스트를 추천 팝업으로 띄워준다.
- Hover 기능 (onHover): 특정 명령어에 마우스를 올렸을 때, 해당 명령어의 설명과 파라미터를 tool 팁으로 보여준다.
- 주요 구현
- Completion: connection.onCompletion()
- Hover: connection.onHover()
- Diagnostics: connection.sendDiagnostics()
- Go To Definition: onnection.onDefinition()
- Find References: onnection.onReferences()
- Rename: connection.onRenameRequest()
입코딩으로 구현
Claude Code에게 아래 링크를 알려주면서 이것을 참조하여 VS Code 용 TTL LSP 익스텐션을 작성해 달라고 요청하였다.
- TTL 명세서: Tera Term Language (TTL)
- Commands 목록: TTL command reference
또 LSP 서버는 vscode-languageserver 패키지를 이용하라고 지시하였고, 아래 LSP 기능들을 지원해 달라고 하였다.
- Completion
- Diagnostics
- Find References
- Go To Definition
- Hover
- Rename
- Syntax Highlighting
결과로 놀랍게도 30분도 안 되어서 정상 동작하는 익스텐션을 얻을 수 있었다. 😲
이후에는 내 입맞에 맞게 도움말 보강 요청, 아이콘 수정 요청, README 수정 요청 등을 하였고, 로컬에서 정상 동작하는 것을 확인하였다. 이후 데모 영상만 내가 직접 스크립 캡쳐하여 만들었고, 그 외에는 거의 다 Claude Code에게 시켜서 결과를 얻었다.
대충 사용해 봤는데 정상 동작하는 것으로 보여서 내 GitHub과 VS Code 마켓에도 올렸다.