سابلایم تکست : کامل‌ترین آموزش کد ادیتور 4 Sublime text

آموزش کد ادیتور Sublime text: تقریبا تمامی برنامه نویسان حداقل یک بار درگیر انتخاب یک کد ادیتور مناسب شده‌اند. کد ادیتورها (editors) از جمله ابزارهایی هستند که نسبت به کد هر زبانی که می‌نویسیم، کلمات کلیدی آن زبان را متمایز کرده، برخی پیشنهادات را ارائه می‌دهند و برنامه نویسی را برای توسعه دهندگان آسان می‌کنند.

Sublime text یکی از مشهورترین ادیتورهای کدنویسی است که برنامه نویسی را بسیار لذت بخش کرده و سرعت کار توسعه دهنده را بالا می‌برد. به همین دلیل در این مقاله، سعی کرده‌ایم تا به آموزش نرم افزار Sublime text بپردازیم. اگر به یادگیری نحوه کدنویسی با Sublime text علاقه دارید و می‌خواهید ویژگی‌ها و ترفندهای Sublime text را بهتر بشناسید، تا انتهای این مقاله با وب سایت آموزش برنامه نویسی سون لرن همراه باشید.

Sublime text چیست؟

قبل از شروع آموزش نرم افزار Sublime text باید بدانید که Sublime text چیست؟ همان طور که اشاره کردیم،  Sublime text یک کد ادیتور می‌باشد که با زبان‌های برنامه نویسی پایتون و  ++C نوشته شده و برای اولین بار در سال 2008 منتشر شده است. Sublime text در سیستم عامل‌های مختلف (ویندوز، مک‌او‌اس و لینوکس) قابل نصب است. به همین دلیل به آن یک کد ادیتور چند سکویی یا cross platform گفته می‌شود.

آیا Sublime text یک IDE است؟

IDE نرم‌ افزاری است که از ابزارها و امکانات کاملی برخوردار است و در توسعه‌ی برنامه‌ها به کمک برنامه نویسان می‌آید. یک IDE به طور معمول شامل موارد زیر است:

• یک ویرایشگر کد منبع: برای نوشتن کد
• یک کامپایلر: برای تفسیر کد
• یک دیباگر (Debugger): برای اشکال‌زدایی برنامه

البته یک IDE می‌تواند، ویژگی‌ها و امکانات بسیار دیگری نیز داشته باشد. این ویژگی‌ها برای هر IDE متفاوت است. اما کد ادیتور نرم‌ افزاری شبیه به ویرایشگر متن است که برخی ویژگی‌ها به آن اضافه شده است. کد ادیتور، یک IDE نیست چرا که یک IDE  بر خلاف کد ادیتور، دارای بسیاری از ابزارهای توسعه‌ی نرم‌ افزار است. کد ادیتور، نسبت به کد هر زبانی که آن می‌نویسیم، کلمات کلیدی آن زبان را متمایز کرده و برخی پیشنهادات را ارائه می‌دهد. ویژوال استودیو کد (Visual Studio Code)، اتم (Atom) و Sublime Text از محبوب‌ترین‌های کد ادیتورها هستند. ما در این مقاله به بررسی Sublime Text می‌پردازیم.

مزایای استفاده از Sublime text

در Sublime text می‌توان با زبان‌های برنامه نویسی زیادی مانند جاوا، جاوا اسکریپت، php، html، CSS، C، پایتون، پرل و… کدنویسی کرد. لیست کامل این زبان‌ها را می‌توانید از صفحه‌ی گیت‌هاب Sublime text مشاهده کنید. علاوه بر آن، Sublime text از زبان‌های نشانه‌گذاری مانند HTML نیز پشتیبانی می‌کند. توسعه دهندگانی که از Sublime text استفاده می‌کنند، معتقدند که دارای امکانات شگفت انگیزی برای برنامه نویسی است. برخی از این امکانات عبارتند از:

