Sublime Text 3 tips

Below are some good things about Sublime Text 3 which are really really useful

There are 2 main part in this article

I. Useful plugins

Package control plugin

Everyone must know about this so I don’t write any instructions here

Git plugin

Able to run git command from ST (Sublime Text)

Installation: using package control

Usage: Command Palette

GitGutter plugin

GitGutter shows uncommitted additions, changes, and deletions next to ST3’s line numbers
Assume that you just modified many lines in a big file and now you want to review them but how we can we do that in Sublime?
Look at every single line? or using “git gui” in git command? it is much easier in Sublime by using this

Installation: using package control

Shortcut key: 

Jump to next change: Ctrl+Shift+Alt+j
Jump to previous change: Ctrl+Shift+Alt+k

Trimmer plugin

How do you remove empty space and empty line? take it easy with Trimmer plugin

Installation: using package control

Shortcut key: Ctrl + Alt + S

Features:
Trim whitespace at the end of each line.
Trim whitespace at the start of each line.
Trim whitespace at the start and end of each line.
Delete empty, whitespace only lines.
Collapse multiple consecutive empty lines into one empty line.
Collapse multiple consecutive spaces into one space.
Trim empty, whitespace only lines at the beginning and end of the file.
Remove blank space characters.

Link: https://github.com/jonlabelle/Trimmer

How do you validate your code? let explore some great features about sublime linter

Sublimelinter plugin

SublimeLinter itself is only a framework for linters, so after install SublimmeLinter you need to install linters
Linters can be found in Package Control with the name “SublimeLinter-<linter>”, for example “SublimeLinter-php”.

Installation: using package control
Shortcut key: automatic run after you save the document

I care about how to validate PHP and javascript so I installed 2 linters below:

1. SublimeLinter-php plugin

There are several linters for PHP such as phpcs, phpmd, phplint, sublimelinter-php
This linter plugin for SublimeLinter provides an interface to php -l. It will be used with files that have the “PHP”, “HTML”, or “HTML 5” syntax.
Why SublimeLinter-php? I decided to choose sublimelinter-php because it runs fastest to compare with the other

Installation: using package control

2. JSHint plugin

JSHint is a program that flags suspicious usage in programs written in JavaScript. The core project consists of a library itself as well as a CLI program distributed as a Node module.
Why JSHint? Easy to install, easy to use

Installation:
– install nodejs from http://nodejs.org/
– install JSHint

SidebarEnhancement plugin

How do you run a project on a browser from ST3?

Installation: using package control

Setting: 
To run a file just right click on a file choose “open in broswer” but it will be opened by file:// protocol, for sample: file:///D:/wamp/www/test/index.php
So how to run file by http protocol?
right-click on the project folder, and select Projects > Edit Preview URLS, It will open a JSON file named SidebarEnhancements.json in a new tab, then add this lines to the file

{
    "D:\\wamp\\www\\test": {
        "url_testing":"http://test.local",
        "url_production":"http://www.project.com"
    }
}

Be alarmed that the project folder must be the absolute path, for example: “D:\\wamp\\www\\test” not “..//wamp/www/test”

Create shortcut key
To create a shortcut key for “open in broswer” command
Select preferences -> package setting -> Side Bar -> key bindings – User, it will open a file in a new tab, paste thi line to the file

{ “keys”: [“ctrl+f12”], “command”: “side_bar_open_in_browser”, “args”:{“paths”:[], “type”:”testing”}},

