{dev_notes}

Sublime Text

Published 4 years ago.
Last updated

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 Text 3

Download Sublime

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

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.

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.

Installing Packages

To install a package 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.

Critical Packages

Package Name Description
Side​Bar​Enhancements Provides enhancements to the Sidebar, notably adds delete as “move to trash”, open with.. and a clipboard.
DocBlockr Helps create proper comments for your code.
AllAutocomplete Searches all open files to find matches while suggesting words.

Useful Packages

Package Name Description
SublimeCodeIntel Provides an interface to CodeIntel, a code intelligence engine that was ported from Open Komodo Editor.
HTML5 Add HTML5 syntax mode & snippets to Sublime Text.
BracketHighlighter Highlight brackets.
Git Execute Git commands from the text editor itself.
GitGutter See which lines have been added, deleted or modified in the gutter.
Theme – Spacegray A set of custom UI themes for Sublime Text 2/3. It’s all about hype and minimal. Comes in different flavors with accompanying Base16 color schemes.
Emmet Write HTML and CSS much faster via snippets.
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.

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.