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

Summary

This tutorial introduces Visual Studio Code, a versatile code editor, by guiding viewers through setting up a workspace, exploring its features, and executing code in JavaScript, Python, and HTML. It highlights Intellisense for smart code completion, the extension marketplace for added functionality, and customization options including themes. The video also demonstrates using extensions for enhanced Python support and live HTML previews, showcasing the editor's power and flexibility.

Takeaways

• 🌐 Visual Studio Code is a lightweight but powerful code editor that supports multiple programming languages.
• 📁 The first step in using VS Code is to open a folder to set up your workspace through the folder icon or the command shortcut.
• 🔍 The activity bar on the left provides access to various features like the file explorer, search, source control, run and debug, extensions, and settings.
• 🛠️ The command palette is a central hub for executing all commands within VS Code and can be accessed via the View menu or a shortcut.
• 📊 The status bar at the bottom of the screen shows errors or warnings, the current line number, and the programming language in use.
• 💡 Intellisense is a smart completion feature in VS Code that predicts and suggests code as you type, enhancing coding efficiency.
• 🔄 To execute JavaScript code, simply write the code and press F5; VS Code recognizes the language and runs the code in the integrated terminal.
• 📝 For languages like Python, additional support is needed, which can be obtained through extensions that provide Intellisense, Linting, and debugging capabilities.
• 🌐 HTML files can be dragged into the Explorer section of VS Code, and extensions like Live Preview can be used to open a browser preview within the editor.
• 🖌️ VS Code is highly customizable, allowing users to change themes to suit their preferences, with options to browse and install additional themes online.
• 🔍 The video also highlights the ease of use of Intellisense, the extension marketplace, and customization features, with more to explore in VS Code.

Q & A

What is Visual Studio Code?

Visual Studio Code is a lightweight but powerful source code editor developed by Microsoft. It supports a wide range of programming languages and is highly customizable.

How do you set up a workspace in Visual Studio Code?

To set up a workspace, you open a folder through the folder icon or by using the command shortcut (e.g., command O), and then select the desired folder to set as your workspace.

What is the purpose of the activity bar in Visual Studio Code?

The activity bar, located on the far left, provides quick access to various features such as the explorer, search, source control, run and debug, extensions, and settings.

What is the command palette in Visual Studio Code and how can it be accessed?

The command palette is a central hub for all commands in Visual Studio Code. It can be accessed by going to View and selecting it as the first option or by using the shortcut (e.g., command + shift + P).

What is the function of the status bar in Visual Studio Code?

The status bar, located at the bottom of the screen, displays information such as the number of errors or warnings, the current line number, the programming language, and provides access to output, debug information, problem details, and an integrated terminal.

How does Intellisense work in Visual Studio Code?

Intellisense is a smart completion feature in Visual Studio Code that predicts and suggests what you want to type as you write code, making coding faster and more efficient.

Why might you need to install an extension for Python support in Visual Studio Code?

For languages like Python, additional support is needed for features such as Intellisense, Linting, and debugging. Extensions can be installed from the extension marketplace to provide this support.

How can you execute JavaScript code in Visual Studio Code?

To execute JavaScript code, you can write the code in a file, save it with a .js extension, and then use the run button or press F5 to execute the code.

What is Live Preview and how is it used in Visual Studio Code for HTML files?

Live Preview is an extension for Visual Studio Code that allows you to open a browser preview of your HTML and CSS files directly within the editor. It enables you to see the results of your changes in real-time.

How can you customize the appearance of Visual Studio Code?

You can customize the appearance of Visual Studio Code by changing themes through the command palette by searching for 'theme' and selecting from the available color themes or by browsing additional themes online.

What is the significance of the autosave feature in Visual Studio Code?

The autosave feature in Visual Studio Code automatically saves any changes made to a file, eliminating the need to manually save after every change and preventing data loss.

Outlines

00:00

🖥️ Introduction to Visual Studio Code and Basic Setup

The video script introduces Visual Studio Code (VS Code) as a lightweight yet powerful code editor. It guides viewers on how to install and launch the editor, open a folder to set up a workspace, and navigate the interface. Key features such as the activity bar, command palette, and status bar are explained. The script also demonstrates creating and saving files in JavaScript, utilizing Intellisense for smart code completion, and executing code with F5. The importance of saving changes and toggling autosave is highlighted.

05:00

🔧 Enhancing VS Code with Extensions and Customization

