افزونه های ضروری sublime text برای توسعه دهندگان وب

صدها برنامه ویرایشگر متن برای انتخاب کردن وجود دارد. در این مقاله، بعضی از بهترین افزونه‌های Text Sublime را به عنوان برنامه ویرایشگر متن معرفی خواهیم کرد.

 دنیای نرم افزار IDE (محیط یکپارچه توسعه نرم‌­افزار) با برنامه­‌هایی که برای هر سیستم عامل دارد، بسیار عظیم است. علاقه شخصی من Sublime Text است و من از آن برای همه برنامه‌های کدنویسی استفاده می­کنم.

Sublime، علاوه بر تم ­های اختیاری بسیاری که دارد، میان­برهای صفحه‌­کلید و گردش کار سریع‌­السیر نیز دارد. هم­چنین، دارای جامعه­‌ وسیعی از توسعه‌­دهنگان است که پسوندهایی را با نرم­‌افزاری بهتر و با کاربریِ راحت­‌تر می­‌سازد. اگر شما کمی جستجو کنید، صدها برنامه­‌توسعه برای انتخاب کردن پیدا خواهید کرد. در این پست، من بعضی از بهترین افزونه­‌های Sublimeرا انتخاب کردم که باعث صرفه­‌جویی در زمان و تلاش در کارهای وب می­شود.

1. Emmet

Sublime Text و Emmet تقریبا یکسان هستند. افزونه Emmet تنها یک عملکرد یا هدف را ارائه نمی کند. این مجموعه وسیع برای توسعه­دهنده‌های وب با مجموعه‌ای از ویژگی های برنامه نویسی دستی، میانبرهای صفحه کلید اضافی و ویژگی­‌هایی برای اتوماسیون است. این می­تواند به شما کمک کند تا بخش­های مختلف کد را مدیریت کنید یا ویژگی­‌هایی اضافی مانند ویژگی­‌های خودکار به تصویر اضافه کنید.

اگر به مستندات عظیم Emmet نگاهی بیاندازید، مطمئنا چیزهای مفیدی را پیدا می­‌کنید که به دردتان بخورد. بعضی از تنظیمات را انجام می­دهد که بخش معمول کار شما باشد، اما در نهایت، ارزش یادگیری را دارد. برای Text Sublime هیچ پیشرفتی بهتر از Emmet وجود ندارد. به خصوص برای افرادی که اغلب وب­سایت­ها را از صفر کد می­زنند.

Autoprefixer.2

بسیاری از خواص جدیدتر CSS3 دارای پیشوندی برای مدیریت موتورهایِ رندر مختلف هستند. اینها اغلب برای WebKit، Gecko و موتورهای مایکروسافت استفاده می‌شوند که با هم به عنوان پیشوندهای تولیدکننده، گروه‌بندی می‌شوند. همه­ ویژگی­ها به این پیشوندها نیاز ندارند. مرورگرها در طول چند سال کوتاه راه زیادی را طی کرده ­اند و بیشتر خواصِ CSS3 می­تواند بدون کد پیشوندی اجرا شوند. اما اگر می­خواهید بیش­ترین مخاطب ممکن را پشتیبانی کنید، Autoprefixer را لازم دارید. این افزونه را می‌­توان از طریق بسته مدیریتِ Sublime با چند کلیک نصب کرد، و حتی ساده تر است که آن را به کدنویسی­ خود اضافه کنید.

3. Themr

Sublime همراه با یک جفت تمِ پیش‌فرض دوبعدی با سبک‌های برجسته­‌سازی به نحوه خاصی است. اما ممکن است بخواهید در انبار خود بیشتر اضافه کنید و اینجاست که Themr می­تواند کمک کند. این افزودنی کوچک به شما اجازه می­‌دهد تا تم ­های موجود UI را مرتب­‌سازی کنید و آنها را با توجه به موارد مورد علاقه خود سازماندهی کنید، حتی در صورت نیاز میانبرهای صفحه کلید را ایجاد کنید.

به علاوه شما می‌­توانید تم­ های جدیدی که پیدا می­‌کنید را اضافه کنید و آنها را باهم سازماندهی کنید. تم ­های "مورد علاقه" شما حتی می‌تواند بر اساس انواع فایل­‌های مورد استفاده شما از پیش تنظیم شود (به عنوان مثال: HTML، JS، و فایل های PHP) ذخیره می‌شود.

4. JSHint

اشکال زدایی جاوا اسکریپت اشک آدم را درمی‌آورد. اگر شما به طور مداوم اشکال­‌زدایی انجام دهید، طبیعتا انجام آن برایتان آسان‌تر خواهد شد، اما باز هم کار آسانی نخواهد بود. با استفاده از برنامه ویرایشگر متن JShint Sublime، شما می­توانید اشکال‌زدایی جاوا اسکریپت را به IDE خود بیفزایید. این افزودنی ساده به شما این امکان را می‌دهد کد جاوااسکریپت خود را از هر فایل JS تست کنید.

یک پنجره کنسول جدید در IDE ظاهر می‌شود که می‌توانید از طریق آن، خطاها را از بین ببرید، آنها را پیدا کنید و به سرعت آنها را اصلاح کنید. اگر می خواهید یک فایل خارج از Sublime را بررسی کنید، می توانید آن را از پنجره ترمینال اجرا کنید. خلاصه، این یک ابزار عالی برای توسعه‌دهندگانی است که به طور مداوم با JavaScript کار می‌کنند.

5.Auto Filename

تقریبا هر صفحه وب به فایل‌های دیگر در جایی از کد مراجعه می­کند. این فایل‌ها می‌توانند تصاویر، اسکریپت های JS، شیوه‌نامه‌ها یا حتی صفحات پویا مانند فایل‌های php باشند. با استفاده از نام فایلِ خودکار شما بارهای زمانی را به صورت دستی وارد کنید این فایل‌ها را ذخیره کنید. فقط نام را تایپ کنید و این افزونه‌ها باقی کار را با یک فیلد تکمیلِ خودکار اداره می‌کند. این برای تمام عناصر درون HTML شما کار می‌کند تا بتوانید به سرعت مسیرهای راهنمای تصاویر، فایل‌های CSS، افزونه‌های جاوا اسکریپت را اضافه کنید.

6. Sidebar Enhancements

برنامه ویرایشگر متن Sublime یک نمایه نوار کناری اختیاری دارد که مانند یک راهنما کار می‌کند. این کار هنگامی که شما در حال کار بر روی پروژه بزرگ با چندین فایل هستید، مفید است. نوار کناری پیشرفته نوار کناری Sublime را پیش فرض می گیرد و به خوبی آن را بهبود می‌دهد!

این به شما امکان نمایش چند پوشه، گزینه‌های بیشتر در منوی زمینه­‌ راست-کلیک، کپی آسان از مسیرهای URI و دیگر گزینه‌های دستی مانند "open with" برای گرافیک‌ها را می­دهد. هر توسعه‌دهنده‌ای از ویژگی نوار کناری استفاده نمی‌کند. من حتی وقتی تنها فایل‌های تک را ویرایش می‌کنم آن را غیرفعال می‌کنم. اما اگر شما به طور مداوم از نوار جانبی Sublime استفاده کنید، این افزونه برایتان ارزشمند خواهد بود.

7.ColorPicker

اکثر ما با ابزار color picker در برنامه‌هایی مانند فتوشاپ آشنا هستیم. آنها به خوبی کار می کنند و اغلب آنها همه چیزهایی هستند که ما برای یک فرآیند UI جامع نیاز داریم. برنامه ویرایشگر متن ColorPicker Sublime اجازه می‌دهد تا فرآیند انتخاب رنگ را به سمت IDE خود ببرید. البته، برنامه­‌های وبِ رنگی زیادی وجود دارد که می‌توانید به جای آن استفاده کنید. اما این افزونه فوق العاده است، زیرا درست درون پنجره کد کار می‌کند.

8. Git

اگر شما هرگز از نسخه Git استفاده نکردید، راه‌های زیادی برای یادگیری آن وجود دارد. منابع مناسب کمک خواهند کرد و هنگامی که شما به طور کامل Git را بفهمید، هرگز نمیخواهید که به عقب برگردید! یکی از بهترین منابع مورد استفاده شما برنامه ویرایشگر متن Git است. این افزونه، کنترل نسخه Git را آسان می‌کند و کار شما را برای مدیریت بسته های IDE تسهیل می‌کند. بسیاری از توسعه دهندگان ترجیح می دهند از خط فرمان برای مدیریت Git استفاده کنند، اما Sublime یکی دیگر از گزینه های قابل قبول است.

9. Bracket Highlighter

در اینجا یک ویژگیِ خوب داریم که قطعا هنگام کدگذاری صفحات بزرگ مفید خواهد بود.

افزونه Bracket Highlighter به طور خودکار براکتهای باز و بسته ای که درون کد وجود دارد را های‌لایت می‌کند. تنها کاری که باید انجام دهید این است که مکان نما را روی براکت آغازی (یا پایانی) قرار دهید، سپس از طریق فایل بررسی کرده تا تگ تطبیقی را پیدا کنید.

این به شما کمک می کند تا کدهای HTML را در صفحه خود ببینید و متوجه شوید که کدام المان ها شامل المان های دیگر هستند.

با این که Sublime ویژگی هایلایت کردن را در افزونه Emmet داشته است، اما برنامه نویسان این افزونه را ترجیح می دهند زیرا هایلایت کردن با این افزونه بسیار واضح تر است.