• حجم کم نرم‌افزار (حدود ۲۰-۴۰ مگابایت) و سرعت بالای آن
• قابلیت ناوبری و جا به جایی سریع میان فایل‌ها، نمادها و کدها
• ویرایش همزمان چندین قسمت انتخاب شده توسط کاربر
• وجود اسنیپت‌های پیش‌فرض مخصوص به هر زبان و همچنین قابلیت ساخت اسنیپت‌های شخصی‌
• تنظیمات اختصاصی و قابلیت‌های شخصی‌سازی گسترده برای هر پروژه
• کلید‌های میانبر بسیار کاربردی و قابلیت تعریف میانبرهای جدید و اختصاصی
• رابط‌ برنامه‌نویسی کاربردی (API) مبتنی بر پایتون برای ساخت پلاگین‌ها در Sublime Text

تفاوت نسخه‌های Sublime text

نسخه‌ی 2 کد ادیتور Sublime text در سال 2013 منتشر شد. پشتیبانی از نمایشگرهای رتینا و اضافه کردن دکمه‌ی Quick Skip Next از جمله تغییراتی بود که شاید باورناپذیر باشد اما در نسخه‌ی 1 وجود نداشت. از جمله امکانات دیگری که در نسخه‌ی 2 به را به Sublime text اضافه شده است می‌توان به موارد زیر اشاره کرد:

• تم‌های رنگی جدید برای محیط ادیتور
• ویژگی minimap (یک نمای کلی از کل فایل را در گوشه سمت راست صفحه نمایش می‌دهد و با کلیک کردن روی این بخش، محتویات را در ویرایشگر می‌بینید)
• افزایش تعداد پنل‌های نمایشی، گروه‌ها و حالت‌های نمایش
• امکان ویرایش همزمان چند بخش
• قابلیت تکمیل خودکار کد با snippet و افزودن snippet جدید شخصی سازی شده
• پررنگ کردن دستورات مهم و نمایش کنتراست بالا
• امکان جابجایی میان فایل‌های باز
• تعریف کلیدهای میانبر
• سیستم مدیریت بسته و پکیج‌های بیشتر برای اجرای زبان‌های برنامه نویسی مختلف

در حال حاضر آخرین نسخه‌ی Sublime text، نسخه‌ی 3 است. در این نسخه برخی از باگ‌های دو نسخه‌ی قبلی رفع شدند و علاوه بر آن، دو ویژگی زیر اضافه شد:

• تعریف symbol indexing برای استفاده از امکان go to
• جابجایی بین پنل‌های نمایشی با hotkeys

جزییات تغییرات در هر نسخه در وب سایت رسمی Sublime text قابل مشاهده است.

آموزش کد ادیتور Sublime text

به طور کلی Sublime Text رایگان نیست اما می‌توان آن را به صورت رایگان دانلود و از نسخه‌ی evaluation استفاده کرد. هرچند نسخه‌ی evaluation در حال حاضر محدودیت زمانی ندارد اما اگر به صورت پیوسته از آن استفاده می‌کنید، باید لایسنس خریداری کنید. برای خرید لایسنس باید 80 دلار بپردازید وگرنه استفاده از آن غیرقانونی محسوب می‌شود. در ادامه‌ی آموزش نرم افزار Sublime text، آن را نصب کرده و یک برنامه‌ی نمونه را اجرا می‌کنیم.

آموزش نصب Sublime Text در لینوکس

برای دانلود و نصب Sublime text در سیستم عامل لینوکس، کافی است در ترمینال دستورات زیر را وارد کنید:

sudo add-apt-repository ppa:webupd8team/sublime-text-3
sudo apt-get update
sudo apt-get install sublime-text-installer

آموزش نصب Sublime Text در ویندوز

 در ادامه‌ی آموزش نرم افزار Sublime text، به صورت گام به گام و تصویری روند نصب Sublime Text را پیش می‌بریم.

گام اول – دانلود Sublime text

برای نصب Sublime text در ویندوز ابتدا به صفحه‌ی دانلود Sublime Text رفته و نسخه‌ی مورد نظر خود را دانلود و سپس نصب کنید. به طور خودکار آخرین نسخه دانلود می‌شود. از تب buy هم می‌توانید شرایط خرید لایسنس را مشاهده کنید.

گام دوم – نصب Sublime text

فایل دانلود شده را باز کنید و محل نصب را مشخص کنید:

در مرحله‌ی بعد باید تصمیم بگیرید که آیا گزینه‌ی Sublime text به راست کلیک در محیط ویندوز اضافه شود یا خیر. اگر می‌خواهید تا به صورت پیوسته از Sublime text برای کدنویسی استفاده کنید، توصیه می‌کنیم تا این گزینه را انتخاب کنید:

در نهایت با زدن دکمه‌ی install، برنامه نصب می‌شود:

حال وقت آن است که آموزش نرم افزار Sublime text را شروع کنیم.

قابلیت‌ها و تنظیمات Sublime text

نخستین باری که Sublime text را باز می‌کنید، صفحه‌ی زیر را می‌بینید:

همانطور که می‌بینید، هیچ بخش مقدمه، کمک به کاربر برای آشنایی با صفحه نمایش یا چنین چیزی وجود ندارد. تنها انتخاب شما به صورت پیش فرض کدنویسی در محیط ویرایشگر Sublime text است. برای بازکردن یک پروژه که از قبل فایل‌هایش را دارید، باید از منوی بالای‌ صفحه، تب File و گزینه‌ی OpenFolder را انتخاب کرده و پروژه را به Sublime text اضافه کنید. زمانی که این کار را انجام دهید، ساختار فولدر همانند شکل زیر روی بخش سمت چپ ظاهر می‌شود:

انتخاب فایل از سمت راست محیط کد ادیتور کمک می‌کند تا بتوانید به راحتی کدنویسی در آن‌ها را شروع کنید. پرونده‌ها و پوشه‌ها را نیز می‌توان به عنوان پروژه ذخیره کرد تا دفعه‌ی بعد بتوان به سرعت آن‌ها را باز و ویرایش کرد. حال اجازه دهید نگاهی به برخی از ویژگی‌های برجسته Sublime text بیاندازیم.

تغییر رنگ متن و تکمیل خودکار کد در Sublime text

به صورت کلی، Sublime text و Atom بسیار شبیه هم هستند. هیچ تعجبی ندارد که بسیاری از مردم فکر می‌کنند که Atom در واقع براساس Sublime text ساخته شده است. به همین دلیل است که بسیاری از ویژگی‌های این دو کد ادیتور محبوب مشترک هستند. برای مثال هر دو دارای ویژگی autocompletion و highlight هستند. نمونه‌ای از این ویژگی را در شکل زیر مشاهده می‌کنید:

Sublime text، به صورت پیش فرض از چند زبان برنامه‌نویسی پشتیبانی می‌کند و برای باقی زبان‌ها، باید از پلاگین‌های مخصوص استفاده کنید. عبارات مهم و دستورات اصلی به طور مناسب رنگی می‌شود و کد ادیتور حتی به شما در رفع خطاهای موجود در کد در زمان اجرا (real time) هشدار می‌دهد!

استفاده از mini map در Sublime text

تصور کنید فایلی دارید که بسیار طولانی است. هرچند موقعیت فعلی براساس حرکت اسکرول بار در محیط کد ادیتور نمایش داده می‌شود، اما می‌توانید به صورت مستقیم روی نقشه کلیک کنید تا به یک مکان خاص از کد بروید. این نقشه در حقیقت یک نمایشگر کوچک است و واقعا مفید است. افرادی که تابه حال کدهای بالای 1000 خط در یک فایل داشته‌اند، از این ویژگی استقبال خوبی می‌کنند؛ چراکه استفاده از اسکرول بار در فایل‌های طولانی کاری سخت است و برای برنامه نویس مناسب نیست. همانطور که در شکل می‌بینید، نقشه در سمت راست کد ادیتور قرار گرفته است:

همچنین وجود این نقشه‌ی کوچک باعث می‌شود که یک برنامه نویس جدید با نگاهی سریع، به این درک برسد که چقدر فایل بزرگ است.

چینش پنل‌ها براساس نیاز کاربری در سابلایم تکست

یکی از قدرتمندترین ویژگی‌های Sublime text این است که می‌توانید چندین فایل را به طور همزمان در کد ادیتور باز کرده و ویرایش کنید. Sublime text می‌تواند فایل‌ها را به صورت ردیفی، ستونی و یا تمام صفحه نمایش دهد. این ویژگی به خصوص برای برنامه نویسان وردپرس بسیار مناسب است. برای مثال در شکل زیر می‌بینید که همزمان چهار فایل در کد ادیتور باز و در حال ویرایش است:

برای اضافه کردن پنل به صورت ستونی از کلیدهای ترکیبی ALT-UP-2 (بسته به تعداد پنل، عدد آخر را مقداردهی کنید) و برای اضافه کردن به صورت ردیفی از کلیدهای ترکیبی SHIFT-ALT-UP-2 استفاده کنید.

استفاده از قالب آماده در سابلایم تکست

بر اساس رنگ و چینش خطوط کد، Sublime text دارای قالب‌های متنوع است که هر کدام برای سلیقه‌ی خاصی طراحی شده‌اند. قالب‌های  Boxy, Panda و Material Theme از محبوبیت زیادی بین برنامه نویسان برخوردارند.

برای نصب این قالب‌ها، ابتدا عبارت Sublime text themes را در گوگل سرچ کنید تا با ویژگی‌های ظاهری آن‌ها آشنا شده و تم مورد نظر خود را انتخاب کنید. سپس برای نصب به محیط کد ادیتور آمده، کلیدهای ترکیبی Ctrl + Shift + P را فشار دهید و عبارت install pakckage را تایپ کنید تا بخش پلاگین برایتان باز شود.

سپس عنوان تم (برای مثال panda syntax sublime) را تایپ کنید. بعد از نصب می‌توانید به راحتی از آن استفاده کنید. این ویژگی برای افرادی بسیار کاربردی است که در بازه‌های زمانی مختلف شبانه روز کدنویسی می‌کنند و نیاز به تم روشن و تیره به صورت همزمان دارند.

تنظیمات شخصی Sublime text

ویژگی‌های زیادی در Sublime text وجود دارند که نیاز هست آن‌ها را شخصی سازی کنید. برای مثال طول کاراکتر تب در کد ادیتور Sublime text چهار کاراکتر space می‌باشد. برای خواناتر شدن کد، می‌توانید آن را به دو کاراکتر تغییر دهید. برای این کار کافی است از تب Preferences در بالای صفحه گزینه‌ی Settings – User را انتخاب کرده و آن را به این صورت تغییر دهید:

{
    "draw_white_space": "all",
    "rulers": [80],
    "tab_size": 2,
    "translate_tabs_to_spaces": true
  }

برای مشاهده‌ی تنظیمات بیشتر توصیه شده، می‌توانید بخش تنظیمات Sublime text در سایت رسمی را مطالعه کنید.

آموزش برنامه نویسی با Sublime text 3

در این بخش به آموزش کد نویسی با  Sublime text ‌پردازیم.

کدنویسی در Sublime text بسیار آسان است. شما فایل مورد نظر را از طریق تب File ایجاد کرده و شروع به برنامه نویسی می‌کنید. سپس برای اجرای آن کلیدهای ترکیبی Ctrl + B را فشار داده و یا از منوی بالای صفحه، تب Tools گزینه‌ی Build را انتخاب کنید.

