بازگشت به لیست پروژه‌هاDeveloper Productivity Tool
ابزار متن‌باز توسعه‌دهندگی · VS Code Marketplaceایده‌پرداز، توسعه‌دهنده و نگهدارنده (Solo Developer)

اکستنشن camelCase Navigator برای VS Code (انتشار رسمی در Marketplace)

camelCase Navigator یک اکستنشن متن‌باز برای Visual Studio Code است که ناوبری مبتنی بر صفحه‌کلید را درون شناسه‌های ترکیبی هوشمند می‌کند. این ابزار به‌جای رفتار با شناسه‌هایی مانند handleAuthenticationRequest به‌عنوان یک بلوک متنی واحد، آن‌ها را به اجزای سازنده‌شان تجزیه می‌کند و امکان جابه‌جایی، انتخاب و حذف دقیق کلمات داخلی در الگوهای camelCase و PascalCase را بدون نیاز به ماوس یا فشردن مکرر کلیدهای جهت‌دار فراهم می‌کند. این اکستنشن به صورت Open Source در GitHub منتشر شده و در مارکت‌پلیس رسمی VS Code به بیش از ۴۰۰ نصب فعال رسیده است.

مشاهده آنلاین وب‌سایتسورس‌کد در گیت‌هاب
نمای کلی پروژه camelCase Navigator

خلاصه پروژه در یک نگاه

نقش من
ایده‌پرداز، توسعه‌دهنده و نگهدارنده (Solo Developer)
نوع محصول
Developer Productivity Tool
تکنولوژی‌های کلیدی
TypeScript، VS Code Extension API
مستندات بصری
۳ نما شامل ۱ ویدیو

مسئله و نقش من

چرا این محصول ساخته شد و دقیقاً کدام بخش‌ها بر عهده من بود.

چالش اصلی محصول

استفاده از نام‌های توصیفی و طولانی برای متغیرها، توابع و کلاس‌ها یک استاندارد مهندسی است؛ اما رفتار پیش‌فرض ناوبری VS Code این شناسه‌ها را یک واحد متنی کامل در نظر می‌گیرد. برای مثال در شناسه handleAuthenticationRequest، اگر مکان‌نما در انتهای Request باشد و توسعه‌دهنده بخواهد آن را به ابتدای Authentication ببرد، یا باید ۱۷ بار کلید جهت‌دار را فشار دهد یا با Ctrl+Arrow به ابتدای کل شناسه برود و دوباره برگردد. این وقفه هرچند کوچک، وقتی در طول روز صدها بار تکرار شود، تمرکز و سرعت توسعه را کاهش می‌دهد. انگیزه ساخت این ابزار، حل همین چالش با یک تجربه ناوبری روان و دقیق بود که با الگوی ذهنی برنامه‌نویسان در مدیریت شناسه‌های ترکیبی هم‌خوانی داشته باشد.

نقش و مسئولیت‌های من

به‌عنوان ایده‌پرداز و تنها توسعه‌دهنده، تمام چرخه محصول را خودم پیش بردم: طراحی و پیاده‌سازی اکستنشن با TypeScript و VS Code Extension API، تعریف و ثبت فرمان‌های اختصاصی در package.json، دسترسی به ادیتور فعال از طریق vscode.window.activeTextEditor و محاسبه موقعیت مکان‌نما، پیاده‌سازی الگوریتم پارسینگ متن برای تشخیص مرز کلمات با Regex، طراحی کلیدهای میانبر غیرمخرب و محدود به دامنه editorTextFocus، و در نهایت مستندسازی، نسخه‌بندی، متن‌باز کردن پروژه و عبور از فرایند تأیید و انتشار در VS Code Marketplace.

ویژگی‌های کلیدی

۷ مورد از مهم‌ترین دستاوردهای فنی این پروژه.

  • بیش از ۴۰۰ نصب فعال از سوی توسعه‌دهندگان بین‌المللی در مارکت‌پلیس رسمی VS Code
  • پیمایش سریع میان کلمات درون شناسه‌های طولانی با تشخیص هوشمند الگوهای camelCase و PascalCase
  • سه دسته فرمان مکمل: ناوبری (Navigation)، انتخاب (Selection) و حذف (Deletion) کلمات داخلی
  • کلیدهای میانبر هم‌راستا با الگوی پیش‌فرض VS Code (Alt برای جابه‌جایی و Shift برای انتخاب) و محدود به editorTextFocus
  • الگوریتم پارسینگ مبتنی بر Regex با مدیریت Edge Caseهایی مانند اعداد و اختصارات متوالی
  • معماری فوق‌العاده سبک با زمان اجرای میلی‌ثانیه‌ای و بدون کوچک‌ترین اثر روی پرفورمنس ویرایشگر
  • کد کاملاً متن‌باز (Open Source) روی GitHub و توسعه‌یافته با TypeScript خالص

چالش‌های مهندسی و راه‌حل‌ها

مسائلی که در مسیر توسعه پیش آمد و تصمیم فنی‌ای که برای هرکدام گرفته شد.

تشخیص دقیق مرز کلمات درون شناسه‌های ترکیبی (Word Boundary Detection)

چالش اصلی مهندسی، تشخیص درست مرز کلمات بود. الگوریتم پارسینگ متنی‌ای پیاده‌سازی شد که با استفاده از Regular Expressions متن اطراف مکان‌نما را تحلیل می‌کند و تغییر وضعیت از حروف کوچک به بزرگ را به‌عنوان مرز کلمه شناسایی می‌کند؛ مثلاً مرز میان e و A در handleAuthenticationRequest.

مدیریت Edge Caseهای شناسه‌های غیرمتعارف

شناسه‌هایی که حاوی عدد هستند (مانند product123Id) یا اختصارات متوالی دارند (مانند HTMLValidationError)، الگوی ساده «تغییر حروف کوچک به بزرگ» را می‌شکنند. الگوریتم باید در این حالت‌ها هم دقیقاً تشخیص دهد مرز منطقی میان کلمات داخلی کجاست تا رفتار ابزار در تمام سناریوها قابل پیش‌بینی بماند.

تداخل میانبرهای صفحه‌کلید و یکپارچگی با رفتار ادیتور

بایندینگ‌ها به شکل غیرمخرب و کاملاً قابل سفارشی‌سازی طراحی شدند و دامنه اثرشان با شرط editorTextFocus محدود شد تا تنها زمانی فعال باشند که تمرکز روی ادیتور متنی است. انتخاب Alt+Arrow برای جابه‌جایی و Shift+Alt+Arrow برای انتخاب، تجربه را با الگوی ذهنی موجود در ناوبری پیش‌فرض VS Code هم‌راستا نگه می‌دارد تا موقعیت نهایی مکان‌نما برای توسعه‌دهنده غافلگیرکننده نباشد.

امکانات کلیدی محصول

۳ قابلیتی که تجربه کاربری این محصول را شکل می‌دهند.

Navigation

جابه‌جایی مکان‌نما میان کلمات داخلی

فرمان‌های moveCamelCaseLeft و moveCamelCaseRight مکان‌نما را به ابتدای کلمه بعدی یا قبلی درون یک شناسه ترکیبی منتقل می‌کنند؛ به‌جای پرش روی کل شناسه، حرکت منطقی میان handle، Authentication و Request انجام می‌شود.

Selection

انتخاب دقیق یک یا چند کلمه داخلی

فرمان‌های selectCamelCaseLeft و selectCamelCaseRight با میانبرهای Shift+Alt+Arrow امکان انتخاب بخشی از یک شناسه را می‌دهند؛ قابلیتی که برای تغییر نام بخشی از یک متغیر طولانی بدون انتخاب کل آن ضروری است.

Deletion

حذف کلمه داخلی با یک میانبر واحد

فرمان deleteCamelCaseLeft با میانبر Alt+Backspace کلمه داخلیِ سمت چپ مکان‌نما را مستقیماً حذف می‌کند و ویرایش بخش‌های کوچک شناسه‌های طولانی را به یک حرکت ساده تبدیل می‌کند.

دستاوردها و نتایج

camelCase Navigator به‌عنوان یک پروژه شخصی که برای حل یک مشکل مشخص در گردش کار روزانه توسعه‌دهندگان ساخته شد، به بیش از ۴۰۰ نصب فعال در VS Code Marketplace رسیده است؛ عددی که نشان می‌دهد این ابزار یک نیاز واقعی را در جامعه برنامه‌نویسان شناسایی و برطرف کرده است. ارزش این پروژه برای من فراتر از خود ابزار بود: تسلط عملی بر VS Code Extension API و مدیریت مکان‌نما و انتخاب متن، تجربه طراحی و بهینه‌سازی الگوریتم‌های پارسینگ متن برای Edge Caseهای پیچیده، و از همه مهم‌تر طی کردن چرخه کامل محصول از شناسایی یک مسئله در گردش کار شخصی تا پیاده‌سازی، تست، انتشار در یک مارکت‌پلیس رسمی و نگهداری یک پروژه متن‌باز.

تکنولوژی‌ها و ابزارها

  • TypeScript
  • VS Code Extension API

زبان و API

  • TypeScript
  • VS Code Extension API
  • vscode.window.activeTextEditor
  • Command Registration (package.json)

منطق پردازش متن

  • Regular Expressions (Regex)
  • Word Boundary Detection
  • camelCase / PascalCase Parsing
  • Cursor Position Calculation

تجربه کاربری و کلیدهای میانبر

  • Alt + Arrow (Navigation)
  • Shift + Alt + Arrow (Selection)
  • Alt + Backspace (Deletion)
  • editorTextFocus Scope

انتشار و نگهداری

  • VS Code Marketplace Publishing
  • Open Source (GitHub)
  • Semantic Versioning
  • Extension Documentation

علاقه‌مند به گفتگو درباره این پروژه یا همکاری هستید؟

می‌توانیم پیرامون معماری سیستم، جزئیات فنی و فرصت‌های همکاری گفتگو کنیم.

ارتباط مستقیم با مندانلود رزومه (PDF)