Welcome to this comprehensive guide. In the world of web development, writing code is not enough; you need a powerful environment that makes writing and testing code easier. This is where Visual Studio Code (VS Code) comes in, the free, open-source code editor developed by Microsoft, considered the first choice for millions of programmers worldwide.
In this detailed tutorial, we will take you on a journey from zero to hero, explaining every little detail of this amazing program, step by step, from downloading and installing, through basic settings, to extensions that turn it into an integrated development environment.
Imagine you want to build a web application. You need a place to write code, fix errors, and test the result. VS Code is that place. It's not just a "text notepad"; it's a lightweight Integrated Development Environment (IDE) that supports almost all programming languages (JavaScript, Python, C++, HTML/CSS) through its extension system.
Simply put, VS Code is the "Swiss Army Knife" for developers. You can write code, manage files, run commands in the terminal, and even manage code versions using Git, all from within one window. It is the tool that accompanies you from the first line of code until you launch your full project.
To start, go to the official website (code.visualstudio.com) and download the version for your OS (Windows, macOS, Linux).
⬇️ Download VS Code (Official)After installing the program, you can install these extensions from the Extensions icon in the sidebar:
To understand VS Code, imagine it as a web page but with more power. The interface is divided into several parts:
VS Code is full of time-saving shortcuts. You can view and edit them from File > Preferences > Keyboard Shortcuts. We recommend saving shortcuts for running code and commenting.
After installing the Python extension, create a new folder on your computer, and open it in VS Code via File > Open Folder. Then create a new file and name it test.py.
Write the following code inside the file:
Save the file with Ctrl + S, then run it by clicking the Run button ▶️ at the top right or using the shortcut Ctrl + F5. You will notice the result appearing in the Terminal window at the bottom. Congratulations, you have written your first code!
To be a professional in VS Code, you must understand every button and every extension. Here is a detailed explanation of each extension:
It is the essential extension for Python support. It provides IntelliSense, error correction, and running code with one click. Without it, VS Code will treat Python files as plain text.
If you are working on HTML/CSS pages, this extension runs a local server, opens the page in the browser directly, and updates it automatically on any change. This saves you from manually refreshing the page every time.
It is a code formatting tool. Once you save, it will arrange the code and add the necessary spaces, making it readable and easy to edit. It supports almost all languages.
If you use Git, this extension shows you who modified each line of code, and when, making it easy to track errors. It also provides many other features to enhance Git.
Let's say you want to build a simple website. Follow these steps:
index.html and write the page structure.style.css and write the styles.This is the core of working in VS Code. You can try changing the code and seeing the result instantly.
Yes, VS Code is open-source and completely free.
VS Code is a lightweight code editor, while Visual Studio is a heavy Integrated Development Environment (IDE) used for large projects (like Windows apps).
No, you can use it locally without the internet. You only need the internet to download extensions.
Have you started using VS Code in your projects? Share your experience in the comments!