Swiftorial Logo
Home
Swift Lessons
Tutorials
Learn More
Career
Resources

Introduction to Basics of VS Code

What is Visual Studio Code?

Visual Studio Code (VS Code) is a free, open-source code editor developed by Microsoft. It is used by developers for coding in various programming languages. VS Code offers features such as debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git control, making it a powerful tool for software development.

Installing VS Code

To get started with VS Code, you need to install it on your computer. Here are the steps:

  1. Visit the official VS Code website.
  2. Download the installer for your operating system (Windows, macOS, or Linux).
  3. Run the installer and follow the on-screen instructions to complete the installation.

Exploring the Interface

Once you launch VS Code, you will be greeted with a clean and intuitive interface. Here are the main components:

  • Activity Bar: Located on the left side, it allows you to switch between different views like Explorer, Search, Source Control, and Extensions.
  • Side Bar: Displays the content of the selected view from the Activity Bar, such as file explorer or search results.
  • Editor: The central area where you write your code. You can open multiple files in tabs.
  • Status Bar: Located at the bottom, it provides information about the current project and editor state.

Example of VS Code Interface

VS Code Interface

Opening a Project

To open a project in VS Code, follow these steps:

  1. Click on the File menu in the top menu bar.
  2. Select Open Folder....
  3. Navigate to the desired folder and click Select Folder.

This will load your project files into the Explorer view on the left.

Writing Your First Code

Let’s write a simple “Hello, World!” program in JavaScript. Follow these steps:

  1. Open a new file by clicking on the File menu and selecting New File.
  2. Type the following code in the editor:
    3. console.log('Hello, World!');
  3. Save the file with a .js extension (e.g., hello.js).
  4. To run your code, you will need Node.js installed on your machine. If you haven’t done so, install Node.js from nodejs.org.
  5. Open the terminal in VS Code by navigating to View > Terminal.
  6. Run your code by typing:
    7. node hello.js
Output:

Hello, World!

Using Extensions

VS Code supports a wide range of extensions to enhance functionality. Here’s how to install an extension:

  1. Click on the Extensions icon in the Activity Bar.
  2. Search for an extension you want to install (e.g., Python, Prettier).
  3. Click on the Install button for the desired extension.

Extensions can add support for additional programming languages, themes, and more tools to improve your development workflow.

Conclusion

In this tutorial, we covered the basics of Visual Studio Code, including installation, interface exploration, writing and running a simple program, and using extensions. VS Code is a powerful and versatile code editor that can significantly enhance your coding experience. As you become familiar with its features, you’ll find it to be an invaluable tool in your development toolkit.