1차 시도

languages.registerHoverProvider 로 호버시 텍스트가 뜨도록 만듦

import * as vscode from "vscode";

const languages = ["typescript", "typescriptreact"] as const;

export function activate(context: vscode.ExtensionContext) {
  const hoverProvider: vscode.HoverProvider = {
    provideHover(document, position, token) {
      return {
        contents: ["hover content"],
      };
    },
  };

  context.subscriptions.push(
    ...languages.map((language) =>
      vscode.languages.registerHoverProvider(
        {
          language,
        },
        hoverProvider,
      ),
    ),
  );
}

export function deactivate() {}

전체적인 흐름:

• 익스텐션이 실행되면 activate 함수가 실행됨
• 디버그 콘솔에 activated 가 뜸
• hoverProvider 가 실행되면 콘솔에 triggered 출력, 호버 시 출력되는 ui에 hover content 라는 텍스트가 뜸
• 컨텍스트의 구독 목록에 hoverProvider 추가
  • hoverProvider : 호버 시 진행 할 작동을 정의할 수 있음. 파라미터는 document, position, token document: 현재 동작중인 에디터의 문서 정보 position: 현재 호버 중인 위치 (좌표 형식) token: 취소 토큰이라는데 아마 여기서 쓸 경우는 없을 듯
  • context.subscriptions : 컨텍스트의 구독 목록. 이벤트 등록 같은 느낌?
  • registerHoverProvider : 이름 그대로 hoverProvider를 등록시키는 용도. 어떤 언어에서 동작할지와 프로바이더를 파라미터로 주면 됨
• 익스텐션이 비활성화될때 deactivate함수 실행

현재 문제점 : 호버만 하면 무조건 텍스트가 뜸, 이 외에 기능 없

2차 시도

pretty typescript error, typescript wizard 등 여러 라이브러리 분석

호버 시 무조건 텍스트를 띄우지 않도록 하려면 컨텍스트를 중첩시키면 되는듯 함

context.subscriptions.push(
    languages.onDidChangeDiagnostics(async (e) => {
      e.uris.forEach((uri) => {
        context.subscriptions.push(
          languages.registerHoverProvider(
            {
              language: editor.document.languageId,
            },
            hoverProvider,
          ),
        );
      });
    }),
  );

혹은 hoverProvider에 조건을 넣어서 처리

const hoverProvider: vscode.HoverProvider = {
    provideHover: (document, position) => {
      if (options.hideAllTips) {
        return null;
      }
      ...
    },
  };

onDidDiagnoseChange → 에러, 정보 등의 상태가 변하면 작동

구현할 방법

1. 에디터 텍스트 변경을 계속 감지, uri로 텍스트를 가져와서 인터페이스에 hint로 하이라이팅 및 호버시 정보 (ts-wizard, pretty-ts-error)
2. language server 써서 전처리 (stylelint, code spell checker)