
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