I like to try new text editors as they come out. People ask me why I bother, I ask them why they don’t.

Most recently I’ve looked at Vim, Brackets and Atom. There are elements of each I like. I took a lot from using Vim exclusively for 3 months in particular, Atom’s package manager is great and Bracket’s quick edit of styles is fantastic. However, I keep coming back to Sublime Text. Sublime’s ‘find symbol in project’ and lightning fast project wide search were just too useful to give up. I also find the webtech-based editors (Atom/Brackets) just a little sluggish compared to Sublime. It’s barely perceptible but it’s there.

It should therefore be no surprise that within about 30 seconds of colleague @kungfusheep retweeting the Microsoft announcement for Code I was downloading it for OS X:

I’ve been using it everyday since. Here are a collection of thoughts on it. Apologies for the rambling nature of this post. It was written very much stream of consciousness.

Aesthetics and design decisions

I don’t think Microsoft gets the credit they deserve for design. I really liked the design of the Metro interface. It was simplifying things way before anyone else (iOS/Android) was removing gradients and distinct button styles from their UIs.
I also find the aesthetic design of Code incredibly refined and I appreciate things like the blue status bar at the bottom that nods to the one in the latest OS X preview of Word. A key point for me was that other than different syntax highlighting schemes it certainly doesn’t make me immediately want to change the look and feel (as is the case with Atom, Sublime and Vim).

I’m no designer but I think Code is a nice place to be. Certainly beyond what I would expect of a mere preview.

I also feel the UX decisions are very well thought out. To exemplify, suppose you want to look up the keyboard shortcuts. Press cmd+p and type ‘key’ and choose ‘Open Keyboard Shortcuts’. Not only does it open the list of keyboard shortcuts as a JSON file, it also opens the keybindings.json file for the user so you can copy and paste any amendments straight in. A little touch but an appreciated one. Then there are subtle visual indicators of things happening like the task runner indicator (a little spinning line). You can hopefully just about see this in the animated GIF in the section on Task running below.

In Use

I write CSS. Some JavaScript/TypeScript. Some HTML. Little else. All my experience with Code is based solely on writing these languages.

Let’s get this out of the way first. It does, at the minute, have an almost imperceptible delay compared to the UI of Sublime Text. However, it brings so many new things to the table, I’ve already gotten over that.

The remainder of this post will deal with the things that stood out to me, both good and bad as I used Code for the last week. Let’s get the negative stuff out of the way first.

Selection shortfalls

The selection powers of Code are currently a little lacking (or difficult to find docs for). Vim, once mastered, is the king of text selection. Sublime is a close second. In comparison, Code is lacking (or I’ve yet to figure out how to make the selections). For example, what if I want to select in quotes:

<div class="select-this">Hello</div>

In Sublime, anywhere in the quotes I can CMD+’ to select select-this. I can’t perform the same action with Code. I also have a shortcut in Sublime to select a word (and I can define exactly what a word is) and copy it in one shortcut (CTRL+D). I use this all day long to grab a HTML class and create a selector with it in a CSS file. Again, that’s something I seem unable of doing in Code at present. We need select word, add next occurrence to selection, add previous occurrence to selection, select within scope (basically everything Sublime has selection wise).

Project wide searches are slow

One major nail in Vim’s coffin for me is that it’s a horrendously complicated process to do a project wide find and replace. Grep this or that – I don’t even remember; I’ve erased it from my ailing memory.
Sublime nails this feature. It’s both simple and stupendously fast. Thankfully, Code’s folder wide search (the notion is of folders in Code rather than projects) works the same way. Sadly, it’s far slower. I’m unsure whether this is a limitation of the technology itself or merely an implementation detail.

No package manager yet

There is no package manager yet for 3rd party extensibility. To be honest there really isn’t anything I feel I’m lacking I would look to a plugin for at present but you should be aware there isn’t a package manager in this preview release.

Comments alignment

In a CSS file if I am in indented to a property level (one tab/X spaces in) and choose the block comment option cmd+/ then the comment indents back to the gutter. I’m sure this will be fixed in due course but it’s an annoyance right now.

csscomments

No auto indent across file

I have a shortcut in Sublime to re-indent all lines in the file. Great for HTML and CSS/Sass. There doesn’t seem to be an equivalent in Code so each line has to be re-indented manually.

No clipboard history

Sublime Text 3 has a little known feature called the Clipboard history. I love this functionality as so much of my day is cutting/copying text from one point and moving it to another. I’d like to see Code introduce this. Press a designated shortcut and a list of previous cut/copies could be shown for you to select. Please, pretty please Microsoft?

