Visual Studio Code VS Sublime for JavaScript & Frontend Development
In a rush? Skip to comparison directly.
Node or PHP?
Headless or traditional CMS?
React or Vue?
VS Code or Sublime?
Different projects require different tools. Developers must pick the right ones, which is no small task in this fast-paced environment.
And your first pick—choosing a code editor—is crucial.
In this post, I want to explore two of them, Visual Studio Code and Sublime Text, and help you make that decision.
Why these two, you ask? Because:
They're two of the most popular code editors right now.
They're the ones our team has used the most.
I'll present both of them, and compare their advantages & limitations.
I'll then dedicate a full section to JavaScript development on VS Code. Frontend developers, you might want to stick around for that last one!
What is Visual Studio Code?
VS Code was released in 2015 by Microsoft. It's cross-platform, open-source, and completely free.
Don't let its young age fool you though: it grew crazy fast and already has a broad extensions & plugins community.
It's the code editor that our development team uses the most for day-to-day tasks. But I promise to stay impartial. ;)
When asking why devs choose VS Code as their primary editor, the same characteristics often come up: lean, customizable, light & fast.
Some key features also helped make it so popular. First, its super smart IntelliSense provides the best autocomplete discovery for a bunch of languages.
Its support for debugging (mainly for Node.js & JavaScript, which I'll come back to later) also eases a lot of pains developers might experience otherwise.
If you haven't heard, .NET is a big part of our development stack at Snipcart. And even though the old Visual Studio might still be better for older .NET solutions, VS Code is an excellent match for .NET Core.
Without spoiling too much of the end of this post, VS Code is also a very viable match for JavaScript & frontend development...
All in all, Visual Studio Code is a great tool. Our team recommends it to any developers who like to fine-tune their code environment.
Its large library of extensions can be found here, in the Visual Studio Marketplace.
What is Sublime Text
Sublime is a more mature code editor, already over a decade old. It was released in 2007 by Jon Skinner, a former Google engineer. It presents itself as a a sophisticated text editor for code, markup and prose.
Also cross-platform, Sublime isn't free, at a price of 80$/license.
Much like VS Code, Sublime gets lots of praises when it comes to performance and customization.
Some say it's the fastest text editor for writing code. Not only in general performance but also to run fast searches across any number of files. It reaches this level of performance by being very, very lightweight.
Overall, Sublime is a great jack-of-all-trades platform that is sure to please any developer with its speed and stability.
All of its extensions are listed here, in Package Control.
Visual Studio Code Vs. Sublime Text
General comparison
It's hard to pinpoint a clear winner in this comparison.
These are both very reliable tools. You probably won't regret your choice no matter which one you go with. Once again, this post was created to guide you through that decision.
Editor performance
On a pure speed level, Sublime is hard to beat. The main issue with VS Code when it comes to performance is that it's based on the Electron framework which uses an instance of Chromium. This makes the app slower at launch.
This is an issue only if you really care about these few seconds of startup load time. It looks like most developers can live with it, as VS Code is fast enough the rest of the time.
Also, Sublime's performance seems to get way more impacted by bigger projects. On the other hand, VS Code scales well in that regard.
If you're used to working with Atom though, both will feel like a significant improvement for performance!
Sublime, however, takes the win when it comes to performing quick searches. When you open a project, it automatically runs a "symbol analysis," spotting keywords in your code. With a simple command, you can easily find class names and methods within your files. You'll be able to do the same in VS Code, but only with a few languages supported out-of-the-box.
Editor customization & extensions
The main thing developers want in their dev environment it to easily make it their own. Extensions, plugins & themes give you this opportunity. And they all come in droves in both cases here.
There are so many extensions to accomplish pretty much anything with VS Code and Sublime that I won't start listing them out. But here's a short list of resources to start exploring:
When it comes to the look and feel of VS Code and Sublime, there are enough themes and sidebar options in both to shape it to your liking easily. VS Code's sidebar might offer more features out-of-the-box than Sublime, though.
Setting up your ideal environment to answer your needs will require packages research and customization on your part. But in both cases, you'll probably end up with everything you need.
However, not every extension is born equal, and it might prove more painful to reach your goals one way or the other.
For instance, two essential features that come built-in with VS Code while lacking in Sublime are Git integration and an in-editor debugger for multiple languages.
For a lot of developers, these are huge incentives to switch to VS Code.
To expend Git capabilities in VS Code, our team likes the GitLens extension. It lets you see Git blame annotations in a side panel and the editor, amongst other things.
Overall, considering most general capabilities, it's still almost impossible to discern a clear winner. To do so, we have to get into specific needs.
That's why I want to talk about JavaScript development.
JavaScript development with Visual Studio Code
Why specifically JavaScript? Well, first, because it's everywhere (so learn the basics first!).
Also, if you've been checking out our blog, you know that we like to work around everything JAMstack (JavaScript, API & Markup).
Editor's note: When beginning with JavaScript development, some hardcore developers might suggest using an editor that doesn't autocomplete. To really learn the syntax and always start with the basics. We do not agree with this advice. Autocompletion doesn't give you the whole syntax per se, but the methods available on objects/classes. This can smoothen your learning curve. However, you should stray away from automatic code snippets insertion when starting out.
I'm confident to draw a line here and say that Visual Studio Code is the best editor for JavaScript and frontend development.
See, it's becoming the standard editor for JavaScript frameworks because:
It has more built-in capacities for JS
It has excellent extensions to build any frontend developers' dream setup
The in-editor debugger, especially, is particularly helpful. It supports Node.js (JavaScript and TypeScript) from the get-go. Plus, you can add an extension like Debugger for Chrome to debug your JS Code for Chrome within VS Code directly.
VS Code JavaScript extensions
Once again, there's a load of extensions to expand JS capabilities in VS Code. There are already some good resources listing them too, but here's some we use regularly:
→ Vetur. Tooling for Vue.js with cool features such as syntax highlighting, snippets & autocomplete. Vue 2 Snippets also does kind of the same stuff. We love Vue.js, and these tools provide great assistance.
→ JavaScript code snippets. This extension contains code snippets for JavaScript in ES6. It supports both JavaScript and TypeScript. This is a basic one to install right away!
→ ESLint. VS Code supports linters through extensions for several languages, and this one is great for JavaScript. Linters provide warnings for suspicious code.
→ npm. Supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.
→ Previously mentioned Debugger for Chrome and GitLens.
Verdict (well, kind of)
Does this mean that you should absolutely use VS Code every time you work with JavaScript? No. You'll be able to create a good JS environment with Sublime too. But it was just not natively built for it. The same can be said about VS Code about other languages (like PHP, Python, Ruby), where Sublime would be the better option.
That being said, if you have to work in JS-heavy code or to build entire websites/apps with JavaScript frameworks like Vue.js or React, then VS Code will definitively make your life easier.
Every project is different: you may end up working with multiple code editors! I've only talked about two here, but there are many more out there that we should keep exploring. :)
For now, I'd like to know your opinion towards Visual Studio Code and Sublime Text? Which one do you personally use for JS development, and why? Any important extensions I left out?
Let me know in the comments below!
If you've enjoyed this post, please take a second to share it on Twitter. Got comments, questions? Hit the section below!
