My Sublime Text packages for front-end web development

Sublime text editor is my favourite and one of the most powerful editors for front-end web development (HTML, CSS, SCSS, JavaScript, React.js, ES6). It’s super fast and highly customizable with tons of plugins, which gives extra functionalities to the editor. Currently, I sometimes use the Sublime text editor for small edits and this short blog post can help someone to find interesting plugins.

General packages

Package Control – allows to manage packages in editor

Sidebar Enhancements – makes the sidebar more user friendly and improves its usability by adding more options to it

SyncedSideBar – sync project sidebar (folder view) with currently active file

AutoFileName – autocomplete functionality for files

All Autocomplete – by default Sublime only considers words found in the current file, this package extends the default autocomplete to find matches in all open files

FileDiffs – shows diffs between files

Sublime-hooks – run sublime commands on common event hooks like new, close, save, etc.

Editorconfig-sublime – plugin for EditorConfig, which helps developers define and maintain consistent coding styles between different editors and IDEs

AceJump – jump between characters without using a mouse

TodoReview – scans comments (TODO, NOTE, FIXME, CHANGED) within your code and builds a results page that allows you jump to files with these comments

Terminal – launches terminal from the current file

Linters

SublimeLinter is code linting framework and each language needs its own plugin, you can see a list here. I use SublimeLinter-contrib-htmlhint, SublimeLinter-contrib-bootlint, SublimeLinter-csslint, SublimeLinter-contrib-scss-lint, SublimeLinter-eslint, SublimeLinter-json

HTML, XML packages

HTMLBeautify – HTML source code formatter

Emmet – web development toolkit which greatly improves HTML & CSS workflow

SublimeLinter-xmllint – plugin for SublimeLinter provides an interface to xmllint

IndentX – XML source code formatter

CSS packages

Sublime-csscomb – plugin for CSScomb – a coding style formatter for CSS

ColorHighlighter – highlights color values

Goto-CSS-Declaration – Goto CSS declaration in an open *.css file

CSS Extended Completions – extended css, less and scss completions

Emmet LiveStyle – live bi-directional CSS editing SCSS packages

If you use LESS, Stylus or SASS, you basically need packages for code linting, formatting and syntax highlighting. For SCSS I use these packages.

SCSS – SCSS syntax package

SassBeautify – SCSS source code formatter

JavaScript packages

Sublime-tern – plugin for TernJS, which analyses your JS code on-the-fly and provides autocompletion, function argument hints, jump-to-definition, and various automatic refactoring operations. More info how to configure this plugin

Sublime-fixmyjs – plugin for fixmyjs, which automatically fix your JavaScript errors in a non-destructive way

DocBlockr – simplifies writing comments

FileHeader – templating plugin which inserts initial content to created or (already existing) file

JsFormat – javascript source code formatting

Pretty JSON – JSON source code formatting

Console Wrap for js – places your selected variable in console.log

Babel-sublime – syntax definitions for ES6 JavaScript with React JSX extensions. If you need ES6 and jsx code linting, you can use plugins ESLint plugins babel-eslint and eslint-plugin-react. How to set up ESLint you cand find in Dan Abramov’s post Lint Like It’s 2015 and Jonathan Creamer’s post Setup ESLint with ES6 in Sublime Text.

Align​Tab – Align text using regular expressions. You can see some nice examples here

Configuring editor

You can utilize the Sublime-hooks plugin to define a hook (command), which is executed when you save a file with specific file extension.

For .css files you can use for example csscomb command

Open .css file in editor and then open Preferences -> Settings More -> Syntax Specific - User

{
   "on_pre_save_language": [
      {
         "command": "css_comb"
      }
   ]
}

Theme

I use OS X and the El Capitan Theme design fits to the system pretty well. This theme is based on the Soda Theme by Ian Hill and is also available in dark version.