[Q&A] Codecademy's tech team shares with us why they love VS Code

In this article, Codecademy Curriculum Developers and Engineers share with us why they prefer VS Code to other text editors, what their favorite extensions/plugins are to make coding more enjoyable, and their advice for anyone just getting started with VS Code.

Why do you prefer to use VS Code as opposed to just any text editor? / What do you love about VS Code?

VS Code has a great balance of core usefulness and customization. It does what I need it to for my basic editing needs; its built support for web coding is second to none. At the same time, I can customize it to be just the way I like it with extensions, themes, and UI tweaks.

–Josh, Senior Software Engineer

I use VS Code for all of the Rails and React work that I do on the Growth team
it’s faster than atom when it comes to file search, and has good integrations for typescript, jest, cypress, with a built-in debugger. SublimeText is the fastest, but it’s not as user friendly as atom or VS Code.

–Prith, Software Engineer

One of my absolute favorite shortcuts is ⌘L which creates cursors selecting all instances of your currently selected text throughout a file. This makes it super easy to make changes en mass throughout your code.

–Mariel, Senior Curriculum Developer

There are a few things about it that won me over about VS Code…
First, I’m primarily a Javascript developer, and the built-in rich JS support with autocomplete made my life much easier right away.
Second, VS Code’s developer-friendly architecture, open-source ethos, and strong community support ensure there’s always a quality plugin for whatever language / technology I need to work with. In the past I’d have to spend a ton of time configuring or debugging hacky plugins even for pretty standard development tasks. With VS Code, 95% of plugins I need have just worked out of the box with no further effort so I can spend more time writing code.
Lastly, it’s free. For all its advantages, you can just download it and use it without having to worry about subscription fees or buying the new version in a year. There are probably better paid specialty editors for certain languages like Java or Kotlin, but VSCode is pretty hard to beat overall.

–Casey, Senior Software Engineer

VSCode is my preferred code editor because of its wide variety of useful extensions including linting, indentation, and live server. I particularly love its built-in version control abilities with Git.

–Galina, Curriculum Developer

I prefer editors that are lightweight and don’t include a lot of stuff I don’t need. I enjoy finding and learning about new plugins that I can install to make my job easier. VSCode comes with a little more pre-installed than say Atom or Sublime Text, but the stuff it comes with like Intellisense is really useful, especially for frontend developers.

–Jake Hiller, Staff Software Engineer

What advice do you have for someone just setting up VS Code?

Enjoy the “Intellisense” features: they’ll help you code more efficiently and quickly! VS Code can correct your typos, automate basics such as file imports, and even generate basic code templates for you. Don’t be scared of the editor being smart about suggesting code for you.

–Josh, Senior Software Engineer

For someone setting up VS Code, I recommend setting up the keyboard shortcut to split/clone the current file pane to up/right/down/left. It’s useful to not have to switch between file tabs.

–Prith, Software Engineer

Spend some time upfront learning the various commands, code navigation and keyboard shortcuts; this will pay large dividends in terms of your workflow efficiency and frustration level down the line. Also, learn about splitting the screen to work with files side-by-side.
Decide which language you’re going to code in most, and research some of its popular plugins. Get set up with, at minimum, some linting and formatting capabilities for that language. This will help you learn to write more readable code with fewer bugs.
Don’t worry about getting everything set up perfectly at the start. There are a ton of configuration options and it’s not important to know what they all do. The more you use VS Code and interact with other developers, the more you’ll form your own editor preferences and discover additional plugins to help with pain points.

–Casey, Senior Software Engineer

Don’t start by trying to add a bunch of plugins, the editor will actually tell you when there is a language plugin you could use for a certain file type, so start by installing those. Once you know your way around, start digging into the plugins you might want for whatever you’re doing.
Learn the basic keyboard commands, if you type cmd+t you can type out a few characters of a file name and navigate to it really quickly. shift+cmd+f puts you in the global search for the project you’re in, which you’ll end up using constantly.
Once you’re familiar with VSCode, look through the user preferences, there are probably a few options you’ll find in there that you’ll want to tweak. One of the ones I always change is setting Auto Save to onFocusChange, so whenever I switch applications my files automatically save. If you always forget to save before you check your work in the browser you might want to turn that on.

–Jake, Staff Software Engineer

What are your favorite VS Code extensions and plugins?

The built-in debugger is a fantastic tool for debugging command-line apps, such as Node.js programs and unit tests. It works really well once you understand how to set it up and is an invaluable day-to-day tool for me. Live Share is really nifty too. You can share a VS Code session with someone and it works super fluidly to let you both look at and edit code at the same time.

–Josh Goldberg, Senior Frontend Developer

My favorite extension is: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer where it makes it so easy to create a server that hot reloads (reloads the web page when I make a change to my code) it’s saved me a ton of time and the hassle of having to refresh a page each time.

–Kenny, Senior Curriculum Developer

Everything outside the main editor functionality is a plugin, and VS Code ships with a number of really useful ones. They included Git, Typescript, JavaScript, HTML, and CSS plugins are amazing. Besides those, I’d have to say the VIM plugin and the Settings Sync plugin are my favorites. VIM is an old-school editor that lets you do just about anything you need to with a few concise keystrokes. There’s a bit of a learning curve, but once you know it, it’s a huge time-saver. Settings sync lets you export your VS Code settings and plugins to the cloud, then import them into another instance of VS Code so you can have it set up just how you like it on any device, instantly.

–Casey, Senior Software Developer

VSCode’s built-in “IntelliSense” feature is also extremely helpful in its spell checking and code completion support for popular languages such as HTML, CSS, JavaScript, and more. My favorite VSCode extension has to be “Live Share” because it allows developers to co-author the same document and collaborate in real-time.

–Galina, Curriculum Developer

GitLens: If you work on a team with other engineers having easy access to the file history can be really useful.
Open in GitHub: I’m constantly using this shortcut to open files in GitHub and copy GitHub links to files to share with co-workers.
Prettier: Only really useful if your project allows it, but having automatic code formatting for JS/CSS when you save is really great.
Browser Preview: I only use it occasionally but it can be really useful to have a browser window side-by-side with code in your editor. If you’re working on smaller projects it might be perfect for you.

–Jake, Staff Software Engineer