Variable Documentation Extension
VSCode extension that provides variable documentation tooltips with workspace usage information.
Features
- Variable Documentation: Shows descriptions from
info_doc/var-doc.json
when hovering over variables
- Usage Tracking: Displays all locations where the variable is used in the workspace
- Multi-Language Support: Works with TypeScript, JavaScript, and Vue files
- Real-time Updates: Automatically reloads when documentation file changes
- Configurable: Customizable settings for path, search limits, and features
Installation
Package the extension:
npm install
npm run compile
npm run package
Install the generated .vsix
file in VSCode:
- Open VSCode
- Go to Extensions view (Ctrl+Shift+X)
- Click "..." menu → "Install from VSIX..."
- Select the generated
.vsix
file
Setup
- Create
info_doc
folder in your project root
- Create
var-doc.json
file with variable documentation:
{
"userId": "사용자의 고유 ID입니다.",
"productList": "상품 목록 배열입니다.",
"apiKey": "API 호출을 위한 인증 키입니다."
}
Usage
- Open a TypeScript, JavaScript, or Vue file
- Hover over any variable name
- If the variable is documented in
var-doc.json
, a tooltip will appear showing:
- Variable description
- List of files and line numbers where the variable is used
- Clickable links to navigate to usage locations
Configuration
The extension can be configured in VSCode settings:
varExtension.docPath
: Path to the variable documentation file (default: "info_doc/var-doc.json")
varExtension.enableWorkspaceSearch
: Enable workspace-wide usage search (default: true)
varExtension.maxSearchResults
: Maximum number of usage results to show (default: 50)
Development
# Install dependencies
npm install
# Compile TypeScript
npm run compile
# Watch for changes
npm run watch
# Lint code
npm run lint
# Package extension
npm run package
Testing
Press F5
in VSCode to launch the extension in a new Extension Development Host window.
Project Structure
var-extension/
├── src/
│ └── extension.ts # Main extension logic
├── info_doc/
│ └── var-doc.json # Variable documentation
├── package.json # Extension manifest
├── tsconfig.json # TypeScript configuration
└── README.md # This file
Contributing
Feel free to submit issues and enhancement requests!
License
MIT
korean manual
VarExtension 사용법
VSCode에서 변수 설명을 tooltip으로 보여주는 확장 프로그램 사용 가이드
📋 개요
이 확장 프로그램은 코딩 중 변수에 마우스를 올리면 해당 변수의 설명과 사용 위치를 tooltip으로 보여줍니다.
🚀 설치 및 설정
1. 확장 프로그램 설치
- VSCode Extensions에서 설치하거나
.vsix
파일을 직접 설치
2. 변수 문서 파일 준비
프로젝트 루트에 info_doc
폴더를 생성하고 var-doc.json
파일을 만듭니다.
{
"userId": "사용자의 고유 ID입니다.",
"productList": "상품 목록 배열입니다.",
"apiKey": "API 호출을 위한 인증 키입니다.",
"userProfile": "사용자 프로필 정보 객체입니다."
}
💡 사용 방법
1. 기본 사용법
.ts
, .js
, .vue
파일을 엽니다
- 코드에서 변수 이름에 마우스를 올립니다
- tooltip에서 변수 설명을 확인합니다
- 변수 설명:
var-doc.json
에서 가져온 설명
- 사용 위치: 현재 워크스페이스에서 해당 변수가 사용된 파일과 라인 번호
- 파일 링크: 클릭하면 해당 파일의 해당 라인으로 이동
📁 프로젝트 구조 예시
your-project/
├── info_doc/
│ └── var-doc.json # 변수 설명 문서
├── src/
│ ├── components/
│ │ └── UserList.vue # Vue 컴포넌트
│ ├── utils/
│ │ └── api.ts # API 유틸리티
│ └── types/
│ └── user.ts # 타입 정의
└── package.json
🔧 설정 옵션
VSCode 설정에서 커스터마이징 가능한 항목들:
- 문서 파일 경로:
info_doc
폴더 위치 변경
- 지원 파일 타입: 추가 파일 확장자 지원
- 검색 최적화: 대용량 프로젝트 성능 설정
📝 사용 예시
예시 1: TypeScript 파일
// user.ts
const userId = "user123"; // 마우스 오버 시 tooltip 표시
const productList = []; // 마우스 오버 시 tooltip 표시
예시 2: Vue 컴포넌트
<template>
<div>{{ userId }}</div> <!-- 마우스 오버 시 tooltip 표시 -->
</template>
<script>
export default {
data() {
return {
userId: '', // 마우스 오버 시 tooltip 표시
productList: [] // 마우스 오버 시 tooltip 표시
}
}
}
</script>
🎯 활용 팁
- 팀 협업: 팀원들이 변수 의미를 쉽게 파악할 수 있습니다
- 문서화: 코드 주석 대신 중앙화된 변수 문서 관리
- 코드 리뷰: 변수 사용 위치를 빠르게 확인하여 효율적인 리뷰
- 리팩토링: 변수 사용 위치를 한눈에 파악하여 안전한 리팩토링
=> 변수 전체의 설명을 하나하나 작성하기 보다는 작성하다 헷갈리는 변수에 한해서 따로 기록하는 용도로 사용하시는게 좋습니다.
⚠️ 주의사항
info_doc/var-doc.json
파일이 없으면 변수 설명이 표시되지 않습니다
- 대용량 프로젝트에서는 검색 성능에 영향을 줄 수 있습니다
- JSON 파일 형식이 올바르지 않으면 확장이 작동하지 않을 수 있습니다
🔄 업데이트
변수 문서를 수정한 후에는:
var-doc.json
파일을 저장
- VSCode를 다시 로드하거나 확장을 다시 활성화
🐛 문제 해결
확장이 작동하지 않을 때:
info_doc/var-doc.json
파일 존재 확인
- JSON 형식 유효성 검사
- 지원되는 파일 타입인지 확인 (
.ts
, .js
, .vue
)
- VSCode 개발자 콘솔에서 오류 메시지 확인