Sublime Text 3

Sublime Text 3 is a very simple yet powerfully extensible text editor. The basic app is only 16 MB, but the real power comes from installing packages which extend functionality.

Documentation is at http://www.sublimetext.com/docs/3/ and http://docs.sublimetext.info/en/latest/index.html.

Setup Sublime 3

Download Sublime

  • Download Sublime Text 3 from sublimetext.com.
  • Install the app on your OS.

Understand the Command Palette

The Command Palette is basically a list of all the commands Sublime text can execute. It includes all built-in default commands as well as all commands added by packages. The more packages you install, the more commands you will have available.

  • Press CMD+SHFT+P to open the Command Palette.
  • Select the command you want to execute to run it.
  • Type into the Command Palette field to filter the list of commands.

Install Package Control

To work with packages in Sublime you must first install Package Control, which enables users to download, install and update other packages.

  • Open the Command Palette (CMD+SHFT+P).
  • Type Package into the Command Palette field and then select the Install Package Control option when it appears.
  • The package will auto install and then you should see a confirmation dialog.

Package Control documentation is at https://packagecontrol.io/docs/usage.

Install SublimeLinter

SublimeLinter is the linting framework for Sublime and enables specific linter packages to be installed.

  • Type Package Control: into the Command Palette field and then select the Package Control: Install Package option when it appears. This will open a Package List of all packages available for install.
  • Type sublimeLinter into the Package List field and then select the SublimeLinter package option when it appears.
  • The package will auto install and then you should be taken to the local package documentation file.

SublimeLinter documentation is at https://packagecontrol.io/packages/SublimeLinter.

Install Linters

  • Open the Command Palette (CMD+SHFT+P).
  • Type Package Control: into the Command Palette field and then select the Package Control: Install Package option. This will open a Package List of all packages available for install.
  • Type the name of the package into the Package List field and then select it from the list. The package will auto install and then you should be taken to the package documentation page.
Language Linter Package Name Description
HTML SublimeLinter-html-tidy Provides an interface to tidy. Mac comes pre-installed with html4. html5 can be downloaded with Homebrew: brew install tidy-html5.
PHP SublimeLinter-php Nuff’ said.
CSS SublimeLinter-csslint Provides an interface to csslint. Requires NodeJs be installed. After package install, in Terminal, type sudo npm install -g csslint to have the Node Package Manager install csslint globally.
JS SublimeLinter-jshint Provides an interface to jshint. Requires NodeJs be installed. After package install, in Terminal, type sudo npm install -g jshint to have the Node Package Manager install jshint globally.
YAML Sublime​Linter-contrib-yamllint Linter for yaml-files, also detects duplicate keys, invalid indentation, and more.
JSON Sublime​Linter-json Nuff’ said.

Install Useful Packages

To install packages after Package Control has been installed:

  • Open the Command Palette (CMD+SHFT+P).
  • Type Package Control: into the Command Palette field and then select the Package Control: Install Package option. This will open a Package List of all packages available for install.
  • Type the name of the package into the Package List field and then select it from the list. The package will auto install and then you should be taken to the package documentation page.
Package Name Description
Side​Bar​Enhancements Execute Git commands from the text editor itself.
Git Execute Git commands from the text editor itself.
GitGutter See which lines have been added, deleted or modified in the gutter.
Emmet Write HTML and CSS much faster via snippets.
AllAutocomplete Searches all open files to find matches while suggesting words.
DocBlockr Helps create proper comments for your code.
SublimeREPL Run an interpreter for a range of languages inside Sublime Text.
Trimmer Cleans-up whitespace.
Browser Refresh Save the file you are working on and refresh your browser with one keystroke.
File​Diffs Shows diffs between the current file, selection(s) in the current file, clipboard data, another file, or unsaved changes.
Markdown​Editing Powerful Markdown package.
Babel Syntax definitions for ES6 JavaScript with React JSX extensions.