Code Editor Overview: Why You Should Switch to VS Code
TL;DR
- VS Code has become the most popular code editor by combining ease of use and popular IDE features
- Out of the box integrations include source control, debugging tools, and terminal instances, makes VS Code a leader in streamlining editor workflow
- With the newly released Live Share extension, VS Code dominates other editors in real-time code collaboration
- VS Code will keep getting better faster with one of the largest extension marketplaces and a growing community of open source contributors.
Microsoft's meteoric, open-source rise
Visual Studio Code, or VS Code for short, is a free, cross-platform, open-source code editor developed by Microsoft, initially announced back in mid-2015. It's available on Windows, Linux, and macOS.
Despite its short history, VS Code has rocketed in popularity, surpassing some of the most popular and well-known editors, like Sublime Text, Atom, and Notepad++. The 2018 Stack Overflow Developer Survey ranks VS Code as the most popular development environment, used by 34.9% of the nearly 102,000 respondents, an impressive improvement over 2016 when VS Code stood at 7.2%.
What's driving VS Code's meteoric rise? VS Code combines key IDE-like features with an ease-of-use developers have come to expect and demand. The result is a development tool with plenty of features geared towards productivity and extensibility without feeling overly complex.
A UI built for quick navigation
The look and feel of VS Code will remind you of many of the tools that you're accustomed to using, with a few key differences that give VS Code a more powerful workflow.
The most noticeable change is the Activity Bar on the left that contains five tabs: file explorer, search, source control, debugger, and extension marketplace.
By placing these shortcuts in an always-present menu within the editor, VS Code lets you quickly pull up frequently used tools.
Through the search shortcut, searching across an entire codebase is easier and more intuitive than searching in Atom or Sublime. Quick access to your source control tool of choice, minimizes having to leave the editor to make commits, checkout branches, or manage merge conflicts. Having a built-in debugger makes debugging a core part of your workflow, whether you're running extensive tests or checking an issue quickly.
Microsoft VS Code deliberately makes it easy to find, research, and install extensions straight from the editor's marketplace. With so many contributors to the VS Code project, VS Code is hoping to leverage its massive community and their homemade solutions to extend the editor's functionality. Installing these extensions requires one step fewer than Atom, which puts the package installation in the settings page.
VS Code includes small details as well, like a split-screen toggle in the top right and a status bar at the bottom to display extension information, notifications, and file data.
Powerful out-of-the-box integrations
VS Code emphasizes a streamlined workflow that natively integrates features you would typically find in a full-fledged integrated development environment.
With an easily accessible debugger, you can quickly toggle to debugging mode to set breakpoints, look into call stack and variables, or step through code execution.
An integrated terminal instance is built directly into VS Code to simplify the building and debugging cycle. Other editors, like Atom and Sublime Text, can be extended using plugins to provide a terminal and debugger but lack native integration.
Visual Studio Code also comes with strong version control and Git integration, providing a way to manage code repositories without leaving the editor.
Simple tasks like cloning repositories can be done through the Command Palette. The Source Control icon displays the number of changes to your files, and clicking on it will show additional details on the textual changes within your file.
You can also check on the status of your repository on the bottom left of the editor, which shows current branch, dirty indicators, and number of commits. Small but useful options like diff view replace the tedious process of using git diff to write your commits.
By integrating source control and debugging features directly into the code editor, VS Code eliminates some of the need to leave your editor to accomplish tasks in your development workflow.
Less busy work with intelligent tools and fast shortcuts
With IntelliSense, Microsoft's intelligent autocomplete tool, VS Code can do a lot of heavy-lifting by providing access to rich function descriptions and quick viewing of function parameters. VS Code ships with IntelliSense for JavaScript, TypeScript, JSON, HTML, CSS, Less, and Sass and supports 40 languages out-of-the-box. For web developers, VSCode includes Emmet as well.
Forget how to find something? A quick shortcut away (Control/Command + Shift + P), the Command Palette surfaces commonly used tasks wherever you are in the application (Atom and Sublime Text also have command palettes). Shortcuts like Peek Definition, which embeds references inline, make navigating your code simpler and help avoid context switches.
If you're making the shift from another editor, VS Code offers a variety of keybindings and themes from other popular editors. And if you're trying to replicate integrations from a previous workspace, with VS Code's large marketplace of extensions, you're likely to find familiar tools to add to your VS Code setup.
Highly extensible and customizable for extra functionality
If VS Code's out-of-the-box features don't include all the functionality that you need, Microsoft has dedicated significant resources toward encouraging a whole community of developers to extend VS Code.
As a result, VS Code has amassed an impressive extension marketplace with ~9,000 extensions. Discovering and downloading these extensions is streamlined through VS Code's marketplace experience. Click the marketplace shortcut on the Activity Bar, search for an extension, read more details about any available extension, and download.
The UI can also be customized to your individual preferences, simply by looking through and selecting various themes and icon extensions, similar to Atom's customizability.
Here are a few popular extensions to get you started:
- EditorConfig: helps maintain consistent coding styles across editors and IDEs
- vscode-icons: adds icons to your workflow to make navigation easier
- Prettier: formats and enforces a consistent code style
- GitLens: supercharges your Git integration
- Code Spell Checker: corrects spelling errors
- Debugger for Chrome: allows you to debug JavaScript in the Chrome browser
Maximize teamwork with real-time code collaboration on steroids
One extension in particular, Microsoft Live Share, has resonated with developers.
Code collaboration is a notoriously difficult problem to solve—usually you're stuck trying to cobble together a few tools to share your screen screen, copy and paste code snippets, or replicate development environments.
Microsoft released its new extension Live Share to streamline code collaboration by enabling real-time collaborative code editing from the comfort of your own code editor or IDE. With more than 3 million downloads, Live Share has proven itself ideal for debugging, pair programming, and training.
Live Share is free to use, easy to download, and works across VS Code and Visual Studio. You can open your code editor, share a link with team members, and allow them to access your workspace. You can independently use debugging features or share terminal instances. You can also share local servers by exposing a TCP port.
Team members can view and edit your code, but do so through their own code editor with their personal customizations, like their extensions and editor settings. They'll be able to seamlessly navigate your project and make changes.
Check out more on how Microsoft Live Share changes the developer collaboration game.
Strong performance without sacrificing functionality
With all these features, you might expect VS Code to bog down easily.
To the contrary, VS Code is regarded as responsive and stable, albeit not the fastest when compared to other code editors. VSCode outperforms Atom, especially for managing large codebases, but is more sluggish than Sublime, which has long reigned supreme in speed and performance. Being an Electron-based app, VSCode can feel slower when compared to native editors such as Sublime Text and Vim, which open, load, and search files and projects more quickly.
VS Code strikes a more popular balance: if you're looking for an editor that performs well without sacrificing access to tons of other features, VS Code hits the spot.
A developer is only as good as his tools
Even with its arsenal of integrated features, VS Code isn't a developer's silver bullet.
As mentioned previously, Sublime Text and Vim are incredibly fast and able to smoothly open large files. VS Code won't be able to compete when speed is your most important requirement. But where else might VS Code fall short?
Depending on you and your team, VS Code might not offer the robustness you need from a full-fledged IDE. Certain IDEs, like PyCharm and Eclipse, have been developed over the years to cater to specific environment or language development. Data scientists might feel more at home using familiar tools like Spyder or iPython.
For some, VS Code might be too feature-rich out of the box. As an alternative, Atom is incredibly simple to start using and is known for its hackability as you consider adding more functionality to your code editor. If you don't need source control management, terminals, or debugging tools right away, VS Code might be overkill.
A growing community and roadmap
The community of developers building VSCode is unsurprisingly robust; VS Code had the most contributors of any project on Github in 2017.
With such a dedicated community using and supporting VS Code, you can expect a bunch of new features and improvements in the next year rolling out through VS Code's regular monthly updates. Check out the public roadmap to get a preview of what's to come.
As VS Code grows in popularity and Microsoft and the VS Code community work to expand its functionality, VS Code will continue to dominate the code editor space.
