The Best Ways to Use the Latest Visual Studio Code for a Web Developer

Bhardwajshashank
The Startup
Published in
4 min readJul 14, 2020

For a worrier, the weapon is a very important thing in his life similarly for a web developer his tools are weapons for web development. Visual studio is a very smart editor in this editor you can build any type of websites, web pages (static, dynamic) with the help of any type of programing language. let us go and learn how a visual studio works.

How to get started with visual studio code for our projects.

  • To get started with the upcoming steps make sure visual studio code is installed in your system.
  1. create a folder on the desktop.
  • Name the folder with a particular name that is related to your project for example XYZ.
  • Now open the XYZ folder by double click on it. The blank folder will be shown on your screen.
  • Select the address bar which looks like (C://users/Desktop/XYZ) and enter the cmd into it as shown below the diagram.
  • Now the selected address of the folder will be opened in the command prompt.
  • To open this project in the visual studio code enter the command : (code .). the whole folder will be opened into the visual studio code.

The welcome page will open on your screen by the visual studio code editor and there are some instructions and soo many tools and also the folder which was created by you.

Now we have opened our project folder into the visual studio code. As you can see there are five icons on the top left of your screen which will perform different tasks by clicking on it.

  • 1st Explorer: This contains our whole files, projects or folders in our system.
  • 2nd Search: This icon is used for searching or replacing the things in our code.
  • 3rd Source Control: This is used with GitHub or we can use it as version control in our system.
  • 4th Run: This icon is used for running or debugging the project.
  • 5th Extensions: Last but not least this is an extension or we can say the Playstore of the visual studio code which can be used to install or manage the extension used in the visual studio code.
  • Creating a file: To create any kind of file is VS code. Just simply click on the new file icon as shown below the diagram and enter the name of the file with its extension and press enter a new file with the given name will be created.
  • Creating a Folder: To create a folder in the VS code. Just simply click on the new folder icon as shown below the diagram and enter the name of the folder and press enter a new folder will be created.

VS CODE has amazing features. There are a lot of shortcuts are there which can be used to do the faster coding. In this blog we will see one shortcut to write the basic structure of the HTML program. In any HTML file when you will enter this symbol(!) after then pressing enter key.

It will auto-generate thebasic HTML code which is shown below the diagram.

In this blog: I tried my best to explain how a web developer uses visual studio code. I hope you enjoyed this blog. In the next blog, I will show you how to start with a simple HTML code in visual studio code.

Happy Coding :)

--

--