إنشاء مقتطفات Emmet مخصصة في رمز VS

نشرت: 2022-03-10

ملخص سريع ↬ في هذه المقالة ، يشرح مانويل سبب كون Emmet أحد أدوات الإنتاجية المفضلة لديه لكتابة HTML و CSS ، وكيف يمكنك إنشاء مقتطفات Emmet مخصصة في Visual Studio Code لمساعدتك على تحسين مهام سير العمل الأمامية بشكل أكبر.

في وقت سابق من هذا العام ، شاركت نموذج HTML المعياري الذي أحب استخدامه عند بدء مشروعات ويب جديدة مع شرح سطر بسطر على مدونتي. إنها مجموعة من علامات وسمات <head> التي أستخدمها عادةً في كل موقع ويب أقوم بإنشائه. حتى وقت قريب ، كنت أقوم بنسخ ولصق النموذج المعياري كلما احتجت إليه ، لكنني قررت تحسين سير العمل بإضافته كمقتطف إلى VS Code - المحرر الذي أختاره.

إليك عرض توضيحي سريع للمقتطفات المخصصة التي قمت بإنشائها.

المقتطفات والاختصارات في Visual Studio Code

يأتي VS Code مدمجًا مع مقتطفات مستخدم مخصصة ومقتطفات واختصارات HTML و CSS مقدمة من Emmet.

على سبيل المثال ، إذا كتبت p>a{Sign Up} في مستند HTML وضغطت على Enter أو Tab ، فسيقوم Emmet بتحويله إلى الترميز التالي:

 <p><a href="">Sign Up</a></p>

ملاحظة : قم بزيارة مستندات Emmet للتعرف على كيفية استخدام صيغة الاختصار.

إذا احتجنا إلى هذا الاختصار المحدد بانتظام ، فيمكننا حفظه كمقتطف لتحسين سير العمل لدينا بشكل أكبر.

 { "html": { "snippets": { "signup": "p>a{Sign Up}" } } }

الآن يمكننا كتابة signup والضغط على Enter أو Tab وسنحصل على نفس النتيجة. سأشرح كيفية إنشاء المقتطفات في القسم التالي.

يأتي Emmet مع مجموعة من مقتطفات HTML بشكل افتراضي. على سبيل المثال ، ! ينشئ الهيكل الأساسي لمستند HTML.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

هذا رائع ، ولكن إذا أردنا تكييف هذا المقتطف عن طريق إزالة العناصر والسمات أو إضافتها ، فعلينا استبداله وإنشاء المقتطف الخاص بنا.

إنشاء المقتطفات والكتابة عليها

إذا أردنا إنشاء مقتطفات Emmet الخاصة بنا أو الكتابة فوق الموجود منها في VS Code ، فإن الخطوات التالية ضرورية:

قم بإنشاء ملف snippets.json ، وأضف بنية JSON الأساسية هذه واحفظها في مكان ما على القرص الثابت لديك.
```
 { "html": { "snippets": { } }, "css": { "snippets": { } } }
```
افتح إعدادات VS Code (الرمز ← التفضيلات ← الإعدادات) وابحث عن "مسار ملحقات Emmet".
انقر فوق "إضافة عنصر" ، أدخل المسار إلى المجلد حيث قمت بحفظ ملف snippets.json الذي قمت بإنشائه مسبقًا واضغط على "موافق".

هذا هو. نحن الآن جاهزون لإنشاء مقتطفات عن طريق إضافة خصائص إلى كائنات html و css حيث يكون key هو اسم المقتطف value اختصار أو سلسلة.

بعض مقتطفات HTML المخصصة

قبل أن نتعمق في إنشاء المقتطف وأظهر لك كيف أنشأت مقتطفًا لـ HTML boilerplate ، فلنبدأ الإحماء أولاً ببعض المقتطفات الصغيرة والمفيدة التي قمت بإنشائها أيضًا.

تحميل كسول

من خارج الصندوق ، يوجد اختصار img ، ولكن لا يوجد أي اختصار للصور المحملة بشكل كسول. يمكننا استخدام الاختصار الافتراضي وإضافة السمات الإضافية وقيم السمات التي نحتاجها بين قوسين مربعين.

 { "html": { "snippets": { "img:l": "img[width height loading='lazy']" } } }

