کدنویسی

افزایش سرعت کدنویسی با افزونه Emmet

افزایش سرعت کدنویسی با Emmet

با درود فراوان خدمت همراهان گرامی!

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

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

افزونه‌ای که قصد معرفی آن را دارم با نام Emmet منتشر شده است و در محیط‌هایی همچون sublime text، اکلیپس، ++notepad و… می‌توانید از آن استفاده کنید.

Emmet یک پلاگین کاربردی و رایگان است که با استفاده از آن می‌توانید سرعت کدنویسی خود را در ادیتورهایی که از آن پشتیبانی می‌کنند افزایش دهید.

افزایش سرعت کدنویسی با Emmet

آموزش نصب emmet

در این آموزش قصد دارم تا از افزونه Emmet برای ادیتور sublime text بپردازم لذا در اولین اقدام اگر برنامه Sublime Text را نصب نکرده‌اید ابتدا از وبسایت رسمی آن نسخه مورد نظر را بر اساس سیستم عامل خود دانلود کرده و نصب نمایید.

حال برای نصب افزونه Emmet لازم است تا آن را از طریق منوی Preferences> Package Control نصب و فعال کنید، به احتمال زیاد این گزینه در حال حاضر در برنامه sublime text شما وجود ندارد و لازم است تا آن را فعال کنید.

برای فعال سازی گزینه Package Control ابتدا به وبسایت packagecontrol.io مراجعه کرده و بر اساس نسخه برنامه sublime text که از آن استفاده می‌کنید کد مورد نظر در صفحه را مشابه تصویر زیر کپی نمایید.

در اینجا من از نسخه sublime text 3 استفاده می‌کنم بنابراین باید از تب مربوط به این نسخه استفاده کنم.

آموزش نصب افزونه Emmet در sublime text
آموزش نصب افزونه Emmet در sublime text

