Free Web Development Online Tutorials, Learn to Code
Visual Studio Code Tutorial, Learn vs code editor step by step

Visual Studio Code tutorial

VS Code Tutorial Step by Step

In this tutorial you will learn how to use Visual Studio Code Editor, best for developing any type of JavaScript framework project like Node.Js , TypeScript etc.

First you need to download and install Visual Studio Code.

Once you open Visual Studio Code Editor, you will see a screen like below, where you can start creating JavaScript file, html files etc.

Look at the following few steps carefully, simple step, but understand how it works with VS Editor

  • 1. Click on explorer, then create a file called app.js (you can give any name)
  • 2. Write simple javascript in the file.
  • 3. Save the file ( File=> Save), Don't forget
  • 4. Now call the file from console just by typing node app.js

creating file in vs code editor

To open a new terminal click on “Terminal” => “New Terminal”.

Before you execute node filename.js command, make sure you are at the right file location, means the folder path where you have saved the file

As you can see in the above screen, "Hello Avishkar, Welcome to WTR" is the result of executing the Javascript file.

Workspace in Visual Studio Code Editor

Workspace is just like project, you can add any folder to workspace, before you can run any task in JavaScript file, and file needs to be under workspace, when you add any folder in workspace, all files under that get added automatically.

After making changes in multiple files or adding files, you can simply save the workspace, all files will gets saved.

vs code workspace

how to change build task to run in visual studio code

Simply go to your ".vscode" folder , and rename or delete the file "tasks.json" (this file will be re-genrated)

Important Extention

If you want to display the output on browser then you need to install the "Open in Browser" extention, you either can install from extention list below or from visualstudio marketplace

So, now if you are ready with Visual Studio Code Editor, you can start looking at some of following tutorials

Change theme in VS Code

You can change any colour theme in your visual studio code editor, by defaults it comes with dark black theme, but you can change that to anything you want.

change theme in your visual studio code editor

As you can see in above screenshot, I have changed the theme to a different color, you also can install addition theme if you want, just click on “install additional color theme” from above menu

Comment
Name
Email
Website
Subscribe

You may also read
AI and Machine Learning
AI and Machine Learning
Top 10 Digital Marketing Tips for Small Business
learn digital marketing
Best web designing technologies and best practice
web designing technologies