یکی از امکانات بسیار مهم برای کدنویسی در Sublime text استفاده از پلاگین‌های مختص هر زبان است. برای نصب و استفاده از این امکان، ابتدا باید از منوی بالا از تب View گزینه‌ی Show Console را انتخاب کنید. سپس در بخشی که پایین محیط کد ادیتور باز می‌شود، کد زیر را Paste کنید و نهایتا کلید Enter را فشار دهید:

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'https://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

البته روش‌های دیگری نیز برای نصب وجود دارد که می‌توانید آن‌ها را در سایت Package Control ببینید. یکی از این روش‌ها استفاده از Command line است. یعنی همان روشی که تم‌های مختلف را به Sublime text اضافه کردید. بعد از نصب به راحتی می‌توانید به پلاگین‌های موردنظر دسترسی داشته باشید.

مشکل تایپ فارسی در Sublime text را چگونه حل کنیم؟

یکی از بزرگترین معایب محیط Sublime text این است که از متن فارسی پشتیبانی نمی‌کند و حروف را از چپ به راست و به صورت جدا از هم نشان می‌دهد. همین مشکل باعث شده است تا حجم زیادی از برنامه نویسان فارسی زبان به سراغ کد ادیتورهای دیگر مانند ویژوال استودیو کد بروند. البته یک راهکار وجود دارد و آن، استفاده از پلاگین‌های آماده است.

پلاگین Sublime-Text-BIDI یکی از بهترین راه حل‌های موجود برای رفع مشکل تایپ فارسی در Sublime text است. بعد از نصب پلاگین در Sublime text، ابتدا باید مطمئن شوید که فونت از زبان‌های راست چین مانند فارسی و عربی پشتیبانی می‌کند. برای این کار ابتدا از منوی بالای ادیتور تب Preferences، گزینه‌ی Setting-User را انتخاب کرده و فونت را Arial قرار دهید:

سپس باید متن مورد نظر را سلکت کرده و از طریق تب Tools و گزینه‌ی Bidirectional text، آن را راست چین کنید. علاوه بر آن، در راست کلیک و همچنین با میانبر Ctrl + B می‌توانید به این گزینه دسترسی داشته باشید.

دقت کنید که ممکن است بعد از استفاده از این پلاگین باز هم در برخی عبارات درهم‌ریختگی وجود داشته باشد، اما مشکلات بسیار کمتر از حالت عادی متن فارسی در Sublime text است.

بهترین پلاگین‌های Sublime text

همانطور که گفتیم، یکی از اصلی‌ترین مزایای استفاده از Sublime text این است که می‌توان پلاگین‌های زیادی را با استفاده از سیستم مدیریت پکیج به کار گرفت. شما می‌توانید پلاگین‌های کاربردی مرتبط با زبان برنامه نویسی را که انتخاب کردید و با آن کدنویسی می‌کنید، در Sublime Text نصب کنید. برخی از مهم‌ترین پلاگین‌های کاربردی در Sublime text عبارتند از:

• پلاگین Package Control
• پلاگین JavaScript & Node.js Snippets
• پلاگین Advanced New File
• پلاگین Git و GitGutter
• پلاگین Side Bar Enhancements
• پلاگین Color Picker
• پلاگین Placeholders
• پلاگین Minify
• پلاگین Sublime Linter
• پلاگین SublimeCodeIntell
• پلاگین DocBlocker

آموزش نصب پلاگین در Sublime text

Emmet یکی از معروف‌ترین پلاگین‌های مورد استفاده در Sublime text است. پلاگین Emmet مجموعه‌ای از اختصارات HTML / CSS / XML است که با کمک آن می‌توان به جای نوشتن چندین خط کد طولانی، فقط با یک خط کد بنویسید. Emmet به کدنویسی سرعت می‌بخشد و این تنها بخشی از مزایای پلاگین امت است. کار کردن با این پلاگین لذت بخش است و یادگیری کدها را آسان‌تر می‌کند. برای نصب پلاگین در Sublime text دو راه کلی وجود دارد که در ادامه آن‌ها را توضیح می‌دهیم.

روش اول نصب پلاگین Emmet

به صفحه‌ی اصلی سایت Emmet و بخش پشتیبانی از Sublime text مراجعه کرده و فایل آن را دانلود کنید. سپس محیط Sublime text را بسته، فایل دانلود شده را از حالت فشرده خارج کنید و آن را در دایرکتوری که Sublime text نصب شده است، در پوشه‌ی Packages قرار دهید.

روش دوم نصب پلاگین Emmet

از تب Tools در منوی بالای صفحه، بخش Command Palette را در Sublime text باز کرده و دستور Install Package را تایپ کنید. پلاگین Emmet را پیدا کرده و آن را مستقیم از درون Sublime text نصب کنید. توجه داشته باشید که بعد از اتمام نصب، حتما ادیتور Sublime text را یک بار باز و بسته کنید تا تنظیمات جدید روی محیط ادیتور قرار گیرد.

ترفندها و کلیدهای میانبر برای استفاده بهتر از Sublime Text

کلیدهای میانبر یکی از اصلی‌ترین امکاناتی هستند که به برنامه نویسان کمک می‌کنند تا سریع‌تر کدنویسی کنند. برخی از میانبرهای مهم در Sublime Text عبارتند از:

• کامنت کردن خط موردنظر / + Ctrl
• کپی کردن خط مورد نظر در خط پایینی Ctrl + shift + D
• ویرایش هم‌زمان alt +F3 یا Ctrl کلیک کردن
• جابه‌جا کردن محتوا Ctrl + shift
• بازگردانی کار انجام شده Ctrl + Z
• انجام دوباره کار انجام شده Ctrl + Y
• انتخاب یک کاراکتر با هر بار فشار دادن کلیدهای جهت‌نما Shift + Left or Right Arrow Keys
• جستجو Ctrl + F
• ذخیره کردن متن Ctrl + S
• انتخاب تمامی متن از محل قرارگیری Cursor تا ابتدای متن Shift + Ctrl + Home
• انتقال Cursor به ابتدای کلمه قبلی Ctrl + Left Arrow
• انتقال Cursor به آغاز کلمه بعدی Ctrl + Right Arrow

چرا کد ادیتور سابلایم تکست را انتخاب کنیم؟

در این مقاله با Sublime text و ویژگی‌های آن آشنا شدیم و تلاش کردیم تا آن را از جنبه‌های مختلف بررسی کنیم. در نهایت به آموزش کد ادیتور Sublime text پرداختیم. Sublime text برای توسعه دهندگانی مناسب است که به دنبال یک کد ادیتور کم حجم و پرسرعت هستند.

Sublime text در میان توسعه دهندگان بسیار محبوب است و از زبان‌های برنامه نویسی زیادی پشتیبانی می‌کند. بسیاری از برنامه نویسان، به خصوص توسعه دهندگان php، برای کدنویسی از Sublime text استفاده می‌کنند. کدنویسی وردپرس یکی از رایج‌ترین کاربردهای Sublime text است.

اگر تجربه‌ی کار با کد ادیتور Sublime text یا سوالی در رابطه با آن را دارید، آن را در بخش نظرات با ما و سایر کاربران سون لرن به اشتراک بگذارید.

اگر به یادگیری بیشتر لاراول علاقه داری می‌توانی در دوره آموزش لاراول کاربردی (بسته پروژه محور) شرکت کنی، این دوره شامل ۱۲ پروژه کاربردی و پر استفاده در دنیای واقعی است، که تمامی پروژه‌ها به صورت کامل برنامه‌ نویسی خواهند شد، تا دانشجو بتواند با روند ایجاد و تکمیل پروژه به صورت کامل آشنا شود.

فرصت های بزرگ و درآمدهای عالی متعلق به متخصص هاست. برای متخصص شدن، مشاوره رایگان بگیر: