ایجاد اسنیپت(Snippet) در ادیتور Sublime Text

- visibility ۸ mode_comment

به نام خدا

با سلام خدمت دوستان عزیز سون‌لرنی.

اگه شما هم از کسانی هستید که برای کدنویسی SublimeText رو ترجیح میدید، با ما همراه باشید.

sublime

اسنیپت(Snippet) چیست؟

تا حالا از اسنیپت Lorem در Sublime استفاده کردید؟ اسنیپت ها به شما این امکان رو میدن تا با نوشتن یک کلمه و زدن دکمه‌ی Tab، به کدهای مورد نظر خودتون برسید. یکی از اسنیپت های پیشفرض Sublime ، اسنیپت متن لورم ایپسون انگلیسی هست. شما میتوانید بعد از نوشتن کلمه ی "lorem" و زدن دکمه ی Tab، متن کامل لورم ایپسون را داشته باشید.

ایجاد اسنیپت

برای ایجاد اسنیپت کافیست از منوی بالا از قسمت Tools ، گزینه‌ی new Snippet رو انتخاب کنید تا صفحه ی زیر باز شود.

snippet

همونطور که دیدید فرمت فایل XML هست. حالا کد یا متن مورد نظرتون رو در خط 3 یعنی بین <content><![CDATA[ و ]]></content> پیست کنید. سپس خط 6 یعنی تگ <tabTrigger> رو از کامنت در بیارید. به جای کلمه ی hello ، کلمه‌ای رو بنویسید که میخواهید با زدن Tab بعد از اون کلمه، کدمورد نظرتون ایجاد بشه.

برای مثال همونطور که تصویر زیر میبینید، من متن لورم ایپسون فارسی رو بین تگ <content> قرار دادم و کلمه ی "لورم" رو هم در تگ <tabTriggrt>  قرار دادم.

persian-loremحال تنها کافیست این فایل رو ذخیره کنیم. Ctrl و S را بزنید تا پنجره ی ذخیره ی فایل باز شود. فایل را در همان مسیر با نام دلخواه و فرمت .sublime-snippet ذخیره کنید. حالا در هر جایی که کلمه‌ "لورم" رو بنویسید و Tab بزنید، متن لورم ایپسون ظاهر میشه.

فقط دو موضوع میمونه؛ تگ <scope> و متغیر ها.

تگ <scope>

اگر میخواهید اسنیپت ایجاد شده تنها در فایل هایی با فرمت خاص کار کند از تگ <scope> استفاده میکنیم. مثلا اگر میخواهید اسنیپت لورم فارسیمون تنها در فایل هایی با فرمت .html عمل کنه کافیه تگ scope رو از کامنت در بیارید و فرمت مورد نظرتونو بعد از کلمه "source" بنویسید. (مثلا برای فایل‌های PHP بنویسید source.php )

متغیر ها در اسنیپت

اگر ما بخواهیم بعد از زدن دکمه Tab قطعه ای از همان کد را تغییر دهیم از متغیر ها استفاده میکنیم. مثلا میخواهیم برای ایجاد Function یک اسنیپت بنویسیم. اسنیپت ما به صورت زیر خواهد بود:

متغیر هارو داخل ${} قرار میدهند و بعد از باز کردن براکت، اولویت متغیر را مشخص میکنند. اگر میخواهید متغیر به صورت پیشفرض متنی داشته باشد میتوانید بعد از نوشتن اولویت، یک دونقطه گذاشته و متن خود را بنویسید.

اگر اسنیپت بالا را در Sublime ایجاد کنید، پس از نوشتن "fn" و زدن دکمه Tab ، قالب یک Function ایجاد میشود که نام تابع در حال انتخاب است. اگر باز هم دکمه Tab رو بزنید میتوانید برای تابع ایجاد شده پارامتر تعریف کنید و با زدن Tab بعدی میتوانید کد داخل تابع را تغییر دهید.

برای اینکه کاملا با ساختن اسنیپت آشنا شده باشید یک اسنیپت دیگر هم ایجاد میکنیم. معمولا در جاوااسکریپت برای چاپ متغیر یا شیئی در کنسول، از console.log() استفاده میکنیم؛ برای آسانی کار میخواهیم بعد از نوشتن log و زدن Tab ، کد console.log() ایجاد شود و این اسنیپت هم تنها در فایل های JS کار کند. کد ما به صورت زیر خواهد بود:

info نکته :

 از تگ <description> برای توضیح کوتاه در مورد اسنیپت استفاده میشود.

امیدوارم از این مطلب براتون مفید بوده باشه.

در پناه حق موفق و پیروز باشید

comment دیدگاه کاربران
محمد اسفندیاری

علی آقا چرا عکسا نشون داده نمیشن؟؟؟
با تشکر

علی امینی

گویا دیروز اتفاقی برای سون‌لرن افتاد!
الان که مشکلی نداره.

محمد اسفندیاری

آره امروز درست شد……ممنون

ervin

سلام من دستم خورد این منو Sublime حذف شده چی کار کنم برگرده؟

علی امینی

سلام دوست عزیز
راستش متوجه نشدم دقیقا چیکار شده؛ میشه یه تصویری قررا بدید؟

سینا

سلام
میشه از این روش برای درست کردن یک تگ html استفاده کرد؟(مثلا: )
اگر میشه، روش ساخت دقیقا مثل همینه؟

hidden-shadow

سلام ممنون از آموزش هاتون من یه مشکل دارم اونم اینه که وقتی میخوام یه متغیر تعریف کنم که توش خود علامت $ قرار بگیره مثل این ${1:$} علامت $ رو که باید در خروجی نشون دادن بشه با $ خود سینتکسش اشتباه میگره برای حل این مشکل باید چیکار کنم ممنون.

وحید صالحی

سلام سوالتون رو در انجمن مطرح کنید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.