img:l + Enter / Tab يقوم الآن بإنشاء الترميز التالي:

 <img src="" alt="" width="" height="" loading="lazy">

صفحة

تتكون معظم الصفحات التي أقوم بإنشائها من معالم <header> و <main> و <footer> و <h1> . يتيح لي اختصار page المخصص إنشاء هذا الهيكل بسرعة.

 "snippets": { "page": "header>h1^main+footer{${0:©}}" }

تنشئ page + Enter / Tab الترميز التالي:

 <header> <h1></h1> </header> <main></main> <footer>©</footer>

هذا الاختصار طويل جدًا ، لذا دعونا نقسمه إلى أجزاء أصغر.

انفصال

قم بإنشاء عنصر <header> وطفل <h1> .

 header>h1

تحرك لأعلى ، والعودة إلى مستوى <header> ، وأنشئ <footer> يتبع <main> .

 ^main+footer

قم بتعيين علامة الجدولة النهائية داخل <footer> وقم بتعيين النص الافتراضي على &copy .

 {${0:©}}

التنقل

يقوم nav باختصار بإنشاء علامة البداية والنهاية <nav> افتراضيًا ، ولكن ما أحتاجه عادةً هو <nav> مع <ul> و <li> عناصر وروابط متداخلة ( <a> ). إذا كانت هناك عدة عناصر <nav> على الصفحة ، فيجب أيضًا تصنيفها ، على سبيل المثال باستخدام aria-label .

 "nav": "nav[aria-label='${1:Main}']>ul>(li>a[aria-current='page']{${2:Current Page}})+(li*3>a{${0:Another Page}})"

هذا يبدو جامحًا ، لذلك دعونا نقسمه مرة أخرى.

انفصال

نبدأ بعنصر <nav> aria-label و <ul> متداخلة. يملأ ${1:Main} السمة بالنص "Main" وينشئ علامة جدولة عند قيمة السمة عن طريق تحريك المؤشر إليها وتمييزها عند الإنشاء.

 nav[aria-label='${1:Main}']>ul

ثم نقوم بإنشاء أربعة عناصر قائمة بروابط متداخلة. العنصر الأول خاص لأنه يميز الصفحة النشطة باستخدام aria-current="page" . نقوم بإنشاء علامة تبويب أخرى ونملأ الرابط بالنص "الصفحة الحالية".

 (li>a[aria-current='page']>{${2:Current Page}})

أخيرًا ، أضفنا ثلاثة عناصر قائمة أخرى مع روابط ونص الارتباط "صفحة أخرى".

 (li*3>a>{${0:Another Page}})

قبل تعديلاتنا ، حصلنا على هذا:

 <-- Before: nav + TAB/Enter --> <nav></nav>

الآن نحصل على هذا:

 <-- After: nav + TAB/Enter --> <nav aria-label="Main"> <ul> <li><a href="" aria-current="page">Current Page</a></li> <li><a href="">Another Page</a></li> <li><a href="">Another Page</a></li> <li><a href="">Another Page</a></li> </ul> </nav>

المزيد بعد القفز! أكمل القراءة أدناه ↓

أسلوب

يؤدي اختصار style الافتراضي إلى إنشاء علامة البداية والنهاية <style> فقط ، ولكن عادةً عندما أستخدم عنصر <style> ، أقوم بذلك لأنني أريد اختبار شيء ما أو تصحيحه بسرعة.

دعنا نضيف بعض القواعد الافتراضية إلى علامة <style> :

 "style": "style>{\\* { box-sizing: border-box; \\}}+{\n${1:*}:focus \\{${2: outline: 2px solid red; }\\} }+{\n${0}}"

انفصال

يجب تخطي بعض الأحرف (مثل $ ، * ، { or } ) باستخدام \\ .

 style>{\\* { box-sizing: border-box; \\}}

\n ينشئ فاصل سطر ويضع ${1:*} علامة الجدولة الأولى عند المحدد * .

 {\n${1:*}:focus \\{${2: outline: 2px solid red; }\\}}

قبل : <style><style>

بعد :

 <style> * { box-sizing: border-box; }
 *:focus { outline: 2px solid red; } </style>

حسنًا ، ما يكفي من الإحماء. لنقم بإنشاء مقتطفات معقدة. في البداية ، كنت أرغب في إنشاء مقتطف واحد للنموذج المعياري الخاص بي ، لكنني أنشأت ثلاثة اختصارات تخدم احتياجات مختلفة.

صغير
متوسط
ممتلىء

Boilerplate صغير

هذا نموذج معياري للعروض التوضيحية السريعة ، فإنه ينشئ ما يلي:

هيكل الموقع الأساسي ،
العلامة الوصفية viewport ،
عنوان الصفحة،
عنصر <style>
أ <h1> .

 { "!": "{<!DOCTYPE html>}+html[lang=${1}${lang}]>(head>meta:utf+meta:vp+{}+title{${2:New document}}+{}+style)+body>(h1>{${3: New Document}})+{${0}}" }

انفصال

سلسلة بنوع المستند:

 {<!DOCTYPE html>}

عنصر <html> lang . قيمة السمة lang هي متغير يمكنك تغييره في إعدادات كود VS (الرمز ← التفضيلات ← الإعدادات).

 html[lang=${1}${lang}]

يمكنك تغيير اللغة الطبيعية الافتراضية للصفحة من خلال البحث عن "متغيرات emmet" في إعدادات VS Code وتغيير متغير lang . يمكنك إضافة متغيراتك المخصصة هنا أيضًا.

يوجد متغيرين افتراضيين في VS Code ، يتم تعيين lang على en وتحويل الأحرف إلى UTF-8.

يتضمن <head> العلامة الوصفية charset ، والعلامة الوصفية viewport ، و <title> ، وعلامة <style> . {} ينشئ سطرًا جديدًا.

 (head>meta:utf+meta:vp+{}+title{${2:New document}}+{}+style)

دعونا نلقي نظرة سريعة على ما يعطينا هذا.

 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>New document</title> </head> </html>

يبدو جيدًا ، لكن meta:utf اختصار ينشئ الطريقة القديمة في HTML لتعريف charset و meta:vp محطتي علامات تبويب لست بحاجة إليها لأنني لا أستخدم أبدًا إعدادًا مختلفًا viewport .

دعنا نكتب فوق هذه المقتطفات قبل أن ننتقل.

 { "meta:vp": "meta[name=viewport content='width=device-width, initial-scale=1']", "meta:utf": "meta[charset=${charset}]" }

أخيرًا وليس آخرًا ، عنصر <body> ، <h1> مع النص الافتراضي ، متبوعًا بعلامة الجدولة النهائية.

 body>(h1>{${3: New Document}})+{${0}}

النموذج النهائي:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>New document</title> <style> * { box-sizing: border-box; } *:focus { outline: 2px solid red; } </style> </head> <body> <h1> New Document</h1> </body> </html>

بالنسبة لي ، هذا هو الحد الأدنى المثالي لإعداد التصحيح.

متوسط Boilerplate

بينما أستخدم النموذج المعياري الأول فقط للعروض التوضيحية السريعة ، يمكن استخدام النموذج المعياري الثاني للصفحات المعقدة. ينشئ المقتطف ما يلي:

هيكل الموقع الأساسي ،
العلامة الوصفية viewport ،
عنوان الصفحة،
فئات .no-js / .js
الشاشة الخارجية وأوراق أنماط الطباعة ،
description والعلامة الوصفية theme-color ،
هيكل الصفحة.

 { "!!": "{<!DOCTYPE html>}+html[lang=${1}${lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{${1: Change me}}+{}+(script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[name=\"description\"][content=\"${2: Change me (up to ~155 characters)}\"]+{<!-- TODO: Change page description --> }+meta[name=\"theme-color\"][content=\"${2:#FF00FF}\"])+body>page" }

نعم ، أعرف أن هذا يبدو مثل رطانة. دعونا نحللها.

انفصال

يشبه doctype والعنصر الجذر في المثال الأول ، ولكن مع فئة no-js إضافية وتعليق يذكرني بتغيير سمة lang ، إذا لزم الأمر.

 {<!DOCTYPE html>}+html[lang=${1}${lang}].no-js>{ }

يجعل امتداد TODO Highlight التعليق رائعًا حقًا.

يبرز الامتداد بعض الكلمات الرئيسية مثل TODO بصريًا.

يتضمن <head> العلامة الوصفية charset ، والعلامة الوصفية viewport ، و <title> . {} ينشئ سطرًا جديدًا.

 (head>meta:utf+meta:vp+{}+title{${1: Change me}}+{}

نص يحتوي على سطر من JavaScript. أنا أقوم بتقطيع الخردل عند دعم وحدة JS. إذا كان المستعرض يدعم وحدات JavaScript النمطية ، فهذا يعني أنه متصفح يدعم JavaScript الحديث (مثل الوحدات ، وبناء جملة ES 6 ، والجلب ، وما إلى ذلك). أشحن معظم JS إلى هذه المتصفحات فقط ، وأستخدم فئة js في CSS ، إذا كان تصميم أحد المكونات مختلفًا ، عندما يكون JavaScript نشطًا.

 (script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}

عنصرا <link> ؛ ترتبط الروابط الأولى بورقة الأنماط الرئيسية والثانية بورقة أنماط الطباعة.

 link:css+link:print+{}

وصف الصفحة:

 meta[name=\"description\"\][content=\"${2: Change me (up to ~155 characters)}\"]+{ }

العلامة الوصفية theme-color :

 meta[name=\"theme-color\"\][content=\"${2:#FF00FF}\"])

عنصر النص وبنية الصفحة الأساسية:

 body>page

تبدو الصيغة النهائية كما يلي:

 <!DOCTYPE html> <html lang="en" class="no-js"> <!-- TODO: Check lang attribute --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Change me</title> <script type="module"> document.documentElement.classList.replace('no-js', 'js'); </script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css" media="print"> <meta name="description" content=" Change me (up to ~155 characters)"> <!-- TODO: Change page description --> <meta name="theme-color" content="#FF00FF"> </head> <body> <header> <h1></h1> </header> <main></main> <footer>©</footer> </body> </html>

كامل Boilerplate

يشبه النموذج الكامل النموذج الثاني ؛ الاختلافات هي علامات meta إضافية وعلامة script .

ينشئ المقتطف ما يلي:

هيكل الموقع الأساسي ،
العلامة الوصفية viewport ،
عنوان الصفحة،
فئات js / no-js ،
الشاشة الخارجية وأوراق أنماط الطباعة ،
description وفتح العلامات الوصفية للرسم البياني ،
العلامة الوصفية theme-color
علامة <link> المتعارف عليها ،
علامات فافيكون ،
هيكل الصفحة ،
علامة < script> .

 { "!!!": "{<!DOCTYPE html>}+html[lang=${1}${lang}].no-js>{<!-- TODO: Check lang attribute --> }+(head>meta:utf+meta:vp+{}+title{${1: Change me}}+{}+(script[type=\"module\"]>{document.documentElement.classList.replace('no-js', 'js');})+{}+link:css+link:print+{}+meta[property=\"og:title\"][content=\"${1: Change me}\"]+meta[name=\"description\"][content=\"${2: Change me (up to ~155 characters)}\"]+meta[property=\"og:description\"][content=\"${2: Change me (up to ~155 characters)}\"]+meta[property=\"og:image\"][content=\"${1:https://}\"]+meta[property=\"og:locale\"][content=\"${1:en_GB}\"]+meta[property=\"og:type\"][content=\"${1:website}\"]+meta[name=\"twitter:card\"][content=\"${1:summary_large_image}\"]+meta[property=\"og:url\"][content=\"${1:https://}\"]+{<!-- TODO: Change social media stuff --> }+{}+link[rel=\"canonical\"][href=\"${1:https://}\"]+{<!-- TODO: Change canonical link --> }+{}+link[rel=\"icon\"][href=\"${1:/favicon.ico}\"]+link[rel=\"icon\"][href=\"${1:/favicon.svg}\"][type=\"image/svg+xml\"]+link[rel=\"apple-touch-icon\"][href=\"${1:/apple-touch-icon.png}\"]+link[rel=\"manifest\"][href=\"${1:/my.webmanifest}\"]+{}+meta[name=\"theme-color\"][content=\"${2:#FF00FF}\"])+body>page+{}+script:src[type=\"module\"]" }

ينشئ هذا المقتطف الطويل بشكل لا يصدق ما يلي:

 <!DOCTYPE html> <html lang="en" class="no-js"> <!-- TODO: Check lang attribute --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Change me</title> <script type="module"> document.documentElement.classList.replace('no-js', 'js'); </script> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css" media="print"> <meta property="og:title" content=" Change me"> <meta name="description" content=" Change me (up to ~155 characters)"> <meta property="og:description" content=" Change me (up to ~155 characters)"> <meta property="og:image" content="https://"> <meta property="og:locale" content="en_GB"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:url" content="https://"> <!-- TODO: Change social media stuff --> <link rel="canonical" href="https://"> <!-- TODO: Change canonical link --> <link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="manifest" href="/my.webmanifest"> <meta name="theme-color" content="#FF00FF"> </head> <body> <header> <h1></h1> </header> <main></main> <footer>©</footer> <script src="" type="module"></script> </body> </html>

مقتطفات CSS مخصصة

من أجل الاكتمال ، إليك بعض مقتطفات CSS التي أستخدمها.

تصحيح

ينشئ هذا المقتطف مخططًا أحمر بحجم 5 بكسل مع إزاحة مخصصة.

 "debug": "outline: 5px solid red;\noutline-offset: -5px;"

توسيط

المقتطف الذي يقوم بتعيين display إلى الثني ، ويقوم بتوسيط العناصر الفرعية الخاصة به.

 "center": "display: flex;\njustify-content: center;\nalign-items: center;"

لزج

يضبط خاصية position على sticky ، مع وجود علامتي جدولة في الخاصية top left .

 "sticky": "position: sticky;\ntop: ${1:0};\nleft: ${2:0};"

عرض توضيحي لجميع مقتطفات CSS الثلاثة المطبقة على عنصر div .

قصاصات المستخدم

في بداية هذه المقالة ، ذكرت أن VS Code يوفر أيضًا مقتطفات مخصصة. يتمثل الاختلاف في Emmet snippets في أنه لا يمكنك استخدام الاختصارات ، ولكن يمكنك أيضًا تحديد علامات الجدولة والاستفادة من المتغيرات الداخلية.

قد تكون كيفية الحصول على أقصى استفادة من مقتطفات المستخدم موضوعًا لمقال آخر ، ولكن إليك مثال على مقتطف CSS مخصص قمت بتحديده:

 "Visually hidden": { "prefix": "vh", "body": [ ".u-vh {", " position: absolute;\n white-space: nowrap;\n width: 1px;\n height: 1px;\n overflow: hidden;\n border: 0;\n padding: 0;\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n margin: -1px;", "}" ], "description": "A utility class for screen reader accessible hiding." }

لا يُنشئ هذا المقتطف قواعد CSS فحسب ، بل يُنشئ كتلة إعلان كاملة عندما vh على Enter أو Tab .

 .u-vh { position: absolute; white-space: nowrap; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0; clip: rect(0 0 0 0); clip-path: inset(50%); margin: -1px; }

الكلمات الأخيرة

يستغرق إنشاء هذه المقتطفات بعض الوقت ، لكن الأمر يستحق الجهد لأنه يمكنك تخصيص Emmet وفقًا لتفضيلاتك الشخصية وأتمتة المهام المتكررة وتوفير الوقت على المدى الطويل.

أرغب في معرفة المقتطفات التي تستخدمها ، لذا يرجى مشاركتها معنا في التعليقات. إذا كنت تريد استخدام إعداداتي ، فيمكنك العثور على موقع مقتطفاتي النهائية على GitHub.

موارد

مقتطفات CSS Emmet الافتراضية
مقتطفات HTML Emmet الافتراضية
ورقة الغش Emmet
Emmet in VS Code docs

إنشاء مقتطفات Emmet مخصصة في رمز VS

المقتطفات والاختصارات في Visual Studio Code

إنشاء المقتطفات والكتابة عليها

بعض مقتطفات HTML المخصصة

تحميل كسول

صفحة

انفصال

التنقل

انفصال

أسلوب

انفصال

Boilerplate صغير

انفصال

متوسط ​​Boilerplate

انفصال

كامل Boilerplate

مقتطفات CSS مخصصة

تصحيح

توسيط

لزج

قصاصات المستخدم

الكلمات الأخيرة

موارد

متوسط Boilerplate