Skip to main content

Visual Studio Code

📝 What is VS Code?

From their original blurb:

Visual Studio Code combines the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging.

First and foremost, it is an editor that gets out of your way. The delightfully frictionless edit-build-debug cycle means less time fiddling with your environment, and more time executing on your ideas.

🧠 In My Experience

Now their main page blurb is all about AI. Atom was my favorite code editor, made by GitHub, but Microsoft, who makes VS Code, bought GitHub, so here we are. VS Code is the best editor these days for JavaScript and Python in my opinion. It became popular because it was simple and easy to setup and use, unlike Visual Studio, and it came with a lot of features so you were up and running quickly - and also because of the massive corporate sponsorship by Microsoft. There are other great editors, and ultimately it is up to your own preference. You will find that most JavaScript developers use VS Code.

Download and Install

They have a guide for installation. On windows, it's really simple, though. Just go to their main page, assuming you're using Windows you should see a Download for Windows button, and click that.

Go to your Downloads or wherever you downloaded the .exe file, and double click to run it. You should not need Admin privileges to run it.

Using a Code Editor as a Skill

Before I go into settings, or extensions, or keyboard shortcuts or anything else, I just want to introduce one concept: the use of a code editor, or any tool, as a skill. The better you know your tool, the better you will be at your job. I can't overstate how important it is to know VS Code or whatever editor you're using. It will greatly increase your productivty. Imagine trying to code without copy/paste. Or without multiple cursors. It takes time and might seem annoying at first, so my advice is to approach it like anything else you are learning. There is a lot to it and it will take time and that's ok. You will get stronger and more agile over time and coding will be a better experience for you.

A student on the inside shared a story with me when I introduced this concept to her and the class. I am so grateful to know her and to be able to share that with you now.

A young man and an old man were in a wood chopping competition. The young man started hard and fast and took as few breaks as possible. When he took a break, he would see that the old man was sitting and seemingly resting. The young man kept going, at the same pace, barely taking a break, and every time he looked over the old man was sitting. Finally towards the end the young man saw that the old man was done. Dumbfounded, he asked him, how did you beat me? Every time I looked at you, you were taking a break. The old man replied, I wasn't taking a break. I was sharpening my axe so that I could cut more quickly.

Extensions

You will need to install some extensions, depending on what you're doing. There are a lot of extensions that will support other languages like Python or C, and tools like Docker, API testing and databases.

Focusing on React full stack, I recommend:

And most importantly, I strongly recommend getting a theme that is easy on the eyes and/or that makes you happy. I like Atom One Dark Theme. You can have as many as you like and I recommend going 🐖 wild.

VS Code Tutorial

I will refer to their own site for the following information. It's a great reference although it can be a little strange to navigate and find things. There is so much more available here than the basics that I have noted below.