This paragraph delves into enhancing the functionality of VS Code with extensions, specifically for Python, which adds Intellisense, Linting, and debugging capabilities. The script also covers executing Python code and the process of installing and using the Live Preview extension by Microsoft for HTML and CSS, allowing for a browser preview within the editor. The paragraph concludes with a demonstration of VS Code's customization options, including changing themes to personalize the editor's appearance and improve the coding experience.

Keywords

💡Visual Studio Code

Visual Studio Code is a popular, open-source code editor developed by Microsoft. It is known for its lightweight nature and powerful features, which include support for a wide range of programming languages, extensions, and customization options. In the video, the editor is used to write and execute code in JavaScript, Python, and HTML, showcasing its versatility and ease of use.

💡Workspace

A workspace in Visual Studio Code refers to a folder on the user's computer that is opened in the editor and used to organize and manage related files and projects. The script demonstrates how to set a workspace by opening a folder, which is essential for organizing code files and setting up the development environment.

💡Activity Bar

The Activity Bar is a panel on the side of Visual Studio Code that provides access to different views and features of the editor. It includes icons for the Explorer, Search, Source Control, Run and Debug, Extensions, and Settings. The script mentions the Activity Bar as the starting point for navigating through the editor's functionalities.

💡Intellisense

Intellisense is a code completion or intelligent code completion feature in Visual Studio Code that predicts what the developer is typing and offers suggestions. It is used in the script to illustrate the editor's ability to assist in writing JavaScript code by providing smart completions, making coding faster and reducing errors.

💡Extensions

Extensions in Visual Studio Code are add-ons that enhance the editor's functionality. The script discusses the need for extensions to provide Intellisense for Python, highlighting how extensions can add support for additional programming languages and tools beyond the editor's core capabilities.

💡Live Preview

Live Preview is an extension for Visual Studio Code that allows developers to view a live preview of their HTML and CSS code directly within the editor. The script demonstrates this feature by showing how to install the extension and use it to preview HTML files, which is useful for web development.

💡Command Palette

The Command Palette in Visual Studio Code is a powerful tool that provides access to all the editor's commands. It can be accessed via a keyboard shortcut, and the script mentions it as the 'Control Center' for executing commands, such as changing themes or accessing other features.

💡Autosave

Autosave is a feature in Visual Studio Code that automatically saves changes to files as they are made, without the need for manual saving. The script explains how to enable Autosave to avoid losing work and streamline the coding process.

💡Run and Debug

Run and Debug is a feature in Visual Studio Code that allows developers to execute their code and debug it using breakpoints. The script demonstrates this by showing how to use the feature to run JavaScript and Python code, which is crucial for testing and fixing code.

💡Customization

Customization in Visual Studio Code refers to the ability to change the editor's appearance and behavior to suit the user's preferences. The script shows how to customize the editor by changing themes, which can affect the color scheme and overall look of the interface, enhancing user experience.

💡HTML

HTML, or HyperText Markup Language, is the standard language used to create and design web pages. In the script, HTML is used to demonstrate how to work with web development files in Visual Studio Code, including editing and previewing HTML code with the help of extensions like Live Preview.

Highlights

Introduction to Visual Studio Code as a lightweight but powerful code editor.

Starting from scratch to write and execute code in JavaScript, Python, and HTML.

Exploring the features of Visual Studio Code's code editor.

How to open a folder to set your workspace in Visual Studio Code.

Using the folder icon or command O shortcut to open a workspace.

Viewing the explorer for folders and files in the workspace.

Understanding the purpose of the activity bar icons in the editor.

The importance of the command palette as the Control Center for all commands.

The status bar displaying errors, warnings, line numbers, and programming language.

Creating a new file and the automatic detection of JavaScript.

Demonstration of Intellisense for smart code completion in JavaScript.

Saving a file with the command+S shortcut and enabling autosave.

Executing JavaScript code with F5 and observing the output.

Writing Python code and the need for additional support through extensions.

Installing an extension for Python Intellisense, Linting, and debugging.

Executing Python code and observing the output with F5 or the run button.

Demonstrating HTML code execution with the help of an extension for browser preview.

Using Live Preview extension by Microsoft to view HTML in Visual Studio Code.

Customizing the appearance of Visual Studio Code with themes.

Changing themes through the command palette to personalize the editor.

Invitation to subscribe for more information and to check out additional resources.

Transcripts

This is Visual Studio Code, a lightweight but powerful code editor.

In the next few minutes, I'm going to start

from scratch so you can follow along and we're going

to 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

that I want to do is show you how to

open a folder to set your workspace, which you can

just do by going through this folder icon here and

clicking open. Or you can use the shortcut and in

my case.

That's command O. Now, I know that I want my

workspace to be in my documents folder under getting started,

so all I have to do is highlight that folder

