5 of my most favorite VSCode extensions for web development
Tags: vscode, codenewbie, productivity, beginners
Published: 2019-10-06 23:55:52

> Check out my [blog](https://inspiredwebdev.com) for more articles or [Github](https://github.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript) for my free-to-read JavaScript Ebook that covers all the new features from ES6 to 2019 

I use VS Code as my only text editor for both work and personal project, and these are some of my most favorite extensions.

## 1) [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

A must have if you work in a team but still useful even for personal projects, this extension will let you see who edited each line of code.

![i blame you](https://raw.githubusercontent.com/AlbertoMontalesi/InspiredWebDevAssets/master/images/articles/5-vs-code-extensions/gitblame.jpg)

## 2) [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) / [TSLint](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin)

As an Angular developer, TS Lint is something I can't live without. 
Keeping your code clean and aligned with proper style rules makes it easier for you and your colleagues to read and work on.

If you don't use TypeScript, be sure to install ES Lint and not TS Lint.

&nbsp;

## 3) [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare)

 If you are a "lone wolf" you can skip this one but if you work in a team and especially if you work remotely, this is a must have.

Several times I got stuck on a problem and live sharing with my senior helped me crack the issue I was struggling with.

&nbsp;

## 4) [Chrome Debugger](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)

Stop console-logging everywhere! Just get yourself a debugger and start using breakpoints. Easy to set up and a great time saver, being able to stop your code and have a look at what's going on is a must have that will help you speed up your work.

&nbsp;

## 5) [Settings sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)

If you are like me and work on two different machines, you may find this extension very useful, as it will allow you to keep all your computers synced in term of extensions and settings.


## Extra [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

If you are a non native speaker, this extension can help you keep your code free of typos and errors. I still remember that day I was writing tests and i wrote "testes" instead of "tests" ahha you don't want that kind of code to be pushed to production.


---
Thank you very much for reading. Follow me on [DevTo](https://dev.to/albertomontalesi) or on my blog at [inspiredwebdev.com](https://inspiredwebdev.com) for more.

<div class="promotional_banner">
  <a href="http://a-fwd.to/5gUojI8" target="_blank">
    <img alt="book banner" src="https://raw.githubusercontent.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript/master/assets/banner.jpg"  />
  </a>
  <span>Get my ebook on <a href="http://a-fwd.to/5gUojI8" target="_blank">Amazon</a> and <a href="https://leanpub.com/thecompleteguidetomodernjavascript2019" target="_blank">Leanpub</a></span>
</div>