TypeScript Error Explainer

TypeScript Error Explainer는 VS Code 에디터에서 TypeScript 에러를 분석하고 개발자 친화적인 방식으로 설명해주는 VS Code 확장 프로그램입니다.

기능

• TypeScript 에러 코드 자동 감지
• 에러에 대한 명확한 설명 제공
• 에러를 해결하기 위한 실용적인 코드 예제 제공
• 사용자 친화적인 웹뷰 인터페이스

사용법

1. TypeScript 코드에서 에러가 있는 위치에 커서를 놓습니다.
2. 명령 팔레트(Ctrl+Shift+P 또는 Cmd+Shift+P)를 열고 "Explain TypeScript Error" 명령을 실행합니다.
3. 별도의 웹뷰 패널에서 에러 설명과 해결 방법을 확인합니다.

프로젝트 구조

typescript-error-explainer/
├── src/
│   ├── extension.ts          # 확장 프로그램 메인 파일
│   ├── models/
│   │   └── types.ts          # 인터페이스 및 타입 정의
│   └── handlers/
│       ├── typeErrors.ts     # 타입 에러 처리 클래스
│       └── syntaxErrors.ts   # 구문 에러 처리 클래스
├── .vscode/
│   └── launch.json           # 디버깅 설정
└── package.json              # 확장 프로그램 메타데이터

디버깅

이 확장 프로그램을 디버깅하는 방법:

1. VS Code에서 F5를 눌러 Extension Development Host를 실행합니다.
2. 개발자 도구를 열려면 Ctrl+Shift+P (또는 Cmd+Shift+P) 누른 다음 "Developer: Toggle Developer Tools"를 실행합니다.
3. 콘솔 탭에서 로그 메시지를 확인합니다.
4. 에러가 있는 코드로 이동하여 "Explain TypeScript Error" 명령을 실행해봅니다.

개발 가이드

새로운 에러 타입을 지원하려면:

1. typeErrors.ts 또는 syntaxErrors.ts 파일에 해당 에러를 처리하는 메서드를 추가합니다.
2. 메서드 이름은 handle + 에러 이름 형식으로 지정합니다.
3. handle 메서드의 switch 문에 새 에러 코드를 추가합니다.

예시:

private handleNewErrorType(diagnostic: vscode.Diagnostic): ErrorExplanation {
    return {
        title: "에러 제목",
        description: "에러에 대한 설명",
        solutions: [{
            title: "해결 방법 제목",
            code: "// 해결 코드 예시"
        }]
    };
}