Sublime Text 3 Setup on OSX

sublime_text3_osx.md

Sublime Text 3 Setup on OSX

Install Packages

Install package controller as per https://packagecontrol.io/installation

Install packages (special+shift+p)

All Autocomplete
Babel
Bracket​Highlighter
DocBlockr
GitGutter (https://packagecontrol.io/packages/GitGutter)
JsFormat
Local History	
SideBarEnhancements
Monokai Extended (Theme)
Theme - Soda (Theme)

Install Inconsolata font

• Google Release https://www.google.com/fonts/specimen/Inconsolata
• Master Upstream https://github.com/google/fonts/tree/master/ofl/inconsolata (View Font raw to download correctly)

Configure Preferences ( Preferences > Settings - User )

{
	"bold_folder_labels": true,
	"caret_extra_bottom": 3,
	"caret_extra_top": 3,
	"caret_style": "smooth",
	"color_scheme": "Packages/Monokai Extended/Monokai Extended.tmTheme",
	"detect_indentation": false,
	"draw_minimap_border": true,
	"font_face": "Inconsolata",
	"font_size": 14,
	"highlight_line": true,
	"ignored_packages":
	[
		"Vintage",
		"Markdown"
	],
	"line_padding_bottom": 1,
	"line_padding_top": 1,
	"tab_size": 4,
	"theme": "Soda Dark 3.sublime-theme",
	"translate_tabs_to_spaces": false,
	"word_wrap": true
}

Configure JsFormat ( Preferences > Package Settings > JsFormat > Settings - User )

{
	"end_with_newline": true,
	"space_after_anon_function": true,
	"indent_with_tabs": true,
	"keep_array_indentation": true
}

Add Menu Command for Alignment

Preferences > Settings - User > Right Click on File Pane > Select 'Copy File Path'

Create a new file and paste the copied path

/Users/mwurzberger/Library/Application Support/Sublime Text 3/Packages/User/Preferences.sublime-settings

Replace "Preferences.sublime-settings" with "Main.sublime-menu"

Paste this configuration above the path

[{
	"caption": "Selection",
	"mnemonic": "n",
	"id": "selection",
	"children": [
		{ "caption": "-" },
		{
			"command": "alignment",
			"caption": "Align Selection"
		}
	]
}]

Select the path and cut to the clipboard (cmd + x)

File > Save As > (shift + cmd + g) > (cmd + v) > Save

Restart Sublime Text 3

You should now see a new divider and the Align Selection command under the selection menu

Setup SublimeLinter

Command line

npm install -g jshint
npm install -g eslint

Install packages (special+shift+p)

SublimeLinter
SublimeLinter-eslint
SublimeLinter-jshint

Disable Linter by Project

(ctrl + cmd + T) and click on the linter you want to toggle the state on

Add react syntact highlighting

Open a file with extension to update (e.g.: .js and .jsx)

View -> Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)