Emmet در کد استودیو ویژوال

پشتیبانی از قطعه های Emmet و گسترش درست در کد Visual Studio ساخته شده است ، بدون نیاز به برنامه افزودنی. EMMET 2. 0 از اکثر اقدامات EMMET از جمله گسترش اختصارات EMMET و قطعه ها پشتیبانی می کند.

نحوه گسترش اختصارات و قطعه های Emmet

انبارهای مخفف Emmet به طور پیش فرض در HTML ، HAML ، PUG ، SLIM ، JSX ، XML ، XSL ، CSS ، SCSS ، SASS ، فایلهای کمتر و قلم و همچنین هر زبانی که از هر یک از موارد فوق مانند دسته ها و دسته های فوق و به ارث می برند ، فعال می شوند. PHP

هنگامی که شروع به نوشتن مخفف Emmet می کنید ، مخفف نمایش داده شده در لیست پیشنهاد را مشاهده خواهید کرد. اگر مستندات پیشنهادی را باز کنید ، پیش نمایش گسترش را به عنوان تایپ مشاهده خواهید کرد. اگر در یک پرونده شیوه ای قرار دارید ، مخفف گسترش یافته در لیست پیشنهادی که بین سایر پیشنهادات CSS طبقه بندی شده است ، نشان داده می شود.

با استفاده از برگه برای Emmet Expansions

اگر می خواهید برای گسترش اختصارات EMMET از کلید TAB استفاده کنید ، تنظیمات زیر را اضافه کنید:

این تنظیم اجازه می دهد تا با استفاده از کلید TAB برای تورفتگی هنگامی که متن مخفف EMMET نیست ، استفاده کنید.

Emmet هنگام غیرفعال کردن

اگر تنظیمات ویرایشگر را غیرفعال کرده اید. شما هنوز هم می توانید با فشار دادن ⌃space (ویندوز ، Linux Ctrl+Space) پیشنهادات را به صورت دستی ایجاد کرده و پیش نمایش را ببینید.

Emmet را در پیشنهادات غیرفعال کنید

اگر نمی خواهید مخفف Emmet را به هیچ وجه در پیشنهادات مشاهده کنید ، پس از آن از تنظیمات زیر استفاده کنید:

شما هنوز هم می توانید از دستور Emmet استفاده کنید: برای گسترش اختصارات خود ، مخفف را گسترش دهید. همچنین می توانید هر میانبر صفحه کلید را به Command ID Editor. emmet. Action. ExpandabBreviation وصل کنید.

سفارش EMMET

برای اطمینان از پیشنهادات EMMET همیشه در لیست پیشنهادات قرار دارد ، تنظیمات زیر را اضافه کنید:

مخفف Emmet در انواع دیگر پرونده ها

برای فعال کردن انبساط مخفف EMMET در انواع پرونده که در آن به طور پیش فرض در دسترس نیست ، از تنظیمات Emmet. includelanguages استفاده کنید. حتماً از شناسه های زبان برای هر دو طرف نقشه برداری استفاده کنید ، در حالی که سمت راست شناسه زبان یک زبان پشتیبانی شده EMMET است (به لیست بالا مراجعه کنید).

Emmet هیچ آگاهی از این زبان های جدید ندارد ، بنابراین ممکن است پیشنهادات EMMET در زمینه های غیر HTML/CSS وجود داشته باشد. برای جلوگیری از این ، می توانید از تنظیمات زیر استفاده کنید.

توجه: اگر قبلاً از Emmet. syntaxprofiles برای نقشه برداری انواع پرونده های جدید استفاده کرده اید ، از VS Code 1. 15 به بعد باید به جای آن از تنظیم Emmet. includelanguages استفاده کنید. Emmet. SyntaxProfiles فقط برای شخصی سازی فقط خروجی نهایی است.

Emmet با چند گوشه

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

با استفاده از فیلترها

فیلترها پردازنده های ویژه ای هستند که قبل از تولید ویرایشگر ، مخفف گسترش یافته را تغییر می دهند. 2 روش برای استفاده از فیلترها وجود دارد. یا در سطح جهانی از طریق تنظیم Emmet. syntaxprofiles یا مستقیماً در مخفف فعلی.

در زیر نمونه ای از اولین رویکرد با استفاده از تنظیمات Emmet. syntaxprofiles برای اعمال فیلتر BEM برای همه مخفف های موجود در پرونده های HTML آورده شده است:

برای تهیه فیلتر فقط برای مخفف فعلی ، فیلتر را به اختصار خود اضافه کنید. به عنوان مثال ، Div#Page | C فیلتر نظر را در اختصار صفحه#صفحه اعمال می کند.

فیلتر BEM (BEM)

اگر از روش نوشتن HTML از روش اصلاح کننده عنصر (BEM) استفاده می کنید ، فیلترهای BEM برای استفاده شما بسیار مفید هستند. برای کسب اطلاعات بیشتر در مورد نحوه استفاده از فیلترهای BEM ، BEM Filter را در Emmet بخوانید.

می توانید این فیلتر را با استفاده از تنظیمات Bem. ElementSeparator و Bem. ModifierseParator همانطور که در ترجیحات Emmet ثبت شده است ، سفارشی کنید.

فیلتر نظر (ج)

این فیلتر در مورد برچسب های مهم نظرات را اضافه می کند. به طور پیش فرض ، "برچسب های مهم" این برچسب ها با ویژگی شناسه و/یا کلاس هستند.

For example div>div#page>P. title+P | C به گسترش می یابد:

شما می توانید این فیلتر را با استفاده از Filter.commentTrigger ، Filter.commentAfter و Filter.commentbefore تنظیمات تنظیم شده در تنظیمات برگزیده EMMET سفارشی کنید.

فرمت اولویت Filter.commentafter در VS Code EMMET 2. 0 متفاوت است.

به عنوان مثال ، به جای:

در VS Code ، شما از ساده تر استفاده می کنید:

فیلتر تریم (T)

این فیلتر فقط در هنگام تهیه اختصارات برای EMMET قابل استفاده است: بسته بندی با دستور مخفف. این نشانگرهای خط را از خطوط بسته بندی شده حذف می کند.

با استفاده از قطعه های سفارشی Emmet

قطعه های سفارشی EMMET باید در یک پرونده JSON به نام snippets. json تعریف شوند. تنظیم Emmet. ExtensionsPath باید مسیر دایرکتوری حاوی این پرونده را داشته باشد.

در زیر مثالی برای محتوای این پرونده snippets. json آورده شده است.

تألیف قطعه های سفارشی در EMMET 2. 0 از طریق Snippets. json با روش قدیمی انجام همان کار از چند طریق متفاوت است:

قطعه HTML Emmet

قطعه های سفارشی HTML برای سایر طعم های نشانه گذاری مانند HAML یا PUG کاربرد دارند. هنگامی که مقدار قطعه مخفف یک مخفف است و HTML واقعی نیست ، می توان از تحولات مناسب استفاده کرد تا بتواند مطابق نوع زبان ، خروجی مناسب را بدست آورد.

For example, for an unordered list with a list item, if your snippet value is ul>لی ، می توانید از همان قطعه قطعه در HTML ، HAML ، PUG یا SLIM استفاده کنید ، اما اگر مقدار قطعه شما باشد ، فقط در پرونده های HTML کار خواهد کرد.

اگر می خواهید یک قطعه برای متن ساده داشته باشید ، متن را با آن احاطه کنید<> .

قطعه های CSS Emmet

مقادیر قطعه CSS EMMET باید یک نام کامل و یک جفت ارزش باشد.

قطعه های سفارشی CSS برای سایر طعم های صفحه شیوه مانند SCSS ، کمتر یا SASS کاربرد دارد. بنابراین ، یک دنباله را شامل نمی شود. در پایان مقدار قطعه. EMMET بر اساس اینکه آیا زبان به آن نیاز دارد ، آن را در صورت لزوم اضافه می کند.

استفاده نکنید: به نام قطعه.: برای جدا کردن نام و ارزش خاصیت هنگامی که Emmet سعی می کند فازی را با مخفف یکی از قطعه ها مطابقت دهد.

برگه و مکان نما در قطعه های سفارشی

Syntax for Tab در قطعه های سفارشی Emmet متوقف می شود و از نحو TextMate Tangets پیروی می کند.

• از $ ، $ برای توقف برگه و $ برای توقف برگه با صاحبخانه استفاده کنید.
• پیش از این ، |یا $ برای نشان دادن مکان مکان نما در قطعه سفارشی Emmet استفاده شد. این دیگر پشتیبانی نمی شود. به جای آن از $ استفاده کنید.

پیکربندی Emmet

در زیر تنظیمات EMMET وجود دارد که می توانید برای سفارشی کردن تجربه EMMET خود در VS Code استفاده کنید.

از این تنظیمات برای اضافه کردن نقشه برداری بین زبان مورد نظر خود و یکی از زبانهای پشتیبانی شده EMMET استفاده کنید تا EMMET را در حالت قبلی با استفاده از نحو دومی فعال کنید. حتما از شناسه های زبان برای هر دو طرف نقشه برداری استفاده کنید.

اگر زبانی وجود دارد که شما نمی خواهید Emmet را ببینید ، آن را در این تنظیم اضافه کنید که مجموعه ای از رشته های ID زبان را می گیرد.

برای یادگیری چگونگی سفارشی کردن خروجی اختصارات HTML خود ، به سفارشی سازی Emmet از پروفایل خروجی مراجعه کنید.

متغیرهای مورد استفاده توسط قطعه های Emmet را سفارشی کنید.

پیشنهادات EMMET را که در لیست پیشنهادات/تکمیل نشان داده می شود ، کنترل می کند.

توجه: در حالت همیشه ، اجرای جدید EMMET زمینه ای نیست. به عنوان مثال ، اگر شما در حال ویرایش یک فایل React JavaScript هستید ، نه تنها هنگام نوشتن نشانه گذاری بلکه هنگام نوشتن JavaScript ، پیشنهادات EMMET را دریافت خواهید کرد.

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

به عنوان مثال ، هنگامی که شما LI را تایپ می کنید ، برای همه قطعه های Emmet با شروع Li مانند LIK ، LINK: CSS ، LINK: Favicon و غیره پیشنهاداتی دریافت می کنید. این در یادگیری قطعه های Emmet مفید است که هرگز نمی دانید وجود داشته باشد مگربشر

در برگه های سبک یا هنگامی که Emmet. showexpandedabbreviation تنظیم نشده است ، کاربردی نیست.

مکان دایرکتوری را که در آن پرونده snippets. json قرار دارد که به نوبه خود دارای قطعه های سفارشی شما است ، فراهم کنید.

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

اگر درست تنظیم شود ، پیشنهادات EMMET به همراه سایر قطعه ها به شما امکان می دهد تا آنها را طبق تنظیمات ویرایشگر سفارش دهید. این مورد را روی True و Editor. snippetsuggestions قرار دهید تا اطمینان حاصل شود که پیشنهادات EMMET همیشه در بین سایر پیشنهادات ظاهر می شود.

می توانید از این تنظیم برای سفارشی کردن EMMET به عنوان مستند در تنظیمات Emmet استفاده کنید. در حال حاضر سفارشی سازی های زیر پشتیبانی می شوند: