اگر هنوز ابزار باب میل خود رو برای ویرایش کدهای HTML , CSS , JQuery تون پیدا نکردید به احتمال زیاد مشتری Sublime text 3 بشید.
Sublime text 3 یک ادیتور فوق العاده جذاب و سریع است که به زبان Python نوشته شده و روی پلتفرم های ویندوز ، لینوکس و مک نصب می شود.
حدوداً ۷ سال گذشته رو بصورت مداوم از sublime text برای کدنویسی استفاده کردم و واقعاً به نسبت ادیتورهای دیگر رضایت خیلی بیشتری نسبت به آن دارم.
در این نوشتار تعدادی از ویژگی های جذاب و برجسته sublime text 3 را معرفی و به شما کمک میکنم یک شروع سریع و خوب با این ادیتور داشته باشید.
نصب Sublime text3
خب در حال حاضر آخرین نسخه موجود sublime ورژن 3 می باشد که هنوز در حالت بتا می باشد ولی من تا کنون مشکلی با این نسخه نداشته ام و کلیه ویژگی ها و پلاگین های نسخه پایدار 2 روی 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
F11 | Full Screen |
shift + F11 | Distraction Free Mode |
ctrl + shift + p | Command Palette |
ctrl + ` | Show Console |
ctrl + k + b | Show/Hide Sidebar |
ctrl + / | Comment |
ctrl + shift + / | Block Comment |
ctrl + k + u | Uppercase |
ctrl + k + l | Lowercase |
Selections
ctrl + d | Select Word |
ctrl + d | Use multiple times to select next instance of the selected word |
ctrl + click | Create multiple cursors for multi-editing |
ctrl + shift + space | Expand selection to scope. Repeating keeps expanding. |
ctrl + shift + m | Expand to brackets |
ctrl + shift + j | Expand to indentation |
Go To
ctrl + p | Open file based on name |
ctrl + g | Go to line number |
ctrl + r | Go to symbol |
ctrl + p THEN @ | Open file based on name and search for symbol |
ctrl + m | Go to matching bracket |
Lines
ctrl + l | Select line |
ctrl + shift + k | Delete line |
ctrl + ] | Indent |
ctrl + [ | Unindent |
ctrl + enter | Insert line after |
ctrl + shift + enter | Insert line before |
ctrl + shift + ↑ | Swap line up |
ctrl + shift + ↓ | Swap line down |
ctrl + shift + d | Duplicate line |
ctrl + j | Join Line |
Code Folding
ctrl + shift + [ | Fold |
ctrl + shift + ] | Unfold |
ctrl + k + j | Unfold All |
Search / Find / Replace
ctrl + f | Find |
F3 | Find next |
shift + F3 | Find previous |
ctrl + shift + f | Search all files in a folder |
ctrl + h | Replace |
ctrl + f THEN alt + enter | Find a certain term then select them all for multi-editing |
Tabs and Window Panes
ctrl + shift + n | New Window |
ctrl + n | New Tab |
alt + # | Select a Tab (ie alt + 3) |
ctrl + w | Close Tab |
ctrl + shift + # | Move tab to a Pane (ie ctrl + shift + 2) |
ctrl + # | Focus on a Pane (ie ctrl + 2) |
alt + shift + 1 | One Column |
alt + shift + 2 | Two Columns |
alt + shift + 3 | Three Columns |
alt + shift + 4 | Four Columns |
alt + shift + 8 | Two Rows |
alt + shift + 9 | Three Rows |
alt + shift + 5 | Two x Two Grid |
Bookmarks
ctrl + F2 | Create Bookmark |
F2 | Next Bookmark |
shift + F2 | Previous Bookmark |
ctrl + shift + F2 | Clear Bookmarks |
پلاگین های کاربردی در Sublime text
همانطور که می دانید Sublime text در حال حاضر یکی از محبوب ترین IDE های طراحان وب در دنیا می باشد که از مهمترین ویژگی های آن متن باز بودن است که باعث شده تعداد زیادی پلاگین توسط برنامه نویسان سرتاسر دنیا نوشته شود و Sublime text را به ابزاری بسیار قدرتمند با قابلیت شخصی سازی بالا تبدیل کند.
در این نوشتار تعدادی از پلاگین های کاربردی و ضروری نرم افزار sublime text که بیشتر مورد نیاز طراحان وب هستند را معرفی می کنم و در تلاشم این لیست را مرتباً بروزرسانی کنم.
#Emmet
Emmet ابزاری است که به طراح کمک میکند سرعت بیشتری در کدنویسی داشته باشد. ایده اصلی Emmet این است که با نوشتن قطعه ای از کد و فشردن کلیدی خاص ادامه کد نوشته شود.
این ابزار بصورت پلاگین برای ادیتورهای مختلف توسعه داده شده است که Sublime text نیز از این قاعده مستثنی نیست.
میانبرهای Emmet را خیلی سریع می توانید از این لیست ببینید و فرا بگیرید:
- Expand Abbreviation – Tab or Ctrl+E
- Interactive “Expand Abbreviation” — Ctrl+Alt+Enter
- Match Tag Pair Outward – ⌃D (Mac) / Ctrl+, (PC)
- Match Tag Pair Inward – ⌃J / Shift+Ctrl+0
- Go to Matching Pair – ⇧⌃T / Ctrl+Alt+J
- Wrap With Abbreviation — ⌃W / Shift+Ctrl+G
- Go to Edit Point — Ctrl+Alt+→ or Ctrl+Alt+←
- Select Item – ⇧⌘. or ⇧⌘, / Shift+Ctrl+. or Shift+Ctrl+,
- Toggle Comment — ⇧⌥/ / Shift+Ctrl+/
- Split/Join Tag — ⇧⌘’ / Shift+Ctrl+`
- Remove Tag – ⌘’ / Shift+Ctrl+;
- Update Image Size — ⇧⌃I / Ctrl+U
- Evaluate Math Expression — ⇧⌘Y / Shift+Ctrl+Y
- Reflect CSS Value – ⇧⌘R / Shift+Ctrl+R
- Encode/Decode Image to data:URL – ⇧⌃D / Ctrl+’
- Rename Tag – ⇧⌘K / Shift+Ctrl+’
#Alignment
سخت مشغول انجام پروژه هستید، مشکلی ساعتها شما را درگیر می کند و تازه متوجه می شوید که مشکل از جا انداختن یک کاراکتر ساده (معمولاً سِمی کلن 😀 ) بوده است. پلاگین ساده Alignment را بر روی Sublime text خود نصب کنید و براحتی کدهای خود را مرتب کنید:
روش استفاده :
- کدهای مورد نظر را انتخاب کنید.
- کلیدهای ترکیبی
CTRL+ALT+aرا بفشارید.
#AutoFileName
در هر پروژه با فایل های زیادی سر و کار داریم و باید آنها را مرتباً به هم الحاق کنیم. به عنوان مثال هر پلاگینی که به پروژه اضافه میکنیم یک یا چند فایل js و css هم باید به پروزه الحاق شوند.
این پلاگین لیستی از فایلهای پروژه در اختیار ما قرار می دهد تا این عمل را با سرعت و دقت بیشتری انجام دهیم.
به عنوان مثال می خواهیم تگ link زیر را کامل کنیم:<link rel="stylesheet" type="text/css" href="|">
با زدن کلیدهای ترکیبی CTRL + Space لیستی از فالیهای پروژه را خواهیم دید و می توانیم فایل css مورد نظر را انتخاب کنیم.