حال پس از اینکه کد مورد نظر را کپی کردید در محیط برنامه sublime text کلیدهای ترکیبی ` ctrl (کلید ctrl به همراه کلیدی که در زیر دکمه esc کیبورد شما در حالت زبان انگلیسی قرار دارد) را انتخاب کنید تا در باکس باز شده مانند تصویر زیر کد کپی شده را وارد کرده و بر روی دکمه Enter کلیک کنید.

فعال سازی گزینه Package Control در sublime text
فعال سازی گزینه Package Control در sublime text

حال برنامه sublime text را بسته و مجددا باز کنید، خواهید دید که گزینه Package Control در آن افزوده شده است.

حال مطابق تصویر زیر بر روی این گزینه کلیک کرده و سپس گزینه install packages را انتخاب کنید.

آموزش نصب emmet در sublime text
آموزش نصب emmet در sublime text

پس از کلیک بر روی این گزینه لازم است تا به اینترنت متصل باشید و ترجیحا از فـیلتـرشکــن استفاده کنید، کمی که منتظر بمانید و سپس در باکس باز شده گزینه Emmet را وارد کرده و پس از نمایش آن بر روی آن کلیک کنید تا نصب شود.

آموزش نصب emmet
آموزش نصب emmet

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

حال نصب با موفقیت انجام شده است، یک فایل html در sublime ایجاد کرده و آن را ذخیره نمایید سپس مجددا فایل مورد نظر را سابلایم باز کرده و کد زیر را در آن وارد کرده و بر روی دکمه Tab یا Ctrl + E کلیک کنید، خواهید دید که کدهای اصلی بدنه html فایل شما یکباره نوشته خواهند شد.

[php] html:5
[/php]

آموزش تصویری نصب افزونه emmet

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

 ابتدا افزونه Emmet را از گیت‌هاب دانلود کرده و سپس آن را از حالت فشرده خارج کرده و پوشه‌ای که با نام emmet-sublime-master می‌باشد را به نام Emmet تغییر نام دهید.

دانلود افزونه Emmet

حال وارد برنامه sublime text شده و از بخش preferences بر روی گزینه Browse Package کلیک کنید، پس از کلیک بر روی این گزینه پنجره‌ای برای شما باز خواهد شد که می‌بایست پوشه Emmet را که در مرحله قبل تغییر نام دادید را کپی کرده و در آن قرار دهید.

حال sublime text را بسته و مجددا آن را باز کنید و مجددا مانند مرحله قبل یک فایل html ایجاد کرده و سپس html:5 را در آن وارد کرده و کلید Tab را فشار دهید.

رفع خطای PyV8

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

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

دانلود PyV8

بر روی منوی preferences در sublim کلید کرده و سپس گزینه Browse Package را انتخاب کرده و یک پوشه به عقب برگردید و مشابه تصویر زیر پوشه PyV8 را کپی کرده و در پوشه Installed Packages آن را قرار داده و sublime را بسته و مجددا منتظر بمانید تا لود شود، در صورتی که باز هم با این خطا مواجه شدید پوشه PyV8 را کپی کرده و یک نسخه دیگر نیز از آن در پوشه Packages قرار دهید.

رفع خطای PyV8 هنگام نصب emmet در sublime text
رفع خطای PyV8 هنگام نصب emmet در sublime text

حال می‌توانید از Emmet لذت ببرید 🙂

آموزش کار با Emmet

کار کردن با Emmet کدنویسی را برای شما آسان‌تر و شیرین‌تر خواهد کرد و می‌توانید در زمان خود صرفه‌جویی کنید. به عنوان نمونه اگر از Emmet استفاده کنید دیگر لازم نیست تا خط به خط تمامی کدهای مربوط به یک سند html را وارد کنید. با تایپ کردن html:5 و فشردن کلید Tab بدنه اصلی فایل html برای شما نوشته خواهد شد.

آموزش کدنویسی با emmet
آموزش کدنویسی با emmet

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

یا اینکه فرض کنید قصد دارید تا برای یک پاراگراف یک کلاس یا آی‌دی را وارد کنید، مسلما برای این کار شروع خواهید کرد به نوشتن گاراکترهایی همچون <،” و… اما نیازی به این کار نیست کافی‌است تا اختصار پاراگراف که p می‌باشد را وارد کرده و سپس برای یک کلاس مشخص از نقطه و برای آی‌دی از # استفاده کنید و در نهایت نام کلاس یا آی‌دی مورد نظر را وارد کرده و کلید تب را فشار دهید.

آموزش تصویری Emmet
آموزش تصویری Emmet

در ادامه به ذکر چند نمونه مثال دیگر می‌پردازیم، همراه باشید..

با استفاده از افزونه Emmet می‌توانید در زبان‌هایی همچون html، Css، XML و… که از آن پشتیبانی می‌کنند کدهای میانبر و اختصارات را وارد کرده و با فشردن کلید Tab کد کاملی از آن را ببینید.

به عنوان نمونه فرض کنید تا در فایل استایل می‌خواهید اندازه فونت المان‌ها را مشخص کنید، برای این کار کافی است تا مشابه تصویر زیر کلید fz را تایپ کرده و سپس دکمه Tab را انتخاب کنید.

افزایش سرعت کدنویسی
افزایش سرعت کدنویسی

ماجرا به اینجا ختم نمی‌شود، حال که دانستید خاصیت‌های هر زبان چگونه استفاده می‌شوند نوبت این است تا به آنها مقداردهی کنیم، برای این منظور در مثال قبل کافی است تا fz16 را وارد کنید تا فونت شما را برابر با ۱۶ پیکسل قرار دهد.

افزایش سرعت کدنویسی با Emmet
افزایش سرعت کدنویسی با Emmet

حال شاید این سوال برایتان پیش بیاید که بخواهید از واحدهای دیگری به غیر از px مانند em یا درصد استفاده کنید، برای این منظور کافی است تا پس از هر مقدار به ترتیب برای em کاراکتر e و برای درصد کاراکتر % را مانند نمونه زیر وارد کنید.

افزایش سرعت کدنویسی با Emmet
افزایش سرعت کدنویسی با Emmet

مقداردهی چندگانه

برخی خواص مانند margin و padding در css هستند که چندین حالت بالا، راست، پایین و چپ را دارند که در حالت عادی آنها را مانند زیر می‌نویسید.

[css] margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;
[/css]

اگر بخواهیم کد فوق را به صورت خلاصه و بهینه‌تر در css وارد کنیم آن را به شکل زیر خواهیم نوشت

[css] margin: 10px 20px 30px 40px;
[/css]

اما این وضعیت در Emmet فرق دارد و خلاصه‌تر از این نیز می‌توانید کدها را وارد کنید تا به این شکل درآیند. برای این منظور کافی است تا ابتدا m را تایپ کرده و هر اندازه را با یک خط تیره از هم جدا کرده و تایپ نمایید و در نهایت بر روی کلید tab کلیک کنید.

[css] m10-20-30-40
[/css]
افزایش سرعت در کدنویسی با Emmet
افزایش سرعت کدنویسی با Emmet

کار با رنگ‌ها در Emmet

برای افزودن رنگ نیز می‌توانید مانند فوق عمل کنید تنها کافی است تا ابتدا عبارت C که معرف color می‌باشد را وارد کرده و سپس کاراکتر # را قرار داده و در انتها کد رنگ خود را وارد کرده و کلید tab را انتخاب کنید.

افزایش سرعت در کدنویسی با Emmet
افزایش سرعت کدنویسی با Emmet

خواص چندگانه

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

[css] margin-top: 10px;
padding-top: 30px;
margin-bottom: 50px;
margin-bottom: 10px;
[/css]

برای این منظور نیاز نیست خط به خط خلاصه‌ای از کدها را وارد کنید، کافی است تا مانند نمونه زیر خلاصه هر کد را به همراه کاراکتر + وارد کرده و در انتها کلید tab را انتخاب کنید تا خروجی فوق را مشاهده کنید.

افزایش سرعت کدنویسی با Emmet
افزایش سرعت کدنویسی با Emmet

استایل‌دهی چندگانه در Emmet

با استفاده از emmet می‌توانید کلیه خواص یک div را به صورت اختصار وارد کرده و در نهایت بر روی کلید tab کلیک کنید تا خروجی کامل یک کلاس را مشاهده کنید، به مثال زیر توجه کنید.

در این نمونه خواص مربوط به یک کلاس را به صورت اختصار در یک خط وارد کرده و خروجی آن را مشاهده کنید.

خلاصه‌نویسی استایل در Emmet
خلاصه‌نویسی استایل در Emmet

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

برای این منظور کلیه اختصارات مربوط به افزونه Emmet را برای شما آماده نموده‌ام که با مراجعه به لینک زیر می‌توانید از آنها استفاده نمایید.

اختصارات کدنویسی در Emmet

امتیاز نوشته:

میانگین امتیازها: ۵ / ۵. ۷

عباس صادقی

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

۱۸ دیدگاه

    1. سلام، برای شروع شما لازمه تا ابتدا زبان‌های HTML و CSS را فرا بگیرید و بعدش به جاوا اسکریپت و جی‌کوئری و… بپردازید تا بتونید سایت حرفه‌ای‌تری طراحی کنید. بعد از اینکه به صورت کامل به این زبان‌ها پیدا کردین میتونید از زبان‌های php، asp و یا پایتون استفاده کنید. حالا بر اساس اینکه با کدوم راحت‌ترید و قصد دارید تا چه نوع سایتی طراحی کنید.
      معمولا چون بیشتر کاربران دنبال اینن تا سایت با وردپرس یا جوملا تحویل مشتری بدن به دنبال زبان php میرن که بستگی به خودتون داره کدوم زبان را انتخاب کنید.

      1. سلام عباس جان
        دیدم به کامنت ربات پاسخ دادی!! خواستم بگم این ربات مال سایت زومیته که میره تو وبلاگ و سایتای مرتبط با برنامه نویسی کامنت میزاره تا بک لینک موثر بگیره!
        تو وبلاگ منم همچین سوالی پرسیده بود! ولی از جایی که تو چندجا هم دیده بودم تایید نکردم!

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

  1. سلام بنظرم emmet نصب شد اما tab کارایی لازم رو نداره و از ctrl+E استفاده می کنم در حالت HTML:5 که گفتید، درست عمل میکنه، ولی وقتی FZ رو وارد میکنم و بعد «کنترل ای» میزنم این تایپ میشه:

    چطور میشه درستش کرد؟
    ممنون

  2. سلام. بنده نرم افزار رو نصب کردم طبق آموزش ها پیش رفتم افزونه Emmet رو هم نصب کردم اما هیچ یک از شرت کد ها اجرا نمیشوند. راهنمایی میکنید ؟ ممنون.

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

      1. تشکر از راهنماییتون. یه سوال دیگه هم دارم اینکه بنده به اشتباه زدم که منوی نرم افزار هاید بشه و حالا نمیدونم دوباره چطوری بیارم. از سابلایم ورژن ۳ استفاده میکنم.

        1. دکمه Ctrl-Shift-P رو که زدید یه پنجره باز میشه، داخلش کلمه menu رو که تایپ کنید عبارت Toggle Menu نشون داده میشه که با کلیک کردن روی این گزینه منو نمایش داده میشه.

  3. سلام و وقت بخیر
    emmet برای سابلایم رو نصب کردم، py78 فکر میکنم نصب شد، بعد سابلایم رو بستم که رستارت بشه. حالا سابلایمم باز نمیشه و با این ارور مواجه میشم:
    error trying to parse settings:expected value in Packages\User\Emmet.sublime-settigs:1:1
    ممنون میشم راهنماییم کنید.

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

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

همچنین ببینید
بستن
دکمه بازگشت به بالا