عباس صادقی

وبلاگ‌نویس و تولیدکننده محتوا

افزایش سرعت کدنویسی با افزونه 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 فایل شما یکباره نوشته خواهند شد.

html:5

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

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

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

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

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

رفع خطای PyV8

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

ابتدا به صفحه 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 هستند که چندین حالت بالا، راست، پایین و چپ را دارند که در حالت عادی آنها را مانند زیر می‌نویسید.

margin-top:10px;
margin-right:20px;
margin-bottom:30px;
margin-left:40px;

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

margin: 10px 20px 30px 40px;

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

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

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

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

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

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

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

خواص چندگانه

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

margin-top: 10px;
padding-top: 30px;
margin-bottom: 50px;
margin-bottom: 10px;

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

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

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

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

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

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

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

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

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

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

[اختصارات کدنویسی با افزونه Emmet]

امتیاز نوشته
[۳.۵ امتیاز از مجموع ۴ رای]

درباره عباس صادقی

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


دسته‌بندی‌ها: کدنویسی

انتخاب هاست مناسب چه معیارهایی دارد؟! » « سلام دنیا !

4 دیدگاه

  1. برای شروع برنامه نویسی سایت کدام زبان رو پیشنهاد
    می کنید

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

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

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

پاسخ دهید

نشانی ایمیل شما منتشر نمی‌شود.

*

هیچ حقی، برای هیچ‌کس محفوظ نیست

پوسته از Anders | فونت | میزبان‌فا | بالا ↑