My Sublime Text packages for front-end web development

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-htmlhintSublimeLinter-contrib-bootlintSublimeLinter-csslintSublimeLinter-contrib-scss-lintSublimeLinter-eslintSublimeLinter-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

Java​Script Completions – more hints and completions for JavaScript code

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

CSS.sublime-text
{
   "on_pre_save_language": [
      {
         "command": "css_comb"
      }
   ]
}

If you want to create an IDE style shortcut CTRL+mouseclick to open the method/function, Sublime Text 3 has already this function called goto_definition, which is key bind to F12. Here you can see how to set this feature with ctrl+click shortcut.

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.

NEED A FULL STACK WEB DEVELOPER? LET'S BUILD SOMETHING.

GET IN TOUCH
3 COMMENTS

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: