Installed VS Code? Here's How To Set It Up

Ah, yes, new devs.

You're learning to code, and VS Code keeps popping up everywhere you look. Or maybe you're an old head who just wants to try out Notepad's fancy cousin. This is a helpful intro, so we'll keep the technical lingo for another video. Let's get right to it.

VS Code start page

Step 1: Open A Folder (Not Just a File)

Why? VS Code works best when you open a folder as a workspace, so everything you work on lives inside that space. All the files and assets are grouped together in that folder. So create a folder, call it something like first-project.

Then open VS Code, go to File > Open Folder, and select that folder. It'll take you inside the folder so all your work stays there.

Step 2: Know the Four Areas of the Screen

When you open a folder, VS Code shows you four main areas:

• Activity Bar (far left): It's the vertical strip of icons. Explorer (files), Search, Source Control, Run/Debug, and Extensions.
• Sidebar: This'll change depending on what you click in the Activity Bar. Click Explorer, it 'll show your files.
• Editor (center): You'll write code here. This is your main workspace.
• Panel (bottom): The terminal, output logs, and errors show up here.

You don't have to memorize everything, just know where what you need is. Like the Explorer (files) and the Editor (where you type).

VS Code activity bar

Step 3: Pick Your First Language and Add the Extension

VS Code supports almost every language out of the box, but for the best experience, install a language extension. If you're starting with Python, install the Python extension by Microsoft.

• Click the Extensions icon in the Activity Bar (it's four squares).
• Search for "Python" (or your language of choice) and install the one from Microsoft.
• This adds IntelliSense (smart autocomplete that suggests code as you type, based on context, not just spelling). You can turn this off if you want to build muscle memory.

Not sure what language to start with? Python is beginner friendly. JavaScript is also good if you want to build for the web.

VS Code extensions page

Step 4: Change the Theme (Optional)

The default theme is fine, but it could look more like your style if you change to something you like.

• Press Ctrl+K Ctrl+T (or Cmd+K Cmd+T on Mac) to open the theme picker.
• Pick whatever looks good to you. You'll be staring at it a lot, so choose something you'll look forward to staring at.

You can adjust the font size too. Go to Settings (the gear icon at the bottom left) and search for "font size." Set it to a number that's good for you. When in doubt, 14 to 16 is a good range for better visibility.

Step 5: Create A File

You'll need to create a file to start coding in your chosen programming language.

Hover on the folder name in the File Explorer. You'll see the "New File" icon pop up. Click that and give your file a name. If you're coding with Python, you could start with main.py.

• Alternatively, go to File > New File and click it. You'll be writing code in no time.

Creating a new file in VS Code

Step 6: Turn On Auto Save (Not Optional)

Instead of hitting Ctrl+S every few seconds, turning this on saves your files every time you pause for a bit.

• Go to File > Auto Save and click it.

You'll need this. It may sound small but there are few things worse than losing progress you could've saved.

Step 7: Format Your Code Automatically (Optional but Nice)

Your code can look clean without you thinking about it. That's what the Prettier extension is for. If you're working with JavaScript or TypeScript, it automatically formats your code (indentation, spacing, quotes) every time you save.

• Install Prettier from the Extensions view.
• Then set Prettier as your default formatter and turn on 'Format On Save' in Settings.

Now your code always looks neat. Nice.

Go Forth And Code

Open a folder. Learn the Explorer and Editor. Pick a language and install the extension. Change the theme. Turn on Auto Save. That's it.

P.S. DO NOT mess with unfamiliar JSON files or mysterious settings unless you know what you're doing.

Farewell, young dev.