and click open on the left hand corner, you'll see

under explorer my folder name getting started and any files

that I have under there which is currently none. Now

that we've got a folder open, let's take a quick

look at the editors so you know the purpose of

some of these buttons and sections. On the far left

is the activity bar and the first icon is for

the explorer.

To see your folders and files, below is a magnifying

glass to search, find and replace text in files across

your whole workspace. Then there's source control to track changes

in code with Git and GitHub. Next is run and

debug to execute code and debug it using breakpoints. The

extension marketplace to add additional features to our code editor

and then a couple of icons for your account and

to manage settings. But at the very top center we

have our command palette which you can go to

View and select it as your first option or use

the shortcut. 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, where on the left we'll see a number of

errors or warnings and on the right the current line

number and programming language right above that is a panel

for output or debug information, problem details and an integrated

terminal. So let's go ahead and create a new file.

I can go over here and select new file.

Or hit command and quickly notice at the bottom right

hand corner it says plain text. But once I start

typing console dot log, open parentheses, immediately it notices its JavaScript and

at this point once I start writing anything else, Intellisense

is going to kick in. I write CON and it's

like, oh, you want to write confirm console? It's trying

to predict exactly what I want to write. I hit

the dot, the letter L.

Do you want to write log? Yeah, it's reading my

mind practically, this is Intellisense. It's that smart completion. All

I'll write is rise and shine. And on the next

line, ready for a new day. And if I hit

command+S, I will save my file as jsSample.js

and hit save and you know you need to

save whenever it's a change made because if I hit

the spacebar here, you'll see that there's a dot that

shows up, which means I need to save and if

I want to have to avoid.

Having to save every single time I can go to

file, autosave and any little change that I make, it

immediately saves it and now to execute our code I

hit F5 and as you can see below, rise and

shine ready for a new day.

Now let's write something in Python. I'll create a new

file command+n and I will save it as pythonSample.py

So, Visual Studio Code at the bottom right hand

corner notices that it's Python, but if I start actually

writing code, you'll notice that I don't have that Intellisense,

and in fact I could write almost anything here, and

it's not giving me any type of warning. So for

language like Python, extra support is needed, and that's where

we could use an extension.

Which is the first one recommended here? So now it's

installing and it will give us Intellisense, Linting which is

going to give us that squiggly line whenever there is

an error debugging and some more capabilities. So now

if I start writing I get that Intellisense and I

can finish writing my statement and if I put in

some nonsense here it will give me a warning and

now I can add some more code to execute it

by hitting F5.

Python has entered the building or I could also execute

it by hitting this run button here.

Now, how about demonstrating something with HTML so instead of

creating a new file, what I do want to demonstrate

is that you can just bring in a file into

the Explorer section. So if I go and choose Explorer,

I already have some prepared HTML that I'm going to

drag in from another folder, and when I drop it,

a copy of this file will be created into my

workspace under getting started. And here is just some simple

HTML.

Now with HTML, we can't execute it from the terminal,

but what we can do is use an extension that

will open a browser preview right in Visual Studio code

next to your HTML and CSS, and that extension is

called Live Preview and we want the one specifically by

Microsoft which is the first one here. So I'll install

that, head back to the explorer and now all I

need to do is right click on my HTML file,

select show preview and there you have it within

Visual Studio Code. Now this version doesn't seem too attractive

because there's no styling to it. I do have another

example. I can go ahead and drop in and this

includes some bootstrap styling and I'll do the same. Right

Click show preview. This looks a little bit better. I'll

hit command+minus so you could have a better view.

And what's great about this is you can make some

changes and you'll see the results on the fly and

that is great. I'll increase my screen again hitting

command+plus.

The last thing that I want to show you is

that VS Code is extremely customizable not only with functionality

features but also with the way that it looks by

changing themes. So for example, if I were to go

to the command palette which we mentioned earlier by hitting

command+shift+P and I typed in theme, I can

choose color themes and start scrolling up and down through

the different themes that are available. and if you don't

see what you like, there's an option for browse additional

color themes.

You can choose that and search for a lot

more that's available online, and you could scroll through a

bunch of these. Or, if you already know the name

of your theme, you can just search by just typing

it in. Like I know one that's called night owl.

I'll choose a first and see how everything looks with

my new theme. So I just showed you how easy

it is to execute some code in Python, JavaScript and

HTML using Visual Studio code. And also we explored some

of its features like Intellisense,

the extension marketplace and also how to customize it with themes,

but that barely scratches the surface, so to learn more

about Visual Studio code, subscribe to the channel and also

check out the links in the description for this video.