If you’re into web development, then you’ve probably heard about Visual Studio Code. It is one of the most popular tools among developers today. Not only is it free and open source, but it also supports a wide range of programming languages. If you want to start coding, learning how to set up and use Visual Studio Code is an excellent first step.
In this guide, you will learn how to install it, configure its main features, and use shortcuts and extensions to work more efficiently.
But first, let’s clarify the most important question…
What is Visual Studio Code?
Visual Studio Code, often called VS Code, is a code editor created by Microsoft. It works on Windows, macOS, and Linux. Developers use it because it is lightweight, fast, and very flexible. It supports programming languages like Python, JavaScript, C++, and PHP. Plus, it boasts features like IntelliSense, debugging, and built-in Git support. With the right setup, VS Code is a powerful coding tool that can greatly support the work of a web developer.
How to download and install Visual Studio Code?
Now you’ve got the basics down about what VS Code is. But where do you get it from?
Well, the safest way to download Visual Studio Code is from the official website. When you click the Download button, the site will automatically detect your operating system. You can also set this up manually, choosing from macOS, Windows x64, or Linux.
Installation is relatively simple, regardless of the system you’re using. Let’s say you’re on Windows; all you have to do is follow the standard steps by clicking Next until the process is complete. During installation, you will see an “Additional tasks” window pop up. Here are the most useful options to enable (according to our programmers):
- – Create a desktop icon
- – Add “Open with Code” to the file context menu in Windows Explorer
- – Add “Open with Code” to the folder context menu in Windows Explorer
- – Register Code as the editor for supported file types (for example .py, .php, .js)
- – Add to PATH so you can open VS Code from the command line by typing code
These settings make it easier to use Visual Studio Code later on in your work. But of course, these are completely optional; it’s just something we like to recommend to our students.
First steps in Visual Studio Code
Once you’ve installed the program, you can open Visual Studio Code for the first time. How exciting!
Initially, the program will guide you through some basic actions like:
- – Choose a color theme
- – Add language support for the programming languages you use
- – Adjust editor settings
- – Sign in with a Microsoft account to sync your settings in the cloud
- – Explore the Command Palette, which is the quick-access tool for all features
- – Select a project folder to start working immediately
- – Watch video tutorials if you want to see a walkthrough
It helps to get familiar with these options from the start, but again, it’s not mandatory. Some students like to skip this part and come back to it later, once they’ve gotten a feel of the program for themselves.
Useful keyboard shortcuts in Visual Studio Code
Keyboard shortcuts make a huge difference in how fast you work in Visual Code Studio. There are lots of shortcuts out there, but here are the most important ones:
- – CTRL + P – Quickly open a file by typing its name
- – CTRL + SHIFT + F – Search a piece of code across the entire project
- – SHIFT + ALT + F – Format the current file
- – CTRL + / – Comment or uncomment selected lines of code
- – ALT + Up or ALT + Down – Move a line of code up or down
- – CTRL + Z – Undo
- – CTRL + Y – Redo
- – CTRL + TAB – Switch between open files
Experienced developers use shortcuts to save time and avoid switching between the mouse and keyboard too often. They might seem hard to remember, but with a little practice, you’ll get the hang of them quickly.
Advanced features in Visual Studio Code
Once you are comfortable with the basics of the program, you can explore some of its more advanced functions. Here are three of our favorite and most commonly used features:
- – Split windows: Drag files in the editor to split the screen into multiple panels. This helps when you want to view several files at once.
- – Full-screen mode: Use the distraction-free mode to aid focus, then return to multi-panel view when needed.
- – Integrated terminal: Open one or more terminals inside VS Code. You can also split these into panels and run commands, all without leaving the editor.
Recommended VS Code Studio extensions for everyday work
One of the big strengths of Visual Studio Code is its large collection of extensions. Click the Extensions button on the left, and you will see thousands of add-ons available to choose from. Language support, debugging tools, design helpers, and tons of other extensions are all ready for installation. Installation is as simple as deciding which extension you want and clicking it once. Wonderful, isn’t it?
While it may be tempting to add all the extensions you see, it’s important to only install the ones you really need. Too many unused add-ons will slow down your computer and make things harder to find.
Here are some extensions that can improve your daily workflow:
- – Live Server: Opens a real-time preview of your website while you edit the code. Any changes you make are instantly visible in the browser.
- – Live Share: Allows you to share a folder with another developer and work on the code at the same time. Useful for teamwork or teaching.
- – Language extensions: Install Python, C++, or other language-specific packs for IntelliSense and debugging features.
- – Vue Preview: Lets you view Vue.js files directly inside the editor. This works best for static pages.
Emmet for faster HTML and CSS
Emmet is a system of shortcuts that expands into full HTML or CSS code. It helps you write code much faster. Here are some examples:
- div → <div></div>
- .container → <div class=”container”></div>
- #header → <div id=”header”></div>
- ul>li*5 → creates a list with 5 items
It also supports complex structures. For example:
- div>section+article →
<div>
<section></section>
<article></article>
</div>
With practice, Emmet can save you a lot of typing. And we all know how precious that can feel after hours in front of a screen.
How to use snippets in Visual Studio Code
Snippets are predefined pieces of code that you can reuse. They are great for saving time when repeatedly writing the same structures. As an example, you can create a snippet for a console.log() statement or for a standard HTML template.
To create a snippet:
- Open the Command Palette with CTRL + SHIFT + P.
- Type “Preferences: Configure User Snippets” and choose the file type.
- Add your custom snippet, for example:
{“Console Log”: { “prefix”: “cl”, “body”: [“console.log(‘$1’);”], “description”: “Quick console.log()” }}
You can use placeholders inside snippets, like ${1:default}, to make editing faster. After typing the prefix, VS Code will suggest your snippet, and you can insert it with the Tab key.
There are also community snippet packs that you can install for even more templates.
Extra tips for Visual Studio Code
We’ve covered all the important information. Now, let’s look at some fun extra tips to elevate your VS Code experience.
- Mini-map: This shows a small overview of your entire code file on the side of the editor. It highlights errors in red and warnings in yellow, and you can click on them to jump directly to that line.
- Multi-cursor editing: Hold ALT and click in several places to type in multiple positions at once. You can also press CTRL + ALT + Up or Down to add cursors on multiple lines.
- Automatic tag closing: In HTML, pressing Alt + / closes the currently open tag.
- CSS shorthand: You can write short forms like m10, which expands to margin: 10px; or p20-30, which expands to padding: 20px 30px;.
Additional Resources for VS Code:
If you want to continue learning, there are many official and community resources available online. Here are three of our favorites. They contain examples, explanations, and even some advanced tricks:
Try this FUN Visual Studio Code extension
If you’re searching for something a bit different, why not try the ProbeJS extension?
It works with the Minecraft KubeJS mod and lets you explore and modify the game with JavaScript. With it, you can see the game’s code, read extra documentation, and even create unusual gameplay features like flying sheep or mining with pigs. It’s been a definite hit among our students, and even some of our staff!
Final Words
Visual Studio Code is a flexible and powerful tool for developers. Whether you are just starting with coding or already experienced, knowing how to install, customize, and use it efficiently will make your work faster, smoother, and maybe even more fun. With all of its extensions, snippets, and add-ons, there are countless ways to save time and improve your workflow with VS Code.
If you are interested in learning more about programming, check out the online courses at Froggy Code. We offer beginner-friendly lessons in Python, web development, and many other fields of programming. Learn to code with confidence, and start your career in tech with us!