Sublime Text is my file editor of choice however other editors are available like Atom, Brackets or if you’re old school Notepad.
There are a few features right out of the box without having to install packages that are really useful, like multiple selections. This allows you to select bit of text in your file, press Command + D to select as many of the element as you want and edit it in-line. Think of it like a super find and replace. Another is similar in a way, the multi-line select and edit. Hold down Alt while clicking and dragging down and you can make individual selections in a column ready to edit, this is great for editing arrays in PHP.
Sublime Text has a powerful package manager that for some reason isn’t included by default but you’d be hard pressed to find any Sublime Text users out there without it installed. This package manager allows you to install plugins and themes right inside of Sublime Text; here are a few of my favourites.
CSS Comb
Indenting and proper structure in a CSS file helps the file remain maintainable by everyone involved in the project. Everyone has a different coding style that they’re most comfortable with, CSS Comb allows everyone to be on the same page. After a developer has finished adding their section of CSS, they can run CSS Comb and format the entire file depending on the rules they’ve set. This is especially useful if the only file you have for a project is a minified version that is very hard to read, if you run CSS Comb you can parse it into a more readable format.
Emmet (Not the guy from the Lego movie)
There are two stages of my life, life before Emmet and life after Emmet. This tool has improved my work flow a tremendously and when I explain what it is, you’ll think I’m over exaggerating but the amount of times you use it, the time soon mounts up!
Emmet has a few uses for both HTML and CSS. Let’s talk about CSS first, have you ever sat there typing out text-decoration: underline; and thought to yourself, there has to be a better way. Well there is, install Emmet and type out tdu press tab and watch your life change before your eyes! This also works with almost all CSS syntaxes and Sublime Text will give you a nice auto-complete hint if you’re on the right track:
For HTML it gets even better, have you ever typed out a full unordered list with anchors and classes and lost the will to live? OK maybe not but check this out…
This works on all kinds of HTML markup, see the full list here http://docs.emmet.io/cheat-sheet/.
WordPress
As we have a lot of WordPress projects here at Fifteen, having all the WordPress snippets and auto-completions at my fingertips without having to jump into the codex all the time is a lifesaver. Especially for things like starting a new loop or a new WP_Query. This isn’t an excuse for not knowing them all off by heart but if it increases your productivity you definitely can’t ignore it.
Themes
This one is pretty self-explanatory, find a theme you like and get cracking! What I will say is you definitely need some kind of syntax highlighting; looking at my example below, it’s much easier to quickly scan the document with highlighting enabled. The theme I use is one of the defaults included with Sublime Text 2 called Monokai.
Another extremely useful package is the SASS Build package. I won’t go into detail about this as we use Gulp here instead to do all our CSS pre-processing, which I’ll talk about in a later blog post. But if you don’t use Gulp this will compile all your SASS for you without having to use an external program like Scout or Compass.
I’d recommend browsing through the Package Control website and seeing what packages are new and see if they fit into your workflow.
Sublime Text is a fantastic overall file editor and is much more than that, if you’re not using it I’d definitely recommend it.