10 Visual studio code extensions to ease your web development
Tags: vscode, webdev
Published: 2020-12-19 03:42:37

Visual studio code is the most used source-code editor in web development and I will recommend it to anyone.

It's in-built functionality and preinstalled plugins make it one the best tool to use for web dev its features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git.

That being said here are a few extensions that will take its utility a step further in turn increasing your web development skills.

##**1. Live Server**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/isuy5dsmpe55216mergg.png)

This is an essential extension for any web developer, it enables you to launch a development local Server with a live reload feature for static & dynamic pages.

[Click to get Live Server for vscode](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

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


##**2. Auto Rename Tag**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tua3v61e1rejii708muy.png)

This extension helps you to rename the opening and closing tags of an element simultaneously.

[Get auto rename tag here](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

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


##**3. Bracket Pair Colorizer**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/srnblg1z5wzn5rmq0mtp.png)

This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.

[get Bracket pair colorizer here](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

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

##**4. Path Intellisense**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vxv2s2kpf7ymhyraxhgw.png)

Visual Studio Code plugin that autocompletes filenames. This will defiantly come in handy when working on a project with many files.

[get path intellisense here](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)

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

##**5. ESLint**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/sslb594wgp3hb9oakpu3.png)

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code.

[Get ESLint here](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

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

##**6. JavaScript (ES6) code snippets**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ispfit9cyip11hmofg2a.png)

Code snippets for JavaScript in ES6 syntax.

[get javascript (ES6) code snippets here](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

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

##**7. Debugger for Chrome**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1co863wbhpr0rk4v17u3.png)

Debug your JavaScript code in the Chrome browser or any other target that supports the Chrome Debugger protocol.

[Get debugger for chrome here](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

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

##**8. GitLens — Git supercharged**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e9uo6gg87bou28pe5po2.png)

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

[get gitlens here](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

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

##**9. Prettier - Code formatter**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kyglpwwupyuhlkbp4rp3.png)

If you are one who likes beautiful code well prettier is here for you it is an opinionated code formatter. It 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.

[Get prettier here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

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


##**10. Live Share**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mgvan1tw4ermwrnfmasw.png)

Real-time collaborative development from the comfort of your favorite tools.
Visual Studio Live Share enables you to collaboratively edit and debug with others in real-time, regardless of what programming languages you're using or app types you're building.
This extension is fun to use and will help you develop your collaborative skills.

[Get live share here](![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mgvan1tw4ermwrnfmasw.png))

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


Thanks for reading and I hope this information will take you one step closer to becoming a better web developer.