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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پس از کلیک بر روی این گزینه لازم است تا به اینترنت متصل باشید و ترجیحا از فـیلتـرشکــن استفاده کنید، کمی که منتظر بمانید و سپس در باکس باز شده گزینه 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 قرار دهید.

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

آموزش کار با Emmet

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

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

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

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

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

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

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

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

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

برخی خواص مانند 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

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

خواص چندگانه

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

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

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

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

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

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

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

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

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