Customize your VSCode for Web Development
Tags: vscode, webdev, codenewbie
Published: 2020-11-28 15:40:46

Hi there, if my guess is right, you would have just started your journey in web development. If I am correct, welcome to the world of web development. Now, you might have landed here because you were looking all over the place for the “Best Customizations” or “ Must have extensions” for VSCode (which I guess you are using right now) editor. So here are the basic customizations and extensions that I am sure 95% of the developers would use.
Now, these are some settings and extensions that I use :

#Autosave
Autosave is a very important option to be selected. Not only in web development, but it could also help you while any sort of development. Autosave, as the name suggests, saves the document automatically whenever it is being edited. It removes the need for using Ctrl + S whenever you make a new edit.
To activate the autosave, you can simply click the file option and then select the Autosave from the drop-down menu.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tishn1jl0xta6lb6dylh.jpeg)


#Emmets
Emmets work similarly to the autocomplete feature in our mobile keypads. They can sense what you are trying to type and can give you suggestions in the form of templates. They come in very handy when you have to create elements inside HTML documents. To activate emmets, you can open the settings of your VSCode by “ Ctrl” + “,” and then search for Emmets in the search bar. Then you can set the value of “Emmet Show Expanded Abbreviation. You could simply make the settings similar to what is shown in the picture below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vbb9bje0iztqwji7pdx2.jpeg)

So suppose you have to create <html></html> tag, you could simply start by writing “html ” (without quotes), and then you’ll see a drop-down appears on the side from where you can select the emmet abbreviation for html.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aq1piwqcgkvabyo5bqju.jpeg)

Select the first emmet abbreviation to create the tag

*Pro-tip: If you type “!” (without quotes) in a newly created blank html file, emmet will show a suggestion. Select the first option by hitting enter and then it’ll create a default html template for you

#Live Server
Live server extension helps you to view the changes you make in your html document live. It opens the document in the web browser and makes the changes in realtime so that you don't always have to refresh the page. To install the Live Server extension, just go to the extension logo on the left panel of your editor and then search for Live Server and install the first extension as shown below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zr0yq4qtp89hthu6ddok.jpeg)

I have already installed the extension so it shows installed for me, for you it’ll give the option to install.
Once the installation is done, make sure that the extension is enabled. Now open the html file that you have made and right-click anywhere on the document, look at the bottom of the drop-down, you’ll find “Open with Live Server”. Click it to see the magic happen.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a9gh7r7mt5hye1trfnec.jpeg)

#Git Extension
Once you are developing a large scale product it becomes necessary to use git. Git extension provides you the built-in feature of committing to your repository without the help of external terminals. It is was a must-have extension for web developers and maybe that’s it now comes pre-installed with VSCode so you just need to set it up.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ar7ygoaictk7qif6k16f.jpeg)

You can enter your commit message in the indicated area.

#Prettier
Have you faced challenges in aligning your code and making it prettier by using the right amount of tabs and spaces? Prettier helps you to edit a file and makes the necessary alignments for you automatically on the go.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/26ebgh5bkyo26ph2fwrd.jpeg)

You just have to go to the extensions and type “prettier”. Install the first option and you are good to go. From next time the moment you save a file it will be automatically aligned to the globally accepted standards.

#Material Icon theme
At times it becomes necessary to just know what time of the file it is by just looking at it. One way is to just see the extension or the file content and try to find out what type it is. Another and easier way is by identifying them by the icons. Material UI is an extension which applies icons to similar kind of files so that you could just look at the icons and know what type of file it is.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/575cjwt57cobla2edt8m.jpeg)

Like you install other extensions, the Material Icom theme can be installed in a similar way. Goto extensions and search for the name and then set it up as your default Icon theme.