Learn Visual Studio Code in 7min (Official Beginner Tutorial)

Introduction

Visual Studio Code is a lightweight but powerful code editor. In this article, we'll start from scratch and write and execute code in JavaScript, Python, and HTML while exploring the features of this editor.

Setting Up Your Workspace

Once installed and launched, the first step is to open a folder to set your workspace. Click on the folder icon and select "Open" or use the shortcut (Command + O). For example, choose the folder "Documents/Getting Started." You will see the folder name in the Explorer section with any files under it.

Understanding the Editor Interface

Visual Studio Code's interface includes several important sections:

Activity Bar (Far Left):
- Explorer: For viewing folders and files.
- Search: To search and replace text across your workspace.
- Source Control: To track changes with Git and GitHub.
- Run and Debug: To execute code and debug using breakpoints.
- Extension Marketplace: To add extra features.
- Account and Settings Management.
Command Palette (Top Center): Accessed via "View > Command Palette" or (Command + Shift + P), it's the control center for all commands.
Status Bar (Bottom): Shows errors or warnings on the left and the current line number and programming language on the right.
Panel (Above Status Bar): Displays output/debug information, problem details, and an integrated terminal.

Writing and Executing JavaScript

Create a new file using "New File" or (Command + N).
Once you start typing JavaScript, IntelliSense kicks in for smart code completion.
Save the file as js_sample.js using (Command + S).
To execute, press F5. Your output (e.g., "Rise and shine, ready for a new day") will appear below.

Writing and Executing Python

Create a new file and save it as python_sample.py.
Initially, Python code won't have IntelliSense. Install the recommended Python extension.
With the extension, you get IntelliSense, linting for error highlighting, and debugging.
Write your Python code and execute it by pressing F5 or using the "Run" button.

Working with HTML

You can drag and drop an HTML file into the Explorer.
Use the "Live Preview" extension by Microsoft to preview the HTML directly within the editor.
Make changes to your HTML and see real-time updates in the preview pane.

Customizing Themes

Open the Command Palette (Command + Shift + P) and type "Theme".
Choose "Color Themes" to scroll through the available themes.
If needed, browse additional color themes online.
For example, you can search and apply the "Night Owl" theme to change the editor's appearance.

Conclusion

We explored how to write and execute code in JavaScript, Python, and HTML using Visual Studio Code, looked at features like IntelliSense, the extension marketplace, and customization options. This guide only scratches the surface, so be sure to explore more about Visual Studio Code.

Keywords

Visual Studio Code
Workspace
IntelliSense
Extension Marketplace
Command Palette
Themes
JavaScript
Python
HTML
Live Preview

FAQ

Q: How do I set up my workspace in Visual Studio Code? A: Click on the folder icon and select "Open" or use the shortcut (Command + O). Choose your desired folder to set it as your workspace.

Q: How do I enable IntelliSense for Python? A: Install the recommended Python extension from the marketplace to enable IntelliSense, linting, and debugging for Python.

Q: How can I preview my HTML code within Visual Studio Code? A: Use the "Live Preview" extension by Microsoft. Right-click your HTML file and select "Show Preview" to see the output next to your code.

Q: Can I customize the appearance of Visual Studio Code? A: Yes, open the Command Palette (Command + Shift + P), type "Theme," and choose "Color Themes." You can also browse and install additional themes online.

Q: How do I execute my JavaScript or Python code in Visual Studio Code? A: Write your code, save the file, and press F5 to execute. For Python, ensure you have the Python extension installed.