Visual Studio Code Setup for Front End Web Development.

Visual Studio Code Setup Poster

Before you start writing any kind of HTML, CSS, or JavaScript code, you first need to install a handy tool called Visual Studio Code Editor. So does it mean that without any code editor you cannot write code any kind of code for your front-end web development? 

The answer to the above question is no, it is not compulsory to have a code editor for writing your frontend code you can use any kind of text editor like notepad for writing your code but having a code editor is very useful because it is designed specifically to help developers with coding. 
 

Why use Visual Studio Code?

There are many code editors available to download on the internet but the Visual Studio Code is the most popular and favorite code editor for any front-end web developer. There are several useful and essential features available in Visual Studio Code which make Visual Studio Code the best code editor but the three main reasons for its popularity is that it is free, open-source, and cross-platform.
Open-source software is software whose source code is publically accessible under a license in which the owner gives permission to users to see or modify the code and they can distribute the source code to anyone for any purpose.(alert-success) 

Cross-platform software is that software that is designed to work on several computing platforms like Windows, macOS, and Linux. Example: Visual Studio Code, Firefox, Chrome, etc.(alert-success)

I hope you get some basic idea of a code editor and Visual Studio Code. You can also go through some frequently asked doubt related to the code editor and Visual Studio Code. 

Now let's start with the download and installing the part. First, follow the link given below and download the Visual Studio Code (stable build) for your Operating like Windows, macOS, or Linux. 

(getButton) #text=(Visual Studio Code) #icon=(download) #color=(#002EFC)

Visual Studio Code Editor website Image

Install the downloaded application on your system like you install any other software for Windows simply double click on it and you will see the below interface. You just need to choose 'I accept the agreement' and click on the Next few times then click on Install

Once you install and open the VS Code editor, it will look something as shown below. Now we will set up the code editor by installing a few small but useful extensions so you can customize the editor more and increase your productivity.

Click on Extensions (Ctrl + Shift + X) from the left panel and search for one extension named Prettier - Code formatter

Prettier - Code formatter Extension
Prettier is a code formatter that enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.(alert-success)

 After the installation is done, click on the Settings icon from the lower-left corner and search for 'Default Formatter' setting and from the drop-down list choose the extension you have just installed as shown in the below image. 

VS Code Default Formatter Setting

Now VS Code should use the Prettier extension to format your code but if you want your code to get formatted automatically then you can do one more set.

Search for the 'Format On Save' setting in the search bar and tick the check box as shown below so VS Code will automatically format your code whenever you save your file.

VS Code Format On Save Setting Img
The next important setting that you need to search is 'Auto Save' and then set this option to 'onFocusChange'. It will automatically save your file when you go to another tab or you completely leave the window.

VS Code Auto Save Setting

The last but very important extension which I personally found very useful is the Live Server extension. It launches the development local server with a live reload feature for static and dynamic web pages. 

Live Server VS Code Extension

It means you don't need to refresh the web browser again and again to see the changes you have made in your code. You will find this so useful when you will start writing a lot of code for designing your web page.

Live Server VS Code Extension GIF

To see your changes parallelly while writing the code, you can split your screen into two half as shown below.

VS Code and Chrome Browser Screen Setup
So that's it. I hope you have done all the required changes and trust me this VS Code setup is going to increase your productivity a lot. 

👉Support Us by Sharing our post with others if you really found this useful and also share your valuable feedback in the comment section below so we can work on them and provide you best ðŸ˜Š.(alert-success) 

⚡ Please share your valuable feedback and suggestion in the comment section below or you can send us an email on our offical email id ✉ algolesson@gmail.com. You can also support our work by buying a cup of coffee ☕ for us.

Similar Posts

No comments:

Post a Comment


CLOSE ADS
CLOSE ADS