Sublime text setup guide

16th of October, 2017 in guide

Sublime text setup guide

  1. Tip & tricks
    1. Get cursor scope
  2. Plugins
    1. Package control πŸ”—
      1. Installation
      2. Usage
    2. All Autocomplete πŸ”—
    3. A File Icon πŸ”—
    4. SideBarEnhancements πŸ”—
    5. FileDiffs πŸ”—
      1. Usage
    6. ColorPicker πŸ”—
      1. Configuration
      2. Usage
    7. DocBlockr πŸ”—
      1. Usage
    8. PlainTasks πŸ”—
      1. Usage
    9. Markdown Preview πŸ”—
      1. Usage
    10. MarkdownEditing πŸ”—
    11. Git πŸ”—
      1. Usage
    12. GitGutter πŸ”—
    13. GitStatusBar πŸ”—
      1. Setup
    14. jQuery πŸ”—
    15. Sass πŸ”—
    16. Emmet πŸ”—
      1. Add .js and .jsx files support
    17. Babel πŸ”—
      1. Usage
    18. ESLint-Formatter πŸ”—
    19. SublimeLinter πŸ”—
      1. Installation & setup
  3. User settings
  4. Key bindings
  5. 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

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 πŸ”—

Cheat sheet

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