🇲🇳 Mongol Code Explainer

HTML, CSS, JavaScript, Python, TypeScript, JSON, SQL, PHP кодыг Монгол болон Англи хэлээр тайлбарлах VS Code extension
Hover tooltip дэмжлэг

🎉 Шинэ (v2.3)

• ✅ Marketplace Ready - Extension icon, optimized package size (131 KB), upload бэлэн
• ✅ Custom Dictionary - Хэрэглэгч өөрөө тайлбар нэмж, засаж, устгах боломжтой (commands: mongol.addCustomEntry, mongol.editCustomEntry, mongol.deleteCustomEntry)
• ✅ Config-driven архитектур - JSON dictionary файлаас тайлбар унших, код compile хийлгүйгээр тайлбар нэмэх/засах боломжтой
• ✅ HoverProvider (Hover Tooltip) - Код засахгүйгээр keyword, method, variable дээр хулганаа зогсооход дэлгэрэнгүй тайлбар tooltip-аар харуулна
• ✅ CompletionProvider (Auto-suggestions) - Код бичихэд автоматаар тайлбартай suggestion-үүд гарч ирнэ
• ✅ 2 хэлний тайлбар (MN + EN) - Монгол болон Англи хэлээр тайлбар харуулах боломжтой, тохиргооноос сонгоно
• ✅ SOLID принцип - Factory Pattern (ExplainerRegistry), Singleton Pattern (DictionaryLoader), Dependency Injection ашигласан
• ✅ JSON словарь - dictionary.json файл засаад extension reload хийхэд шинэ тайлбарууд идэвхжинэ (TypeScript compile шаардлагагүй)

✨ Онцлог

| Онцлог | Дэлгэрэнгүй тайлбар | |--------|---------| | 🌍 Олон хэлний дэмжлэг | Монгол (MN) болон English (EN) хэлний тайлбар. Тохиргооноос mongolExplainer.explanationLanguage утгыг өөрчлөх. | | 🎯 8 програмчлалын хэл | HTML, CSS, JavaScript, Python, TypeScript, JSON, SQL, PHP кодыг таних, тайлбарлах. | | 🔍 Dictionary-driven | AI-гүй, үнэгүй, интернет холболт шаардлагагүй, offline ажиллах, хурдан хариу өгөх. | | 💬 Smart Comments | Inline (код мөртэй нэг мөрөнд) эсвэл Above (код дээр) comment mode-оор автомат тайлбар нэмэх. | | 🎈 HoverProvider Tooltip | Hover хийхэд tooltip тайлбар харуулах (код файл дотор ямар ч өөрчлөлт оруулахгүй). Keywords, methods, variables, operators бүгдэд ажиллана. | | ⚡ Right-click Menu | Код сонгоод right-click → "Explain Code (Mongolian)" дарж тайлбар нэмэх. | | 🔧 Config-driven архитектур | JSON словарьд тайлбар нэмэх/засах. Explainer class нэмэхэд compile хийх шаардлагагүй. |

🏗️ Архитектур

Системийн бүтэц

Давуу тал:

• Шинэ explainer нэмэхэд extension.ts засах шаардлагагүй
• Priority-based selection (бага дугаар = өндөр эрх)
• Уян хатан, өргөтгөх боломжтой

Давуу тал:

• JSON засаад компайлгүйгээр шинэчлэгдэнэ
• Олон хэл нэмэх хялбар
• Non-technical хүмүүс ч засаж чадна

Өгөгдлийн урсгал (Data Flow)

User Action (Right-click / Hover)
        ↓
VS Code Command/HoverProvider
        ↓
ExplainerRegistry.findExplainer()
        ↓
Selected Explainer.canHandle() → true
        ↓
Explainer.explain(code, mode)
        ↓
DictionaryLoader.getHTMLTag() / getJSKeyword()
        ↓
dictionary.json → { "mn": {...}, "en": {...} }
        ↓
Return formatted explanation
        ↓
Insert comment / Show tooltip

2️⃣ Хэл сонгох

VS Code Settings:
Тохиргоо mongolExplainer.explanationLanguage утгыг "mn" эсвэл "en" болгон сонгоно.

Эсвэл UI-аар:

1. Ctrl + , (Settings)
2. "Mongol Explainer" хайх
3. Explanation Language → Монгол (mn) эсвэл English (en)

Custom Dictionary - Өөрийн тайлбар нэмэх

Хэрэглэгч өөрийн project-ын болон team-ийн custom тайлбаруудыг нэмж болно:

Яаж ашиглах:

1️⃣ Шинэ тайлбар нэмэх:

1. Ctrl+Shift+P → "Mongol Explainer: Өөрийн тайлбар нэмэх"
2. Хэл сонгох: MN эсвэл EN
3. Програм хэл: HTML / CSS / JavaScript / Python
4. Төрөл: tags / attributes / keywords / methods / properties
5. Түлхүүр үг: myCustomFunction
6. Тайлбар: Энэ функц миний custom logic ажиллуулна
7. ✅ Хадгалагдлаа!

2️⃣ Тайлбар засах:

1. Ctrl+Shift+P → "Mongol Explainer: Тайлбар засах"
2. Жагсаалтаас сонгох
3. Шинэ тайлбар оруулах
4. ✅ Засагдлаа!

3️⃣ Тайлбар устгах:

1. Ctrl+Shift+P → "Mongol Explainer: Тайлбар устгах"
2. Жагсаалтаас сонгох
3. Баталгаажуулах
4. ✅ Устгагдлаа!

Хаана хадгалагддаг вэ?

Custom тайлбарууд .vscode/mongol-code-dict.json файлд хадгалагдана:

{
  "mn": {
    "javascript": {
      "keywords": {
        "myCustomKeyword": "Миний тайлбар"
      }
    }
  }
}

Давуу тал:

• ✅ Team-тэйгээ хуваалцаж болно (Git commit хийх)
• ✅ Project-specific тайлбаруудыг нэмж болно
• ✅ Default dictionary-г бүү хам засахгүй, зөвхөн custom нэмэлт
• ✅ Hover tooltip болон auto-completion-д автоматаар гарна

🎈 HoverProvider - Код засахгүй тайлбар

Кодон дээр cursor-ээ байрлуулахад tooltip тайлбар гарна:

Ашиглалт:

1. Код файл нээх (HTML, JS, Python гэх мэт)
2. Tag, keyword, функц дээр cursor тавих
3. Автоматаар tooltip тайлбар гарна
4. Код өөрчлөгдөхгүй - зөвхөн үзүүлнэ

Дэмжигдсэн хэлүүд:

• HTML: tags, attributes
• JavaScript: keywords, functions, methods
• Python: keywords, functions, classes
• CSS: properties
• TypeScript, JSON, SQL, PHP

Жишээ

Жишээ тайлбарууд

HTML: <div>, <button>, <h1> зэрэг tag-ууд дээр hover хийхэд тэдгээрийн зориулалт, ашиглалтын талаар тайлбар харагдана.

JavaScript: async, function, const, await гэх мэт keyword-үүд болон .json(), .fetch() методууд дээр дэлгэрэнгүй тайлбар.

CSS: max-width, margin, padding зэрэг property-уудын утга, ашиглалтын тайлбар tooltip-аар харагдана.

⚙️ Тохиргоо

Settings → Extensions → Mongol Code Explainer

📄 License

📄 License

MIT License - үнэгүй ашиглаж болно

🤝 Contributing

📧 Contact

• Email: tsewegmidmonhotgon@gmail.com

⭐ Support

Хэрэв таньд таалагпсан бол ⭐ star өгөөрэй!