Visual Studio Code is a lightweight but powerful code editor. This guide will start from scratch so you can follow along as we write and execute some code in JavaScript, Python, and HTML, and along the way explore the features of this code editor.
Once installed and launched, the first thing you might want to do is open a folder to set your workspace. You can do this by going to the folder icon in the Activity Bar and clicking 'Open Folder', or by using a keyboard shortcut (like Command+O on macOS or Ctrl+K Ctrl+O on Windows/Linux). If you want your workspace in a specific location, like a 'getting started' folder within your documents, simply navigate to that folder, highlight it, and click 'Open'. In the left-hand corner, under the Explorer view, you'll see your folder name and any files within it.
Now that we've got a folder open, let's take a quick look at the editor interface. On the far left is the Activity Bar. The first icon is for the Explorer, where you see your folders and files. Below is a magnifying glass to search, find, and replace text across your whole workspace. Then there's Source Control integration for tracking changes with Git and GitHub. Next is Run and Debug, used to execute code and debug it using breakpoints. The Extension Marketplace lets you add additional features, and finally, there are icons for your account and managing settings.
At the very top center, you'll find the Command Palette. You can access it via the 'View' menu or use the shortcut (Command+Shift+P or Ctrl+Shift+P). The Command Palette is very important as it is the control center for all commands in Visual Studio Code. At the bottom of the screen is the Status Bar. On the left, it shows the number of errors or warnings, and on the right, the current cursor line number and the detected programming language. Right above the Status Bar is the Panel, which houses areas for output or debug information, problem details, and an integrated terminal.
Let's go ahead and create a new file. You can use the 'New File' button in the Explorer or a shortcut like Command+N (macOS) or Ctrl+N (Windows/Linux). Notice at the bottom right-hand corner, it initially says 'Plain Text'. But once you start typing something like console.log(', VS Code immediately recognizes it as JavaScript. At this point, IntelliSense kicks in. If you type 'c-o-n', it suggests options like 'confirm' or 'console'. Hit the dot, then 'l', and it suggests 'log'. This smart completion, IntelliSense, helps you write code faster and with fewer errors. If you finish writing your code, like adding messages 'Rise and shine' and 'Ready for a new day', you can save the file using Command+S or Ctrl+S, naming it perhaps 'js_sample.js'. You'll know you need to save when a dot appears next to the filename in the tab. To avoid saving manually every time, you can enable 'Auto Save' from the 'File' menu. Any small change will then be saved immediately. To execute the JavaScript code, you can press F5, and the output will appear in the Debug Console panel below.
Now let's write something in Python. Create a new file (Command+N or Ctrl+N) and save it as 'python_sample.py'. Visual Studio Code recognizes the '.py' extension. However, you might notice that features like IntelliSense aren't immediately active for Python as they are for JavaScript. You could write almost anything, and it might not give you warnings. For languages like Python, extra support is often needed via extensions. VS Code usually recommends the official Python extension. Installing it adds capabilities like IntelliSense, linting (which shows errors with squiggly underlines), debugging support, and more. Now, when you start writing Python code, like print("Python has entered the building"), you get helpful suggestions. If you type invalid syntax, the linter will flag it. You can run the Python code by hitting F5 or by clicking the 'Run Python File' button often found in the top-right corner.
How about demonstrating something with HTML? Instead of creating a new file, you can bring an existing file into the Explorer section. Simply drag an HTML file from your file system and drop it into the Explorer panel in VS Code. A copy will be created in your workspace folder. While you can't execute HTML from the terminal like JavaScript or Python, you can preview it. An extension called 'Live Preview' by Microsoft allows you to open a browser preview right inside VS Code, next to your code. Install it from the Extension Marketplace, then right-click on your HTML file in the Explorer and select 'Show Preview'. If your HTML includes CSS (like Bootstrap for styling), the preview will render it. What's great is that you can make changes to your HTML or CSS, and the preview updates on the fly, showing your results instantly.
Finally, VS Code is extremely customizable, not just with functionality but also with its appearance through themes. Access the Command Palette (Command+Shift+P or Ctrl+Shift+P), type 'theme', and choose 'Color Theme'. You can scroll through the built-in themes. If you don't find one you like, select 'Browse Additional Color Themes' to search the marketplace. You can scroll through many options or search by name if you know one, like 'Night Owl'. Select a theme to instantly change the look of your editor.
About Visual Studio Code
Visual Studio Code (VS Code) is a free, lightweight yet powerful source code editor developed by Microsoft. It runs on Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (like C++, C#, Java, Python, PHP, Go) and runtimes (like .NET and Unity).
Key Features
IntelliSense
Provides smart code completions based on variable types, function definitions, and imported modules.
Run and Debug
Debug code directly from the editor. Launch or attach to your running apps and debug with breakpoints, call stacks, and an interactive console.
Built-in Git
Work with Git and other SCM providers easily. Review diffs, stage files, and make commits right from the editor.
Extensions
Customize your experience by installing extensions to add new languages, themes, debuggers, and connect to additional services. The marketplace offers thousands of extensions.
Integrated Terminal
Access your favorite shell directly from VS Code. Quickly run command-line tools and manage tasks without leaving the editor.
Customization
Change themes, keyboard shortcuts, and editor settings to make VS Code truly yours.
Pros and Cons
Pros
- ✅ Free and open-source.
- ✅ Runs on multiple platforms (Windows, macOS, Linux).
- ✅ Lightweight and fast performance.
- ✅ Huge library of extensions for extensive customization and functionality.
- ✅ Excellent IntelliSense for supported languages.
- ✅ Integrated Git control and terminal.
- ✅ Strong community support and frequent updates from Microsoft.
Cons
- ❌ Can consume significant memory and CPU with many extensions installed.
- ❌ Might have a steeper learning curve compared to simpler text editors for absolute beginners.
- ❌ Occasional performance hiccups on very large projects or with certain extensions.
Download and Availability
Visual Studio Code is completely free to download and use. You can download the latest version for your operating system (Windows, macOS, or Linux) directly from the official website.
