Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Variable Documentation ExtensionNew to Visual Studio Code? Get it now.
Variable Documentation Extension

Variable Documentation Extension

seungdae.kim

|
3 installs
| (0) | Free
Shows variable documentation from JSON file on hover with workspace usage information
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

  1. Package the extension:

    npm install
    npm run compile
    npm run package
    
  2. 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

  1. Create info_doc folder in your project root
  2. Create var-doc.json file with variable documentation:
{
  "userId": "사용자의 고유 ID입니다.",
  "productList": "상품 목록 배열입니다.",
  "apiKey": "API 호출을 위한 인증 키입니다."
}

Usage

  1. Open a TypeScript, JavaScript, or Vue file
  2. Hover over any variable name
  3. 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. 기본 사용법

  1. .ts, .js, .vue 파일을 엽니다
  2. 코드에서 변수 이름에 마우스를 올립니다
  3. tooltip에서 변수 설명을 확인합니다

2. 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>

🎯 활용 팁

  1. 팀 협업: 팀원들이 변수 의미를 쉽게 파악할 수 있습니다
  2. 문서화: 코드 주석 대신 중앙화된 변수 문서 관리
  3. 코드 리뷰: 변수 사용 위치를 빠르게 확인하여 효율적인 리뷰
  4. 리팩토링: 변수 사용 위치를 한눈에 파악하여 안전한 리팩토링 => 변수 전체의 설명을 하나하나 작성하기 보다는 작성하다 헷갈리는 변수에 한해서 따로 기록하는 용도로 사용하시는게 좋습니다.

⚠️ 주의사항

  • info_doc/var-doc.json 파일이 없으면 변수 설명이 표시되지 않습니다
  • 대용량 프로젝트에서는 검색 성능에 영향을 줄 수 있습니다
  • JSON 파일 형식이 올바르지 않으면 확장이 작동하지 않을 수 있습니다

🔄 업데이트

변수 문서를 수정한 후에는:

  1. var-doc.json 파일을 저장
  2. VSCode를 다시 로드하거나 확장을 다시 활성화

🐛 문제 해결

확장이 작동하지 않을 때:

  1. info_doc/var-doc.json 파일 존재 확인
  2. JSON 형식 유효성 검사
  3. 지원되는 파일 타입인지 확인 (.ts, .js, .vue)
  4. VSCode 개발자 콘솔에서 오류 메시지 확인
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft