افزونه های کاربردی Brackets


جمعه، 13، جولای، 2018 در ساعت 04:41


از اولین روز آشناییمون با کدنویسی و ویرایشگرهای متن همیشه این بحث وجود داشت است که کدوم یک بهتر و قابلیت های بیشتری دارد؟!

اما شاید بهتر باشد که طرز فکرمان را عوض کنیم و سوال بهتری بپرسیم، چون هر یک از این ویرایشگرها قابلیت های منحصر بفرد یا مشترکی دارند که میتوانند مناسب کار ما باشند اگر مقایسه‌ی ویرایشگرهای متن را خوانده باشید حتما میدانید هر کدام از آنها نقاط قوت و ضعف هایی دارند پس با توجه به این سوال میخواهیم ویرایشگر مناسب خود را یک بار دیگر با توجه به سوالات زیر به اختصار بررسی کنیم…

“آیا ویرایشگر Brackets مناسب برای کار من است؟”

  • اگر از آن دسته از افرادی هستید که تازه به دنیای طراحی وب قدم گذاشته اید: بله.
  • اگر از آن دسته از افرادی هستید که سادگی محیط کاربری ملاک شماست: بله.
  • اگر از آن دسته از افرادی هستید که نوشتن فارسی، زبان فارسی محیط و راست چین کردن قالب سایت ها مد نظر شماست: بله.
  • اگر از آن دسته از افرادی هستید که منابع سیستمی زیادی در اختیار ندارید: بله.
  • اگر از آن دسته از افرادی هستید که به دنبال یک ویرایشگر رایگان میگردید: بله!

و بسیاری موارد دیگر که همگی بسته به کاربرد شما میتواند در انتخاب Brackets موثر باشد!

خب حالا که میدانیم Brackets بدرد ما میخورد باید بدانیم که این ویرایشگر دارای بخشی به نام Extension است که میتوانید با نصب افزونه های جدید قابلیت های بیشتری را به ویرایشگرتان اضافه کنید

نصب افزونه ها در Brackets

برای نصب افزونه های Brackets به اینترنت نیاز خواهید داشت که از سایدبار سمت راست یا از منوی بالا

نسبت به نصب افزونه ها می‌توانید اقدام کنید

اگر مدیریت افزونه ها را باز کنید چهار تب مختلف مشاهده می‌کنید

در تب Default افزونه های نصب شده پیشفرض را مشاهده میکند و در تب Installed افزونه های نصب شده، در تب تم هم میتوانید تم های نصب شده مختلف را مشاهده کنید و در تب Available هم میتوانید نسبت به نصب افزونه های جدید اقدام کنید

معرفه افزونه های کاربردی

خب حالا که میدانیم چگونه افزونه های جدید را نصب کنیم باید چنتایی از آنها را امتحان کنیم، من در اینجا آنهایی را که بیشتر استفاده میکنم و کاربردی هستند را معرفی میکنیم

1) Emmet

این افزونه به ما کمک میکند تا با سرعت بیشتری کد بزنیم و ایده های خود را اجرا کنیم. برای یادگیری کار با این افزونه به سایت آن مراجعه کنید و چیت‌شیت آن را مطالعه کنید، قطعا که باعث میشود مثل یک حرفه ای کد بزنید :)

 

2) Beautify

تمیز کد زدن باعث میشود که راحت تر بتوانیم کد های خود را بخوانیم و نسبت به اصلاح آنها اقدام کنیم اما بعضی از کدها فاقد این اصل میباشند! چاره چیست؟ خب آنها را نیز تمیز میکنیم ^_^

3) Brackets icon

این افزونه آیکون فایل ها را برای شما نشان میدهد تا راحت تر بتوانید نوع فایل های در حال ویرایش را مشاهده و پیدا کنید

4) Brackets file tree

اگر شما هم از آن دسته از افرادی هستید که پوشه بندی های خاص و طبقه بندی شده ای برای فایل های پروژه ی خود دارید و میخواهید بدانید هر فایل دقیقا کجاست این افزونه با ایجاد ساختار درختی در مرور و مشاهده فایل ها به شما کمک میکند

5) Brackets Git

همانطور که میدانید یکی از بهترین کنترل ورژن ها Git می‌باشید، خب چه بهتر اگر این کنترل ورژن در داخل ویرایشگر متن ما وجود داشته باشد و بتوانیم از آن استفاده کنیم

6) Minimap

با کمک این افزونه یک نمای کوچک از کل متن درحال ویرایش خواهید داشت، به علاوه میتوانید با کمک این مینی‌مپ به راحتی و سرعت بین خطهای زیاد خود اسکرول کنید

7) ToDo

با استفاده از این افزونه میتوانید یادآوری هایی بین کدهای خود قرار دهید و همه آنها را یک جا مشادهده کنید. ساختار استفاده از تگ ها در بین کامنت ها به این صورت میباشد:

8) Brackets CSS Color Preview

این افزونه رنگ کدهای هگز انتخابی شما را در فایل استایل قابل مشاهده میکند

9) Brackets Color Picker

با کلید های ترکبیبی CMD/CTRL + ALT + K  پالت رنگی برای شما قابل مشاهده میشود که با انتخاب رنگ مورد نظر کد آن رنگ به فایل استایل شما وارد میشود

10) Markdown Preview

همانطور که میدانید سینتکس معرفی شده توسط سایت گیتهاب برای قالب متن ها Markdown میباشد و با استفاده از این افزونه میتوانید آنهارا قبل از وارد کردن در گیتهاب مشاهده کنید

11) JS CSS Minifier

این افزونه با حذف فاصله ها در کدهای قالب سایت باعث افزایش سرعت لود سایت میشود

12) Autoprefixer

در طراحی با استفاده از CSS3 مرورگرهای قدیمی کدهارا با استفاده از پیشوندهایی شناسایی میکنند. این افزونه این کدها را به صورت اتوماتیک برای شما تکمیل میکنید

13) Lorem Pixel

این افزونه یک سری عکس های پیشفرض در قالب شما قرار میدهد که بتوانید حالت های مشاهده در قالب خود را اصلاح یا ویرایش کنید

14) JavaScript & CSS CDN Suggestions

همانطور که میدانید لود کردن فایل های اسکریپت از CDN ها هم باعث افزایش سرعت لود سایت میشود هم بار اضافی را از سرور شما برمیدارد، این افزونه لیست بلندبالا از آدرس اسکریپت ها و فایل های استایل را برای شما جمع کرده است.

شما چه افزونه های کاربردی دیگری میشناسید؟

تنها یک نفر برای "افزونه های کاربردی Brackets" نظر داده است

سعید جون
21 روز قبل

خیلی مطلب خوبی بود ممنون استفاده کردم


آدرس ایمیل شما محفوظ خواهد ماند