Sublime Text Setup – What I use and what else is out there?

I often see questions on what editor/IDE to use (see the difference between the two). My reasoning behind picking Sublime is simple. I used it at the beginning of my coding career. I got used to it and stuck with it for more than four years now.

It has a lot to offer to the table, but it’s important to note, that it targets to a particular type of use. If you want full blown IDE with debugging tools, monitoring and whatever is out there, Sublime is not for you.

An important note – My setup is orientated on HTML/CSS/JS WordPress development. You are very likely to need more or different plugins to what I use. Feel free to post in the comments what you have installed 🙂

Setup package control

First of all, I have, to begin with the package control addon. You need it to get all packages set and running. The addon will give you access to over 3,500 different packages.

To install it just press ctrl+` to open the console (or View->show console). Then paste the following snippet. Works for Sublime Text 3.

Start installing plugins

Just press ctrl+shift+p or command+shift+p to open sublime text command run window. Type installand hit enter. Then you can enter the name of the plugins listed below and hit enter to install them. More information.

Emmet

Run commands like .component>ul.list-wrapper>li.list-item*5>a and gets output like this:

See more on the packages’ documentation.

DocBlockr

Write easily doc comments. Simply add /** tab will automatically add new lines of comments or create doc template describing every argument in the functions.

docBlock usage
A small demo of how DocBlock is automatically creating comment templates.

GitGutter

Show you + or – icons next to the line numbers on what has been changed in your files. Here is a screenshot of the plugin in work.

GitGutter screenshot
Adds + when there are new changes in the file

Origami

Split panels everywhere! An easy shortcut for creating new panels.Ctrl+k;arrow_up See more about its usage here.

SideBarEnhancements

Add many more actions you can take when right-clicking on files and folders in the sidebar like “open file’s location,” “Open in browser,” “Duplicate” etc. I now mainly use the sublime quick commands instead of any UI buttons, but it’s definitely a nice addition.

Status Bar File Size

A subtle addition, but sometimes pretty handy. It shows in the form of text how large is the file you are currently editing in the footer bar of sublime.

WordPress Dev

Adds autocomplete for all WordPress core functions. Very handy while theming or writing plugins. For anything more advanced I would recommend switching to some IDE like PhpStorm.

Sass

Apparently, for highlighting its very handy and since most of my work is with opened *.scss files its a must.

JavaScript Completions

Again, nothing more than more rich autocomplete. A must when you write more JS, though I would say Atom is doing a better job here, I won’t leave Sublime since it prevails in speed performance.

Visuals

Right now I’m using for a color scheme Packages/Base16 Color Schemes/themes/base16-bright.tmTheme for the theme – Boxy Tomorrow.sublime-theme You can install both by searching Base16 or Boxy theme. I must say that im changing them every week, so here are other’s I’ve used for longer:

Material Theme
material-theme-preview

My settings file

And here is a copy-paste of my setup file. The font-size is always different, depending on my position and how tired my eyes are.

Feel free to post your setup, plugins, themes or whatever that helps you in your day-to-day work 🙂