سرعت در کد نویسی CSS و HTML ، بخش اول : کار با پلاگین Emmet

- visibility ٢١ mode_comment

با سلام خدمت تمامی سون لرنی ها.انشا ا... از این به بعد در خدمتتون هستم.

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

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

یکی از بهترین ادیتور ها در زمینه ی کد نویسی ادیتور Sublime Text می باشد.(به نظر من واقعا بهترین ادیتوره)

ابتدا اون رو از از اینجا دانلود کرده و نصب کنید. (اگه با مرورگر کروم کار میکنید که فبها وگرنه پیشنهاد من به شما اینه که از این به بعد با کروم کار کنید.)

sublimeText_thumb

وقتی  Sublime Text  رو نصب کردید ابتدا با اون یه فایل html باز کنید.میتونید از قسمت منوی بالا گزینه ی Edit همه ی میانبر های ادیتور رو به صورت کامل ببینید که خیلی مفید هستند. این بخش رو زیاد توضیح نمیدم فقط میانبر های خیلی کاربردی رو لیست میکنم.

Ctrl+d : انتخاب کلمه (معمولا کلمات داخل کوتیشن را به این صورت انتخاب میکنن)

Ctrl+Shift+Space :  مثل بالایی عمل میکنه فقط مقدار بیشتری از متن رو انتخاب میکنه.برای انتخاب یک قسمت به کار میره.

Ctrl+F : میتونید در کادری که باز میشه کلمه ی مورد نظرتون رو تایپ کنید . مثلا می خواهید هر چی تو صفحه تون کلاسی با نام bar دارید رو به foo تبدیل کنید؛ از همون سمت راست گزینه ی find All رو انتخاب کنید ...

Ctrl+L: خطی که روی اون هستید رو انتخاب میکنه.

End : نشانگر تایپ رو به آخر خط میبره.

Home: نشانگر تایپ رو به اول خط میاره.

خب بیشتر ادامه نمیدم میرم سراغ اصل مطلب.

emmet

بسیاری از کسانی که سریع کدنویسی مینویسند ( مثل خود من ) با افزونه ی Emmet  کار میکنند. ابتدا اون رو از اینجا (Emmet for ST) دانلود و نصب کنید.(نحوه ی نصبش رو هم توضیح داده.)

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

در این پست تنها به اختصارات HTML به صورت کامل می پردازم و در بخش بعد هم ، اختصارات CSS را به طور کامل توضیح میدهم.

اختصارات در HTML

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

مثلا برای نوشتن یک قالب ساده ی html ، حداقل باید 10 خط کد بنویسید که میشود این کار را با نوشتن !(علامت تعجب) و یا html:5 و زدن دکه ی tab  انجام داد.

sublime Text 3

* با نوشتن تگ مورد نظر (بدون < و > مثلا تگ پاراگراف رو به صورت p مینویسید) و تایپ کردن یک مربع (#)، یک تگ پاراگرف با آیدی ای که جلوی مربع نوشتید، میتونید داشته باشید.اگه به جای مربع ، نقطه بذارید به جای id یک تگ با  class مشخص شده دارید.

emmet - sunblime Text

* برای اینکه داخل تگ هاتون متنی داشته باشید میتونید اون متن رو در جلوی تگ داخل { } قرار دهید.یا مثلا برای مشخص کردن خاصیت و مقدار یک تگ میتوینید اون هارو داخل [ ] بنویسید. به تصویر توجه کنید.

emmet - sunblime Text

* دقت داشته باشید اگر تگ رو مشخص نکنید و فقط کلاس یا آی دی رو مشخص کنید یک دایو (div) با کلاس یا آی دیه مشخص شده نوشته میشه. اگر همین کار رو داخل تگ ul کنید به جای یک div، یک تگ li باز میشود.

emmet - sunblime Text

* میتونید تگ هایی که می خواهید در یک خط بنویسید را با + از هم جدا کنید.و همچنین با علامت < میتونید در داخل تگی ، تگ هایی رو که می خواهید اضافه کنید. دقت داشته باشید که علامت  ^ برعکس < کار میکنه. با استفاده از علامت ^ میتونید به عنصر بالایی برید.

Emmet - Sublime Text

* میتونید با استفاده از *(ستاره) از یک تگ یا یک گروه از تگ ها  به تعداد عددی که جلوی ستاره تایپ میکنید، داشته باشید. به تصویر توجه کنید.

Emmet - Sublime Text

* برای اینکه یک گروه رو مشخص کنید میتونید اونهارو داخل پرانتز بزارید.

Emmet - Sublime Text

* میتونید با استفاده از $ ، اعدادی با گام های افزایشی داشته باشید.به تصویر نگاه کنید.

Emmet - Sublime Text

به این صورت هم با دقت و هم با سرعت کدهای HTML تون رو بنویسید.

برای اطلاعات بیشتر سری هم به اینجا بزنید.

خب این بخش هم به پایان رسید. در بخش بعدی اختصارات CSS رو به طور کامل توضیح میدم.

موفق باشید ؛ یا علی

comment دیدگاه کاربران
حدیث بنی اسد

سلام من یه سوال دارم خواهش میکنم جواب بدید در پلا گین emmet وقتی کد مینویسیم و tabمیزنیم و کد اجرا میشود حالا اگه بخواهیم به کد رو تصحیح کنیم و بدون پاک کردن به کدمون برسیم باید کدوم دکمه رو بزنیم

سید مهدی لعل موسوی

سلام ببخشید من که فیلتر شکن ندارم که دانلود کنم اگر میشه فایل رو برام لینک کنید تا دانلود کنم
بعدش بهم بگید که چطور اونو نصب کنم

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2