Sublime text setup guide
Sublime text setup guide
- Tip & tricks
 - Plugins    
- Package control π
 - All Autocomplete π
 - A File Icon π
 - SideBarEnhancements π
 - FileDiffs π
 - ColorPicker π
 - DocBlockr π
 - PlainTasks π
 - Markdown Preview π
 - MarkdownEditing π
 - Git π
 - GitGutter π
 - GitStatusBar π
 - jQuery π
 - Sass π
 - Emmet π
 - Babel π
 - ESLint-Formatter π
 - SublimeLinter π
 
 - User settings
 - Key bindings
 - Sources
 
Tip & tricks
Get cursor scope
ctrl + Γ¨ to enter the console and type print (view.scope_name(view.sel()[0].b))
Plugins
Package control π
Installation
- Display console with 
ctrl + ` - Copy / paste the following code into the console
    
1
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( 'http://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)
 
Usage
ctrl + shift + p and type package control to display the available options
All Autocomplete π
A File Icon π
SideBarEnhancements π
FileDiffs π
Usage
Add a key binding for showing the diff menu
1
{ "keys": ["ctrl+shift+d"], "command": "file_diff_menu" },
ColorPicker π
Configuration
Set color_upper_case preference to false
Usage
Use ctrl + shift + c to insert or change a color.
DocBlockr π
Usage
Type /** and hit tab or enter to generate the comment
Press shit + enter to generate an inline comment
PlainTasks π
Usage
Finish a line with : to create a category
Create a new task with enter + d
Terminate a task with ctrl + d
Archive a task with ctrl + shift + a
Priority :
1
2
3
4
    c + tab // @critical
    h + tab // @high
    l + tab // @low
    t + tab // @today
Due date :
1
2
3
4
5
6
7
    @due(+)   β tomorrow as well as @due( +1) or @due( +1d)
    @due(+w)  = @due( +7)
    @due(+3w) = @due( +21d)
    @due(++)  β count time since date of creation if task contains @created(date), otherwise it is equal to @due(+)
    @due(+2:)    = @due( +2.)    β  two hours since current date
    @due(+:555)  = @due( +.555)  β  555 minutes since current date
    @due(+2 12:) = @due( +2 12.) β  2 days and 12 hours since current date
Markdown Preview π
Usage
ctrl + shift + p and type Markdown Preview to display the available options
Add a key binding for quick preview within the browser
1
{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },
MarkdownEditing π
Git π
Usage
ctrl + shift + p and type git to display the available options
GitGutter π
GitStatusBar π
Setup
Remove status bar messages from Git and GitGutter
jQuery π
Sass π
Emmet π
Add .js and .jsx files support
Check Key Bindinghttps://gist.github.com/wesbos/2bb4a6998635df97c748
Use source.js and source.jsx for full scope support
Babel π
Usage
Open a file of the extension to associate with Babel.
Click View > Syntax > Open all with current extension as... > Babel > JavaScript (Babel)
ESLint-Formatter π
SublimeLinter π
Installation & setup
Install Sublime-contrib-eslint via Package Control
Install SublimeLinter-contrib-standard via Package Control
Edit SublimeLinter settings and modify the user settings. The file will be automatically filled.
Disable or enable the chosen linter
Add the path to node binary (especially if using nvm)
User settings
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
	"color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
	"font_size": 10,
	"ignored_packages":
	[
		"Markdown",
		"Vintage"
	],
	"theme": "Adaptive.sublime-theme",
  	"tab_size": 4,
	"translate_tabs_to_spaces": true,
	"always_show_minimap_viewport": true,
	"auto_find_in_selection": true,
	"caret_style": "phase",
	"highlight_modified_tabs": true,
	"trim_trailing_white_space_on_save": true,
	"rulers": [80],
	"auto_complete_cycle": true,
	"show_encoding": true,
	"remember_full_screen": true,
	"folder_exclude_patterns": ["node_modules", ".svn", ".git", ".hg", "CVS"],
}
Key bindings
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
[
	{ "keys": ["super+alt+up"], "command": "select_lines", "args": {"forward": false} },
	{ "keys": ["super+alt+down"], "command": "select_lines", "args": {"forward": true} },
	{ "keys": ["ctrl+)"], "command": "indent" },
	{ "keys": ["ctrl+("], "command": "unindent" },
	{ "keys": ["alt+;"], "command": "close_tag" },
	{ "keys": ["ctrl+:"], "command": "toggle_comment", "args": { "block": false } },
	{ "keys": ["ctrl+shift+:"], "command": "toggle_comment", "args": { "block": true } },
	{ "keys": ["ctrl+Γ¨"], "command": "show_panel", "args": {"panel": "console", "toggle": true} },
	{ "keys": ["alt+:"], "command": "auto_complete" },
	{ "keys": ["alt+:"], "command": "replace_completion_with_auto_complete", "context":
		[
			{ "key": "last_command", "operator": "equal", "operand": "insert_best_completion" },
			{ "key": "auto_complete_visible", "operator": "equal", "operand": false },
			{ "key": "setting.tab_completion", "operator": "equal", "operand": true }
		]
	},
	{ "keys": ["ctrl+shift+("], "command": "fold" },
	{ "keys": ["ctrl+shift+)"], "command": "unfold" },	
	{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },
	{ "keys": ["ctrl+shift+d"], "command": "file_diff_menu" },
	{
	  "keys": ["tab"], 
	  "command": "expand_abbreviation_by_tab", 
	  // put comma-separated syntax selectors for which 
	  // you want to expandEmmet abbreviations into "operand" key 
	  // instead of SCOPE_SELECTOR.
	  // Examples: source.js, text.html - source
	  "context": [
	    {
	      "operand": "source.js, source.jsx, text.html", 
	      "operator": "equal", 
	      "match_all": true, 
	      "key": "selector"
	    }, 
	    // run only if there's no selected text
	    {
	      "match_all": true, 
	      "key": "selection_empty"
	    },
	    // don't work if there are active tabstops
	    {
	      "operator": "equal", 
	      "operand": false, 
	      "match_all": true, 
	      "key": "has_next_field"
	    }, 
	    // don't work if completion popup is visible and you
	    // want to insert completion with Tab. If you want to
	    // expand Emmet with Tab even if popup is visible -- 
	    // remove this section
	    {
	      "operand": false, 
	      "operator": "equal", 
	      "match_all": true, 
	      "key": "auto_complete_visible"
	    }, 
	    {
	      "match_all": true, 
	      "key": "is_abbreviation"
	    }
	  ]
	}
]
Sources
Graphic logo for Sublime Text software from en.wikipedia.org/wiki/Sublime_Text#/media/File:Sublime_Text_3_logo.png