Why I fell in love with Visual Studio Code

We all know that for a developer their editor or IDE, is their main tool and it’s the one used most during the developing process.

I’ve been using Atom for a really long time and prior to that, I used Sublime Text, still one of the leaders in speed and performance nomination IMHO. I chose Atom because of its variety in extensions ( themes ) and transparency used while searching through them and configuring. But… but… I guess there is always a but. As I said above Sublime Text is really fast, if a little boring (at least to me anyway) and the perks are limited, added to that it doesn’t have a rich community.

The truth is, after I switched to Atom my pet peeve was how it frequently would freeze during fast file switching ( Cmd + p ).

A few months ago I noticed a bit of buzz on Twitter with some interesting screenshots showing off an editor called Visual Studio Code. To be honest, I’ve always felt a little prejudiced against Microsoft — I mean, hello Internet Explorer ?. 😉

Of course, when you decide to change editors you need to weigh the pain of configuring and tuning current workstreams with what the new editor means in terms of ease of use and whether or not it really would make your job easier.

So I did and despite a few reservations, I decided I just had to try it. I mean just the fact that a person like wesbos started using it, it was just a matter of time before it really took off (in my humble opinion at least).

I feel a need, a need for speed 😉

The first hour of using VS code was pretty awesome, it was fast and WOW, extremely intuitive! Aside from the speed I was immediately struck by its very user friendly UI. ⚡️

So against my first dependency for a good editor it had passed the test. It’s fast with every action it’s required to complete, including the opening and loading of project folders. And I’ve never experienced it freezing while working, not even once. It’s pretty fantastic.

Test 2 — Stability

I’ve been using it for about a two months now and it has never crashed once. Even the super lightweight ST3 crashes sometimes. ?

Built-in emmet

In my opinion you shouldn’t have to search for and install emmet, I mean if you work with html & css you’ll know it’s a deadly must-have tool. Admit it, it’s always top of mind.

VS code has it as an OOTB feature and for me that’s a big PLUS. Emmet abbreviations and snippet expansions are enabled by default in html, haml, jade, slim, jsx, xml, xsl, css, scss, sass, less and stylus files.

In the event you have problems with triggering expansion, a scenario that happened to me, you can try to solve it with this line added to config.

IntelliSense #amazing

Yes it works and yes you can feel it. In comparison to other editors with initial config OOTB, VS Code, code has more intelligent language supporting, autocompleting and suggesting it.

Tons of extensions:

I’m a frontend developer and I work with styles preprocessors, JS frameworks like vue.js and of course I use linters.

Below are some of the common extensions VS Code has, that I use day-to-day:

• Settings Sync
  Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.
• Project Manager
  Easily switch between projects
• Babel ES6/ES7
  Adds JS Babel es6/es7 syntax coloring
• JavaScript (ES6) code snippets
  Code snippets for JavaScript in ES6 syntax
• ESLint
  Integrates ESLint into VS Code.
• Sass
  Highlighting, autocomplete & snippets
• Sass Lint
  If you don’t use you should!
• Vue 2 Snippets
  Snippets and Syntax Highlight
• HTML Snippets
  Full HTML tags including HTML5 Snippets
• Auto Close Tag
  Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text

I also have a few thoughts about the project manager. The main difference to Atom and extensions that are similar is, it correctly remembers all opened files related to each project and it includes a native bar on the sidebar. So you are able to switch between projects quickly.

Settings sync. If you are using more than one work-point this is also a must-have extension that allows you to sync all your settings, extensions, key-maps, themes etc.

Themes and icons

Another pretty important thing about your workspace is its theme. I like the Monokai theme (pre-built) and for icons, I use the Material icon theme.

What’s really great too is that you can preview themes and it also works super fast.

Search

It just works! And realising you can use it without any level of discomfort, you’ll know it works really well.

Of course, even though it’s a brilliant tool it’s not perfect. It doesn’t have multiline search ability. In this case, Sublime Text still comes out on top. But to be honest, I can count on one hand, the number of times I was searching for anything multiline.

Built GIT

I actually prefer to use Terminal for anything to do with GIT and in the case of many projects, I use the official GitHub desktop application.

But, having said that the VS Code git system is also useful and you should try it.

VS Code also has good flow, that becomes particularly helpful when you have to solve conflicts during merging. Again it’s very intuitive and works transparently.

It also marks all the changes that are made in files so you can see very quickly what you have changed and understand how it may have changed results. Very useful indeed!

Useful context commands and keybindings

It’s nothing new really but you should check it out nonetheless. I can say that the editor interface’s behavior and commands are similar to your OS interface commands. It’s worth comparing OOTB tools available from other systems, you’ll see VS code stacks up well.

You can of course change any key binding and the searching through them is very easy.

Snippets

Adding snippets in Atom and Sublime Text can be quite weird and sometimes it can be a real pain to add one but that is certainly not the case with VS Code. You can do this with a command from the menu Preferences => user snippets.

What I like is that you just need to choose a file extension and after that you’re ready to write your own snippet and there is a commented example so it’s made that much easier to do.

For example, the snippet for flexbox mixing:

“flex-container”:{
  “prefix”: “flex”,
  “body”: “@include flex-container(row, flex-start, ${1:center});”,
  “description”: “flex mixing”
},

There are a lot of other cool features like debugging and good TypeScript supporting and if I had to we’d both be here all day, so what I’ve tried to do is mention the most important things.

Conclusion

I am aware my experience may not be yours but I really strongly recommend you give it a shot and see how it compares with your current editor. I’m sure once you have, you’ll be as in love as I am.

PS: If you’re already using it, I’d love to hear back from you. Perhaps leave a remark in the comments section below and let me know if you’re using the stable or insiders version and why?

Pavel Bazhenov

Previous story

Meet Tanya, WeAreBrain team lead visionary

Next story

Building a brand that people remember: colour and content