it will open browser with the url which we provided in the previous step (http://test.local)

Browser refresh plugin

Now let assume we have 2 monitor, 1 for sublime to code and 1 for browser to test, normally you need to write code in sublime window then move to browser window then reload the page to test, but Im a lazy man, I don’t want to switch to other monitor and press f5 to reload so how I can do that right here in ST3?

Installation: using package control

Create shortcut key:

Select preferences -> package setting ->browser refresh-> key bindings – User
Appending this line:

{
    "keys": ["f5"], "command": "browser_refresh", "args": {
        "auto_save": true,
        "delay": 0.0,
        "activate_browser": true,
        "browser_name" : "all"
    }
}

Emmet plugin

Emmet is great for writing HTML very quickly. Simply type the CSS selector for the markup you wish to have and hit tab.
There are a lot of things that you can accomplish with Emmet but let see some example:
Type html:5 and press Ctrl+ E, and it is expanded to a basic HTML 5 page template

Installation: using package control

Shortcut key: Ctrl+ E

DocBlockr plugin

DocBlockr eases the creation of docblocks in your PHP code – simply type /** and hit enter when above a function or class and a blank docblock will be created ready to edit.

Installation: using package control

Using: /** + enter

II. Useful keyboard shortcut

Selection:

Command + D: Select next word.
Command + L: Select a line.
Ctrl + Shift + M: Select anything inside the bracket
Ctrl + Shift + A: Select anything inside a html tag
Command: Hold the Command key and click on the lines that you want to select.
Ctrl + Shift + J: Selecting Code that is Similarly Indented
Ctrl + Shift + Space: Select a range (need to try it, it is really useful)
Alt + Shift + W: Wrapping selection in tag

Line:

Paste with indent: Ctrl + shift + v
Indent: Ctrl + ]
Un-indent: Ctrl + [
Reindent: Be default Sublime Text does not provide a shortcut key for that but we can do that by adding this line
{ “keys”: [“ctrl+alt+r”], “command”: “reindent” , “args”: { “single_line”: false } } to “preferences -> Key Bindings – User”
Swap line up: Ctrl + Shift + Up
Swap line down: Ctrl + Shift + Down
Duplicate line: Ctrl + Shift + D
Delete Line: Ctrl + Shift + K
Join lines: Ctrl + J

Sort:

Select what you want to short then F9

Sidebar:

Toggle sidebar Ctrl + K, Ctrl + B
Ctrl + 0: focus on sidebar
Ctrl + 1: focus on the main panel

Text:

Insert line before: Ctrl + Shift + Enter
Insert line after: Ctrl + Enter
Delete word forward: Ctrl + Delete
Delete word backward: Ctrl + Backspace
Delete line: Ctrl + Shift + K
Delete to End: Ctrl + K, Ctrl + K
Delete to beginning: Ctrl + K, Ctrl + Backspace
Transpose: Ctrl + T (at least 2 selections)

Go:

Go to a line: Ctrl + G
Go to beginning of file: Ctrl + Home
Go to end of file: Ctrl + End
Jump backward: Alt + –
Jump forward: Alt + Shift + –
Go to anything: Ctrl + P

Other tips:

How do you create a html file? type everything from the beginning? if you do that let take a look with the tips below
type “Snippet: html” in command prompt
If you are a PHPstorm user and you want Sublime Text has the same feature as git -> annotate, all you need to do is Ctrl + Shift + P -> git : blame

How to debug on ST3?

 1. Setting up Xdebug
We need to configure xdebug by adding the following to your php.ini file

zend_extension = "D:/wamp/bin/php/php5.3.13/zend_ext/php_xdebug-2.2.0-5.3-vc9-x86_64.dll"
[xdebug]
xdebug.remote_enable = 1
xdebug.remote_handler=dbgp
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.remote_log="D:/wamp/tmp/xdebug.log"

2. Setting xdebug plugin
Using Package Control to install “xdebug client”
Setting: in ST3 window click Project -> Edit project then add following lines to

"settings": {
    "xdebug": {
         "url": "http://test.local/",
     }
}

3. Start Xdebug session
Add this to the end of your url “?XDEBUG_SESSION_START=sublime.xdebug”

4. Set breakpoint: Ctrl + F8

5. Start debugging: Ctrl + Shift + F9

and many many more useful features let explore it for yourself, hope you will enjoy ST3 and thank you for reading

references: https://blog.generalassemb.ly/sublime-text-3-tips-tricks-shortcuts/