چرا از ادیتور sublime text استفاده می کنم؟

اگر هنوز ابزار باب میل خود رو برای ویرایش کدهای HTML , CSS , JQuery تون پیدا نکردید به احتمال زیاد مشتری Sublime text 3 بشید.

Sublime text 3 یک ادیتور فوق العاده جذاب و سریع است که به زبان Python نوشته شده و روی پلتفرم های ویندوز ، لینوکس و مک نصب می شود.

حدوداً ۷ سال گذشته رو بصورت مداوم از sublime text  برای کدنویسی استفاده کردم و واقعاً به نسبت ادیتورهای دیگر رضایت خیلی بیشتری نسبت به آن دارم.

در این نوشتار تعدادی از ویژگی های جذاب و برجسته sublime text 3 را معرفی و به شما کمک میکنم یک شروع سریع و خوب با این ادیتور داشته باشید.

نصب Sublime text3

خب در حال حاضر آخرین نسخه موجود sublime ورژن 3 می باشد که هنوز در حالت بتا می باشد ولی من تا کنون مشکلی با این نسخه نداشته ام و کلیه ویژگی ها و پلاگین های نسخه پایدار 2 روی 3(بتا) هم پاسخگو است.

Sublime text 3 را میتوانید از وب سایت رسمی این ویرایشگر دانلود کنید.

دانلود Sublime text 3

نصب پکیج کنترل Package Control

اگر بار اولتان هست که با این ویرایشگر آشنا می شوید احتمالاً یک علامت سوال با شنیدن عنوان Package Control در ذهنتان بوجود آمده است. از دست من عصبانی نشوید لطفاً و ادامه رو بخوانید:

درباره Package Control Sublime text

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

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

دو روش برای فعال سازی Package Control وجود دارد:

روش اول (آسان)

  • کنسول ویرایشگر Sublime را از مسیر View > Show Console باز کنید و یا از کلیدهای ترکیبی Ctrl + ` برای این کار استفاده کنید.
  • کد های زیر را در این قسمت کپی کنید و اینتر بزنید.

روش دوم (دستی)

  • منوی Preferences > Browse Packages… را کلیک کنید.
  • یک up بزنید تا به فولدر Installed Packages وارد شوید.
  • فایل Package Control.sublime-package را دانلود و در این قسمت قرار دهید.
  • نرم افزار Sublime text خود را ریستارت کنید.

کلیدهای ترکیبی CTRL + SHIFT + P را بزنید. یک باکس در محیط Sublime text برای شمات باز خواهد شد که به آن Command pallete میگویند. Command pallete امکان دسترسی به کلیه تنظیمات ، تکه کدها (snippets) ، فایل های پروژه و مشاهده لیست پکیج های موجود را فراهم میکند.

برای انجام اولین کار عملی در این باکس عبارت Install package را تایپ کنید و بعد پیدا شدن عنوان آن اینتر بزنید. چند لحظه صبر کنید تا لیست کلیه بسته های موجود برای Sublime text بارگذاری شوند.

حال با تایپ عنوان یک بسته می توانید براحتی آن را پیدا و نصب کنید.

با دستور list packages می توانید لیست بسته های نصب شده را ببینید.

بسته های کاربردی Sublime text

پیش تر یک لیست کامل از پلاگین های کاربردی sublime text منتشر کرده ایم که می توانید با مراجعه به آن sublime text خود را مجهز کنید.

  • Alignment
  • BracketHighlighter
  • ColorPicker
  • Emmet
  • Docblocker
  • Git
  • Gitgutter
  • Gist
  • Sidebar Enhancement

پشتیبانی از زبان فارسی

احتمالاً تا کنون متوجه شده اید که sublime text3 زبان فارسی را به درستی پشتیبانی نمیکند و حروف را جدا از هم و برعکس نمایش می دهد.فعلاً که sublime text3 در حالت بتا قرار دارد، امیدواریم در نسخه نهایی این مساله رفع شود. البته من طی 4 سالی که با این نرم افزار مداوم کار می کنم تا کنون این مورد برایم مساله قابل توجه ایی نبوده است، چون واقعاً کم پیش می آید که در روند طراحی نیاز به تایپ یک عبارت فارسی باشد و در صورتی که نیاز بود می توان عبارت را در notepad تایپ و در Sublime text کپی کرد.

برای sublime text 2 یک پلاگین وجود دارد که با نصب آن می توانید عبارات فارسی یا عربی را (bidi language ) را به درستی مشاهده کنید.

https://github.com/praveenvijayan/Sublime-Text-2-BIDI

کلیدهای میانبر در Sublime text

General

F11Full Screen
shift + F11Distraction Free Mode
ctrl + shift + pCommand Palette
ctrl + `Show Console
ctrl + k + bShow/Hide Sidebar
ctrl + /Comment
ctrl + shift + /Block Comment
ctrl + k + uUppercase
ctrl + k + lLowercase