No folder wide symbol search for CSS/Sass

Code has this for some languages but not CSS/Sass. The ability to find a symbol (a CSS selector in this instance) across all files/folders. It’s a massive time saver I miss from Sublime. Hopefully Code will have it for more languages soon.

Now the positives

This has all sounded pretty negative so far. So much so that you are probably not picking up on the fact I actually really, really like Code. Let me count the ways:

Intellisense

Intellisense for JavaScript (and TypeScript) is excellent. Simple things like hovering over a variable indicates the intended ‘thing’ (number, documentFragment, HTMLElement etc). I’ve managed until now without intellisense in JavaScript but it is a really nice addition.
However, Code is pretty clever at pointing out obvious errors in simpler languages like CSS too:

intelli

The docs are fantastic

Code has excellent documentation: https://code.visualstudio.com/Docs
This is often overlooked by editors but a large part of me being able to get up and running so quickly with Code was the documentation. Massive kudos to Microsoft for having this ready for the Preview. It eliminates so many frustrations.

Task runner built in

Until Code, I’d spend my days with a text editor and iTerm2 running, with iTerm2 taking care of all the Gulp tasks (starting and stop tasks essentially).
While I used to commit to source control via iTerm2/Command Line, in more recents months I’ve been using a Sublime plugin to do that. At this point I’m using the Terminal almost exclusively (apart from the odd sudo npm install) to stop/start Gulp tasks.
With Code, I don’t need iTerm2 running. It has a built in Task runner that can read the tasks from a Gulpfile or Gruntfile (no, really, it reads in the file from the root of the folder you have and shows the jobs you have configured). Hitting cmd+p brings up the command palette, type ‘task’, then choose ‘Run Tasks’ and choose the one you want.

taskrun

You can also set a keyboard shortcut if you want for ‘Terminate Running Task’ if you use a file watcher (watch and BrowserSync for example).
This will open in a new editor window so to remove it from view cmd+2 to get to the task window and cmd+w closes the window. You still get a handy indication of running tasks with the little spinner at the bottom left of the interface.
I’m a big fan of anything that reduces the amount of running apps needed day-to-day without introducing additional complexity. Big thumbs up here.

Git integration

It’s easy to find tools to handle Git. Day to day command line is fine, the aforementioned Sublime plugin handles push/pull/commit duties with ease. I only resort to Tower when I mess something up or have a gnarly merge conflict to pick through and need to start diffing files.
Code can do the vast majority of these Git duties. I don’t think anything will beat Tower when things have really gone south but the fact that Code handles diffing so well is really welcome.

Welcome bonuses

There have been a few features of Code that were pleasant surprises, little things I could live without but have been welcome changes and/or improvements.

Markdown preview

You can get a quick preview of Markdown files. I’d rather this happened across a split (source one side, preview the other) but nonetheless, it’s a handy little feature.

Sidebar on the right

One thing I didn’t realise I needed is the ability to have the ‘side bar’ area on the right. In Sublime, while hiding and showing the side bar is a cinch, it always comes in from the left. As text is left aligned it’s more disorientating, particularly when dealing with a single panel of text. With Code you can set the side bar on the right (this is the area for current files, git, debug and search) if you wish. I prefer it there and I’d be sad to give this up.

Built in TypeScript support

The release of Code was serendipitous for me as I had just started working on a TypeScript based project. With Code you can jump from class definition to class definition by pressing F12 on a class name inside a TypeScript file and it will link you straight into that file and definition. The intelli-sense within TypeScript files is also fantastic; a level above simple auto-completion. As you imagine, hovering over a type definition gives you a little more info. I’m just getting to grips with TypeScript but I’m happy to be using something with support baked right in (not surprising as it was built with TypeScript).

Incidentally, if you are unfamiliar with TypeScript I recommend listening to Episode 152 of The Changelog where Anders Hejlsberg and Jonathan Turner from Microsoft talk about TypeScript.

Built in Linting for CSS/Sass

Out of the box there is Linting support for Sass and CSS. What’s more, it’s easy to switch the flags for various warnings/errors that you do/don’t care about. I think this is great. You can get these things installed yourself in other editors but the fact that it’s there out of the box is just really nice.

Conclusion

If nothing else I hope this post might make you consider taking Code for a spin, particularly the OS X users amongst you. I think it’s a really interesting product and hits a sweet spot for me between pure text editor and the benefits of a full on IDE. I really hope it’s a successful project for Microsoft as I’m keen to see Code evolve over the coming months.

My latest book, 'Enduring CSS' is out now

Get $5 off HERE ↠

Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp