آموزش نرم افزار براکت

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

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

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

1. دانلود Brackes:

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

2- باز کردن پروژه:

روش اول: کل فولدر رو درگ اند دراپ بکشیم داخل براکت (داخل این فضای مشکی رنگ می اندازیم).

روش دوم: اگه براکت نصب باشه رو سیستم تون روی فولدر پروژه کلیک راست کنید یک گزینه هست به نام

open as Brackes projects.

3- نمایش بصورت زنده:

براکت با کروم هماهنگه و خیلی سریع و بدون ذخیره می تونید تغییرات تون رو ببینید.

حتی می تونید پروژه css رو باز کنید و مثلا اندازه تگ های p رو 100px کنید بصورت زنده بهتون نشون می شده که این اندازه چقدر است.

این امکان برای css خیلی کاربردیه مخصوصا جاهایی که خیلی سلیقه ای است. مثلا می خوایم ببینم این کد رنگ به متن مون میاد یا نه سریع تست می کنیم :)

کلید میانبر نمایش بصورت زنده براکت:

ctrl+alt+p

4- کلید میانبر F2:

اگه می خوایم پروژه ای که داریم کار می کنیم روش اسمش رو عوض کنیم F2 رو بزنید.

نکته: به فرمت پروژه توجه کنید مثلا پروژه CSS است یه همچین اسمی باید داشته باشه:

style.css

یا

rtl.css

پروژه html است یه همچین اسمی باشد:

index.html

نتیجه گیری: باید فرمت پروژه رو آخر نام خودمون تعیین کنیم.

5- مرتب کردن کدها در Brackes:

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

ctrl+alt+L

6- ویرایش سریع در براکت:

خیلی از این امکان استفاده کنید:

مثلا: کلی کدنویسی کردیم و کلی استایل دادیم مثلا می خوایم کلاس ali. رو استایل هاش رو هم ببینم. خوب یه راهکار اینه که بریم در سند استایل ها و دنبالش بگردیم و یه امکان هوشمندانه براکت هم به شرح زیر است:

در فایل html مون روی تک یا کلاس مربوطه نگه داریم و کلید میانبر ctrl+e را فشار دهیم.

به تصویر بالا دقت کنید. بعد فشردن ctrl+e بصورت سریع یک کادر باز می شود و همون جا تغییرات تون رو می دید.

7-quick Docs

اگر مثلا استایل های css رو یادتون رفت با این ویژگی (attribute) می تونید کلی چیز یاد بگیرید ......:(

مثلا نمی دونیم چه مقادیری با border-radus بکار می ره ---------> روی اون استایل رو های لایت می کنیم و کلید میانبر زیر رو فشار می دهیم.

ctrl+k

تازه اگه اطلاعات تکمیلی هم بخوایم ما رو به سایت مرجع می بره.

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

7- quickView هنگام هاور

با انجام این کار وقتی موس می ره روی اون استایل بصورت سریع می تونید استایل رو بفهیمد. مثلا می خواید بدونید fff# چه رنگیه وقتی این ویژگی رو در براکت فعال کنید، وقتی موس می ره روش نشان می دهید.

برای فعال کردن این مورد باید مسیر زیر را طی کنید

view-------> quickView on hover

به تصویر زیر توجه کنید

8- باز کردن سریع پروژه در براکت:

مثلا فرض می کنیم پروژه مون فایل های زیادی داره پیدا کردن اش سخته اگر فقط اسم اون فایل مد نظر رو یادتون هست کافیه! میانبر زیر را فشار دهید و یک کادر باز می شه می تونید اسم پروژه رو سرچ کنید داخلش

ctrl+shift+o

9- بایک اشاره سریع تایپ کن

این ویژگی برای برنامه نویسای تنبل عالیه!

البته تنبل هم نباشید بازم استفاده کنید ازش اما اگه تازه برنامه نویسی رو دارید یاد می گیرید از این قابلیت استفاده نکنید چون باعث می شه خیلی وابسته به این موضوع شوید و نتوانید خیلی از کد ها رو حفظ کنید بعد اگه جایی گیر افتادید ممکنه فکر کنن آماتور هستید!!!!!!!!!!!!!!!!

خوب این ویژگی که مثل شمشیر دولبه است code Hinting هست. مثلا کلمه style رو می خواید تایپ کنید، به محض اینکه به st می رسید نرم افزار متوجه می شه و ادامه شو براتون تایپ می کنه.

غیر فعال کردن این قابلیت:

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

برید و فولدر CSSCodeHints و HTMLCodeHints رو داخل پوشه دیگه ای بزارید که براکت این پلاگین رو نخونه.

پی نوشت: یه newfolder بازکنید و اونجا بزارید بعدا که دستتون راه افتاد به جای اولیه بازگردانید.

10- بزرگ و کوچک کردن سایز نوشته ها در نرم افزار براکت:

اگه یکم چشماتون خدایی نکرده ضعیف شده به این روش ها سایز کد ها رو می تونید بزرگ یا کوچک کنید:

ctrl++ بزرگنمایی

ctrl+- کوچک نمایی

ctrl+0 بازگشت به حالت اول

11- بررسی استاندارد بودن کدنویسی:

یکی از چیز هایی که خیلی می تونه اعصاب کدنویس رو خورد کنه اینه که با یک خطای کوچک ممکنه کل کار ها به هم بریزه.

برای اینکه بفهمیم کدنویسی مون خطایی نداره در Brackets پایین گزینه ها error ها رو میگه وقتی روش کلید کنید ما رو می بره به اون کدی که اشتباه نوشته شده.

روش دوم:

سایت w3.org متولی نهاد html هست. با این امکان می تونید وبسایت رو که کد زدید رو از نظر استاندارد بودن کد ها بررسی کنید.

در این سایت هم می تونید url وارد کنید هم فایل رو بریزید هم اینکه کل کد ها رو کپی , past کنید.

12- وقتی می ری روی یک خطِ کد، هایلایت بشه

این کار رو انجام بدید متوجه می شید که چی می گم. برای این کار به تصویر زیر توجه کنید:

13- دوپلیکیت کردن یک خط

اگر می خواید یک خط کد دو تا بشه برید روی اون خط مدنظر و کلید میانبر زیر رو فشار دهید:

ctrl+D

پاک کردن خط مد نظر

ctrl+shift+D

14- کامنت کردن کد ها:

برای کامنت کردن کد های مد نظر رو هایلایت کنید و کلید میانبر زیر رو فشار دهید:

ctrl+/

از بین بردن کامنت:

ctrl+shift+/

مثلا این بخش زیر رو می خوایم از دید مرورگر پنهان کنیم و از دید برنامه نویس نمایان کنیم (کامنت کنیم)

هایلایت کنید و /+ctrl رو بزنید به همین سادگی.........!

15- شورتکد ها:

ctrl+F جستجو در فایل

ctrl+SHIFT+F جستجو در کل پروژه

ctrl+H جایگزین کردن یک کلمه با دیگر کلمه

ctrl+SHIFT+F جستجو در کل پروژه

ctrl+Shift+H جایگزین کردن یک کلمه با دیگر کلمه در کل پروژه

وقتی می خواهم یک خط کد مون رو جابه جا کنیم و بالا و پایین ببریم:

ctrl+shift+ فلش رو به بالا یا پایین

16- متن طولانیه می زنه بیرون:

فکر کنم عنوان گویا بود. مثلا تگ p مون خیلی طولانیه و به سمت راست همین طور ادامه پیدا می کنه به این word Wrap یا ترجمه گوگلی اش می شه بسته بندی کلمات باید فعال کنیم.

برای این منظور مثل عکس زیر عمل کنید:

17- افزودنی ها و ماژول های براکت:

اگر مثل من امکانات زیاد از یک نرم افزار رایگان می خواهید می تونید برید به آدرس زیر و ماژول ها (افزونه) دلخواه رو بسته به نیاز دانلود کنید.

file --------> extensionManager

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

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

1 - در بخش extensionManager براکت این عبارت را جستجو کنید: Beaut

این افزونه باعث می شه کد ها تون خوشکل بشه :

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

ctrl+alt+b

لینک افزونه

2 - سرعت و لذت در کدنویسی با استفاده از افزونه emmet:

این افزونه فقط برای براکت نیست و قابل نصب روی 14 ادیتور معروف بالاست.

3 - کاهش حجم کدها (Minify) با افزونه minifier

بعد از نصب افزونه با فشردن میانبر Cmd/Ctrl+Alt+M می توانید کدهای خود را کاهش حجم دهید.

من یه سرچ کردم این سایت ها رو دیدم که آموزش می دادن ولی آموزش هاشون رو هنوز ندیدم که بدونم کدام خوبه:

1- ویلرن

2- آکادمی آی تی

جزوتشون رایگانن و فارسی آموزش می ده.

خیلی ممنون از اینکه با من بودید و این متنی رو که با کلی عشق و ذوق که تا ساعت 12:41 دقیقه شب طول کشید رو خوندید.

در واقع مطالب این مقاله گاها فرار است می توانید این متن رو در یک فایل ورد ذخیره کنید (کپی رایتش مهم نیست) و هر موقع چیزی یادتون رفت استفاده کنید.

حتما حتما حتما اگر چیزی از نرم افزار براکت می دونید حتما با ما در دیدگاه های این مقاله به اشتراک بگذارید.