• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

8 3601 ۳۰ تیر ۹۳

به نام خدا

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

اگه شما هم از کسانی هستید که برای کدنویسی 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 کار کند. کد ما به صورت زیر خواهد بود:

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    محمد اسفندیاری(۳۰ تیر ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏
    hidden-shadow(۱۰ مرداد ۱۳۹۴)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram