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 관련 자료를 찾아 보았다.
VS Code 용 LSP 익스텐션을 작성하려면 VSCode 익스텐션 - Language Server Extension Guide 문서를 봐야 한다.
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): 사용자가 타이핑할 때 명령어 리스트를 추천 팝업으로 띄워준다.
- 호버 기능 (onHover): 특정 명령어에 마우스를 올렸을 때, 해당 명령어의 설명과 파라미터를 툴팁으로 보여준다.
- 주요 구현
- 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 마켓에도 올렸다.