Selections

ctrl + dSelect Word
ctrl + dUse multiple times to select next instance of the selected word
ctrl + clickCreate multiple cursors for multi-editing
ctrl + shift + spaceExpand selection to scope. Repeating keeps expanding.
ctrl + shift + mExpand to brackets
ctrl + shift + jExpand to indentation

Go To

ctrl + pOpen file based on name
ctrl + gGo to line number
ctrl + rGo to symbol
ctrl + p THEN @Open file based on name and search for symbol
ctrl + mGo to matching bracket

Lines

ctrl + lSelect line
ctrl + shift + kDelete line
ctrl + ]Indent
ctrl + [Unindent
ctrl + enterInsert line after
ctrl + shift + enterInsert line before
ctrl + shift + ↑Swap line up
ctrl + shift + ↓Swap line down
ctrl + shift + dDuplicate line
ctrl + jJoin Line

Code Folding

ctrl + shift + [Fold
ctrl + shift + ]Unfold
ctrl + k + jUnfold All

Search / Find / Replace

ctrl + fFind
F3Find next
shift + F3Find previous
ctrl + shift + fSearch all files in a folder
ctrl + hReplace
ctrl + f THEN alt + enterFind a certain term then select them all for multi-editing

Tabs and Window Panes

ctrl + shift + nNew Window
ctrl + nNew Tab
alt + #Select a Tab (ie alt + 3)
ctrl + wClose Tab
ctrl + shift + #Move tab to a Pane (ie ctrl + shift + 2)
ctrl + #Focus on a Pane (ie ctrl + 2)
alt + shift + 1One Column
alt + shift + 2Two Columns
alt + shift + 3Three Columns
alt + shift + 4Four Columns
alt + shift + 8Two Rows
alt + shift + 9Three Rows
alt + shift + 5Two x Two Grid

Bookmarks

ctrl + F2Create Bookmark
F2Next Bookmark
shift + F2Previous Bookmark
ctrl + shift + F2Clear Bookmarks

پلاگین های کاربردی در Sublime text

همانطور که می دانید Sublime text در حال حاضر یکی از محبوب ترین IDE های طراحان وب در دنیا می باشد که از مهمترین ویژگی های آن متن باز بودن است که باعث شده تعداد زیادی پلاگین توسط برنامه نویسان سرتاسر دنیا نوشته شود و Sublime text را به ابزاری بسیار قدرتمند با قابلیت شخصی سازی بالا تبدیل کند.

در این نوشتار تعدادی از پلاگین های کاربردی و ضروری نرم افزار sublime text که بیشتر مورد نیاز طراحان وب هستند را معرفی می کنم و در تلاشم این لیست را مرتباً بروزرسانی کنم.

#Emmet

Emmet ابزاری است که به طراح کمک میکند سرعت بیشتری در کدنویسی داشته باشد. ایده اصلی Emmet این است که با نوشتن قطعه ای از کد و فشردن کلیدی خاص ادامه کد نوشته شود.

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

میانبرهای Emmet را خیلی سریع می توانید از این لیست ببینید و فرا بگیرید:

#Alignment

سخت مشغول انجام پروژه هستید، مشکلی ساعتها شما را درگیر می کند و تازه متوجه می شوید که مشکل از جا انداختن یک کاراکتر ساده (معمولاً سِمی کلن 😀 ) بوده است. پلاگین ساده Alignment را بر روی Sublime text خود نصب کنید و براحتی کدهای خود را مرتب کنید:

روش استفاده :

  1. کدهای مورد نظر را انتخاب کنید.
  2. کلیدهای ترکیبی CTRL + ALT + a را بفشارید.

#AutoFileName

در هر پروژه با فایل های زیادی سر و کار داریم و باید آنها را مرتباً به هم الحاق کنیم. به عنوان مثال هر پلاگینی که به پروژه اضافه میکنیم یک یا چند فایل js و css هم باید به پروزه الحاق شوند.

این پلاگین لیستی از فایلهای پروژه در اختیار ما قرار می دهد تا این عمل را با سرعت و دقت بیشتری انجام دهیم.

به عنوان مثال می خواهیم تگ link زیر را کامل کنیم:<link rel="stylesheet" type="text/css" href="|">

با زدن کلیدهای ترکیبی CTRL + Space لیستی از فالیهای پروژه را خواهیم دید و می توانیم فایل css مورد نظر را انتخاب کنیم.

دیدگاهتان را بنویسید