15 افزونه Brackets برای تجربه کدنویسی بهتر

گردآوری و تالیف : ارسطو عباسی
تاریخ انتشار : 03 تیر 1397
دسته بندی ها : برنامه نویسی

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

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

با انتخاب کردن چندین افزونه مفید براکتس می‌توانید کدنویسی راحت تر و لذت‌بخش‌تری را داشته باشید. افزونه‌های موجود در این مطلب به اندازه‌ای شاهکار هستند که مطمئنا از اینکه تا به حال چگونه بدون آن‌ها زندگی کرده‌اید متعجب خواهید شد.

چرا براکتس؟

براکتس یا Brackets یک ادیتور متن باز و رایگان است که منحصرا برای طراحان فرانت‌اند ایجاد شده و توسعه‌دهنده آن شرکت Adobe است. این ابزار نسبتا سبک است و همراه با چند ابزار بصری ساده مانند Live Preview، پشتیبانی از پیش‌پردازنده، پالت‌های رنگی و... ارائه شده که باعث می‌شود کدنویسی بسیار ساده‌تر شود. 

در ابزار براکتس سعی شده تا روی یک جنبه کدنویسی تمرکز کامل وجود داشته باشد. این در حالی‌ست که کد ادیتورهای دیگر مانند سابلایم و... ویژگی‌هایی را برای پشتیبانی زبان‌ها و تکنولوژی‌های مختلف را ارائه می‌دهند. البته فراموش نکنید که با استفاده از براکتس می‌توانید کدهای مربوط به زبان‌های Back-End را نیز نوشت. این ابزار پشتیبانی نسبتا خوبی دارد و برنامه‌نویسان زیادی از آن استفاده می‌کنند. 

در ادامه مطلب قصد دارم شما را با بهترین افزونه‌های این ابزار آشنا کنم:

۱- Emmet

Emmet

Emmet یک افزونه محبوب است و می‌توانید آن را در هر ادیتور مدرنی مشاهده کنید. در این افزونه می‌توانید با استفاده از اختصاراتی که وجود دارد با سرعت بیشتری کدهای HTML و CSS را بنویسید. 

وقتی این افزونه را نصب کردید به صورت خودکار Emmet تمام تگ‌های پیشفرض HTML و CSS را شناسایی می‌کند. استفاده از این ابزار برای زمانی که مشغول کار کردن با فریمورک‌هایی مانند بوت‌استرپ و فاوندیشن هستید بسیار مفید خواهد بود. 

۲- Autoprefixer

Autoprefixer

یکی از مشکلاتی که برنامه‌نویسان CSS دارند این است که باید از اجرا شدن کدهای‌شان در تمام مرورگرهای مختلف مطمئن شوند. به این دلیل که مرورگرهای مختلف از پیشوندهای مختلفی استفاده می‌کنند -البته این مسئله امروزه تا به اندازه بسیار زیادی حل شده-. با در نظر گرفتن این شرایط شما نیاز دارید که به صورت دستی خودتان پیشوندهای متفاوتی را برای مرورگرهای مختلف بنویسید.

Autoprefixer یک افزونه مناسب برای بالا بردن سرعت کدنویسی‌تان است. این ابزار می‌تواند زمان بسیار زیادی را برای شما صرفه جویی کند. با استفاده از این ابزار پیشوندهای مربوط به مرورگرها به صورت خودکار ایجاد می‌شوند.

3- Minifier

کوچک‌ کردن کدها موضوع بسیار مهمی است. برای زمانی که می‌خواهید سرعت بارگذاری وبسایت‌تان بالا برود و در زمان کمتری وبسایت بارگذاری شود نیاز است که مسئله بهینه‌سازی و کوچک کردن کدها را در نظر داشته باشید. وقتی که مشغول نوشتن کدهای CSS/JS هستید بسیار مهم است که کدهای‌تان را قبل از منتشر کردن کوچک کنید. 

Brackets Minifier ابزار بسیار خوبی است که به شما اجازه کوچک کردن کدهای‌تان را به صورت آسان بدون نیاز به قدم‌های اضافی را می‌دهد. وقتی با این ابزار کار کنید، فایل‌های CSS/JSتان کوچک شده و در یک فایل جداگانه با قالب اسمی «filename.min.ext» ذخیره می‌شود.

4- Snippets

Snippets

تنها کدنویسان میزان خسته‌کننده بودن تکرار کردن کدهای مختلف را در یک پروژه می‌دانند. اما چه می‌شد اگر می‌توانستیم یکسری میانبر برای این موضوع تعریف کنیم؟

این افزونه همین کار را انجام می‌دهد. Snippets به شما اجازه می‌دهد که کتابخانه قطعات خودتان را مدیریت و ایجاد کنید. بنابراین از این به بعد می‌توانید قطعه کدهای مربوط به HTML/CSS/JS را در یک چشم به هم زدن بنویسید.

5- AutoSaver

AutoSaver

در براکتس سیستمی تعبیه شده که در صورت ذخیره نکردن یک فایل آن را یادآوری می‌کند. در هر حال ذخیره کردن ویرایش‌های‌تان آن هم در زمانی که نیاز دارید به سرعت تغییرات را بارها و بارها مشاهده کنید ممکن است آزاردهنده باشد. 

با استفاده از این افزونه شما می‌توانید از زدن CTRL+5 بازنشسته شوید، به این دلیل که ابزار بعد از هر تغییر به صورت خودکار سند را ذخیره می‌کند. 

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

6- Lorem Ipsum

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

افزونه Lorem Ipsum برای براکتس این موضوع را حل می‌کند. با استفاده از این افزونه تنها کاری که نیاز است انجام دهید تعیین کردن تعداد کلماتی است که می‌خواهید. بعد از آن متن به صورت جادویی ظاهر می‌شود. برای مثال اگر شما نیاز به ۱۰۰ کلمه دارید تنها کافیست که دستور lorem_wrap100 را بنویسید. متن ظاهر می‌شود.

7- Lorem Pixel

Lorem Pixel

مشابه با افزونه Lorem Ipsum، افزونه Lorem Pixel ابزاری برای قرار دادن تصاویر درست در یک مکان منحصر به فرد است. 

ایجاد تصاویر با استفاده از Lorem Pixel بسیار آسان است. می‌توانید محل‌های قرار گیری مربوط به اندازه تصاویر را درست به صورت بصری قرار دهید. همچنین می‌توانید از طریق URL این کارها را انجام دهید.

8- Any Template

Any Template

خسته‌کننده‌ترین قسمت‌ برای ایجاد یک پروژه از ابتدای کار نوشتن تگ‌های همیشگی است. این موضوع ممکن است مربوط به هر سندی باشد. 

Any Template یک افزونه است که می‌تواند شما را برای حل این مشکل کمک کند. با استفاده از این ابزار شما می‌‌توانید قالب‌های همیشگی کدهای‌تان را به صورتی سریع ایجاد کنید. برای مثال اگر نیاز دارید که یک سند تازه HTML داشته باشید تنها نیاز است که از تگ‌های موجود استفاده کنید. 

9- Tabs

Tabs

براکتس با در نظر گرفتن یک سایدبار به شما قابلیت آسان‌تری را برای کاوش در بین سندها و پوشه‌های مختلف می‌دهد. اما وقتی با سندهای بسیار زیادی کار می‌کند این قسمت به کمی شلوغ و پیچیده خواهد شد که در نهایت باعث می‌شود تا حدی سرخورده شوید. 

این ابزار تب‌هایی با استایل گوگل کروم را به محیط براکتس آورده و سعی می‌کند که به شما در مدیریت کردن سندهای‌تان کمک کند. وقتی این ابزار فعال شد می‌توانید به صورت تمام صفحه و یا حالت عادی بین تب‌های مختلف کاوش کنید.

10- Brackets Icons

Brackets Icons

این مورد یکی دیگر از افزونه‌های کوچک و جذاب است که به شما در مدیریت کردن انواع مختلف سندها در براکتس کمک می‌کند. 

Brackets Icons با در نظر گرفتن آیکون‌های رنگی و منحصر به فرد برای هر سند به شما این قابلیت را می‌دهد که بتوانید راحت‌تر سندها را تشخیص دهید. دیگر نیازی نیست به نام سندها نگاه کنید تنها با یک نگاه سریع روی آیکون‌ها می‌توانید متوجه همه چیز شوید.

11- SFTP Upload

SFTP Upload

نظرتان چیست که بتوانید فایل‌های داخل سرور را درست از طریق خود ادیتور مدیریت کنید؟ در این حالت دیگر نیازی به FTP Clientهای دیگر نخواهید داشت. 

اگر از چنین ویژگی خوشتان می‌آید و فکر می‌کنید که برای‌تان کاربردی خواهد بود، پس بدانید که این افزونه برای شماست. با استفاده از افزونه SFTP Upload شما می‌توانید به صورت مستقیم فایل‌های داخل سرورتان را از طریق براکتس مدیریت کنید.

12- Swatcher

Swatcher

کار کردن با رنگ‌ها در ادیتور براکتس بسیار آسان‌تر از راه‌های دیگر است. افزونه Swatcher یکی از کاربردی‌ترین ابزارهای براکتس است که به سرعت می‌تواند پالت‌های رنگی را برای شما ایجاد کند. روش ایجاد آن از طریق تصاویر، فایل‌های ادوبی و یا SASS/LESS خواهد بود.

این افزونه همچنین قابلیت ایجاد رنگ‌های متفاوت توسط خودتان را نیز فراهم می‌کند. بنابراین می‌توانید در حین نوشتن کدهای CSS پالت رنگی خودتان را نیز ایجاد کنید.

13- ToDo

ToDo

وقتی کدنویسی می‌کنید و فایل های متفاوت بسیاری را مدیریت می‌کنید، سردرگم شدن و بی نظمی به سراغ شما می‌آید. برای مثال یادتان می‌رود که باید مشکلات را حل کنید، کامنت اضافه نمایید و یا اینکه تغییراتی در رنگ‌ها اعمال کنید. اگر با چنین مشکلاتی روبرو شده‌اید این افزونه به شما کمک بسیاری می‌کند.

ToDo یک افزونه براکتس است که قسمتی به ادیتور اضافه می‌کند و کارهایی که باید انجام شوند را به شما یادآوری می‌کنند. می‌توان از این افزونه به عنوان یک مدیر بوکمارک نیز استفاده کنید. 

برای استفاده از این ابزار کافی است به صورت کامنت //TODO:tag را نوشته و سریعا به قسمت مورد نظر فرستاده شوید. 

14- PasteToBin

PasteToBin

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

با استفاده از این افزونه می‌توانید کدهای‌تان را به سادگی انتخاب کرده و آن‌ها را در Pastebin ذخیره کنید. تمام این کارها از طریق براکتس انجام می‌شود. بعد از اینکار ابزار برای شما یک URL ایجاد کرده که می‌توانید آن را با دوستان‌تان به اشتراک بگذارید و یا اینکه بعدا از آن استفاده کنید.

15- WordPress Hints

اگر شما یک طراح وب هستید که با وردپرس کار می‌کنید و برای آن پوسته و افزونه ایجاد می‌کنید، پس این افزونه برای شما کاربردی خواهد بود. 

در این افزونه قابلیت استفاده از توابع و هک های وردپرسی را دارید. این ابزار از توابع مربوط به ووکامرس نیز پشتیبانی می‌کند.

چگونه افزونه‌های Brackets را نصب کنیم؟

برای نصب کردن افزونه‌های براکتس تنها کافی است که بعد از باز کردن ادیتور قسمت Extensions را باز کنید. در زیر با علامت قرمز نشان داده شده است:

از اینجا می‌توانید پوسته‌ها و افزونه‌های‌تان را نصب کنید. تنها کاری که نیاز است انجام دهید این است که نام موردی که می‌خواهید را جستجو کرده و بعد روی دکمه install‌ کلیک کنید. 

تمام شد!

سخن آخر

تا به حال با براکتس کار کرده‌اید؟ از چه افزونه‌هایی استفاده می‌کنید؟ خوشحال می‌شویم که با روند کاری شما آشنا شویم.

منبع

مقالات پیشنهادی

بهترین ابزارهای تجربه کاربری و رابط کاربری در سال 2018

تقاضا برای طرحان رابط کاربری و تجربه کاربری تا به الان، به این حد بالا نبوده است، البته از این موضوع که میزان آن رشد خواهد کرد نیز مطمئن هستم. این موض...

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

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

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

کاربرانی که در اینترنت جستجو می‌کنند و نظاره‌گر هستند، همیشه دوست دارند که وبسایت‌های مقصود‌شان امن و کاربرپسند باشند. آن‌ها تنها به شرکت‌هایی اعتماد...

چگونه GAMIFICATION تجربه‌کاربری را بهتر می‌کند

ساخت محصولاتی که می‌توانند به نیازهای مشتریان پاسخ دهند، به یکی از رویکردهای استاندارد برای ساخت محصول تبدیل شده است. به منظور ایجاد بهترین تجربه در م...