اسنیپت (Snippet)ها تکه کدهایی هستند که با نوشتن یک کلمه کلیدی و با زدن دکمه tab در کد شما ظاهر می شوند و سرعت نوشتن کد را به مراتب بالاتر می برند.
در این مطلب قصد داریم تا نکات مربوط به اسنیپت ها را در ویرایشگر متن سابلایم بیان کنیم. اگر با سابلایم آشنایی ندارید می توانید از این مطلب در سایت شروع کنید.
نحوه استفاده
از منوی tools گزینه …snippet را انتخاب کنید. سابلایم لیستی از اسنیپت های موجود و مناسب برگه ای که در آن هستید به شما نشان می دهد. مثلا اگر سینتکس برگه ای که باز است html باشد, اسنیپت های مربوط به html ظاهر می شود.
همینطور می توانید جعبه دستورات را با کلید ترکیبی Ctrl + Shift + P باز کنید و کلمه Snippet را وارد کنید.
در قسمت سمت راست لیستی که سابلایم نمایش می دهد, کاراکترهایی که باید نوشته شود تا از آن اسنیپت بتوانیم استفاده کنیم نوشته شده اند و بعد از ویرگول هم کلیدی که اسنیپت را اجرا می کند نوشته شده است:
توجه کنید که در مثال ما کاراکترهای کلیدی m@ بودند و کلید مورد نیاز برای کامل کردن اسنیپت کلید tab بود.
ساخت اولین اسنیپت
برای ساخت اسنیپت از منوی tools گزینه New Snippet را انتخاب کنید. برگه ای شامل چند تگ باز می شود که در این قسمت ها اطلاعاتی که سابلایم نیاز دارد تا اسنیپت شما را بدرستی بشناسد و اجرا کند, وجود دارد که در ادامه توضیح می دهیم هر کدام از این قسمت ها چه هستند.
Content
محتوای اصلی اسنیپت اینجا نوشته می شود, این همان چیزی است که شما می خواهید زمانی که کلید tab را زدید آشکار شود.
محتوا حتما باید در قسمت <![CDATA[…]]> قرار بگیرد.
و نکته خیلی مهم اینکه اگر دارید اسنیپتی می نویسید که نیاز به تورفتگی در اول خطوط دارد همیشه از tab استفاده کنید نه space چرا که اگر با tab بنویسید زمانی هم که بخواهید تورفتگی ها با space نمایش داده شوند, تورفتگی های اسنیپت شما به صورت خودکار به space ترجمه می شوند.
tabTrigger
در اینجا کاراکترهایی را می نویسید که می خواهید بعد از اینکه آنها را نوشتید و کلید tab را زدید, اسنیپت شما اجرا شود. به عنوان نمونه در مثال اول در اینجا m@ نوشته شده است.
Scope
در اینجا مشخص می کنید که اسنیپت شما در چه محیطی مورد استفاده قرار بگیرد. مثلا ما نمی خواهیم اسنیپت های مربوط به html در برگه های css هم اجرا شوند پس این قسمت را به درستی پر می کنیم.
برای اسنیپت html می نویسیم:
<scope>text.html</scope>
همینطور برای css داریم:
<scope>source.css</scope>
این هم یک لیست تقریبا کامل از scope هایی که شاید نیاز داشته باشید. (مثلا برای sass)
اسنیپتی قوی تر
در زمان ساخت اسنیپت می توانید تعیین کنید که بعد از اینکه اسنیپت اجرا شد نشانه گر در چه مکانی از محتوای آن قرار بگیرد. و حتی می توانید چند مکان را تعیین کنید و با زدن کلید tab در بین آنها حرکت کنید و با کلید ترکیبی Shift + tab به عقب برگردید. این کار را با نوشتن علامت $ همراه با یک عدد انجام می دهیم که عدد نشان دهنده ترتیب حرکت است.
بسیار خوب, تا اینجای کار:
حتی می توانید به روش زیر عمل کنید تا قابلیت این را داشته باشید که همزمان چند مکان را ویرایش کنید:
همچنین می توانید برای جایی که قرار است نشانه گر قرار بگیرد مقادیر پیشفرض در نظر بگیرید. کافی است بصورت زیر عمل کنید:
<script async src="${1:script}/${2:script}.js"></script>
ذخیره کردن
بعد از اینکه اسنیپت خود را طراحی کردید با زدن کلید ترکیبی Ctrl + S فایل را در پوشه User که در پوشه packages سابلایم قرار دارد ذخیره کنید. اگر مسیر پوشه packages را نمی دانید کافی است در جعبه دستورات سابلایم بنویسید: browse packages تا پوشه باز و مسیر مشخص شود.
پیشنهاد من این است که از اول فایل هایتان را مرتبط ذخیره کنید. مثلا یک پوشه به نام Snippet در پوشه User بسازید و در آن مثلا برای اسنیپت های مربوط به html یک پوشه html داشته باشید و الی آخر…
پسوند فایل اسنیپت را باید برابر sublime-snippet قرار دهید. مثلا برابر اسنیپت سایه ها باید می نوشتیم:
boxshadow.sublime-snippet
استفاده از اسنیپت های دیگران
همیشه وقتی یک فریم ورک جاوااسکریپت و یا php معروف می شوند به سرعت اسنیپت های مربوط به آنها هم نوشته می شوند. پس کافی است همانوطور که پلاگین ها را نصب می کنید, اسنیپت ها را نیز برای خود نصب کنید و سرعت کد نویسی خود را بالا ببرید:
برای بررسی دقیقا به مستندات رسمی سابلایم مراجعه کنید.
سلام وقت بخیر من تازه با سابلایم آشنا شدم نصب کردم دکمه اجرا نمیدونم کدومه خواهش میکنم جواب بدین