13 VS Code Extensions for your productivity
Tags: vscode, extensions, code, frontend
Published: 2020-04-20 15:13:24

---
title: 13 VS Code Extensions for your productivity
published: true
description: My favorite VS Code extensions for daily productivity
tags: vscode, extensions, code, frontend
---

I am working on multiple frontend projects since last 2-3 years (mostly on VueJS) and during this period I've tried multiple VS Code extensions to improve my speed and productivity. Today I am happy to share some of my daily used extensions with you guys.

### [1. GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
I hope this one is one of the most popular VS Code Extensions. It shows me multiple git statuses like, changed lines, who has changed particular line and when.

![GitLens](https://raw.githubusercontent.com/eamodio/vscode-gitlens/master/images/docs/code-lens.png)

### [2. Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
This extensions shows (obviously) `git history` beautifully. Along with that, it's quite helpful to navigate in previous versions of the files with a few clicks.

![Git History](https://raw.githubusercontent.com/DonJayamanne/gitHistoryVSCode/master/images/compareCommits.gif)

### [3. GitHub Pull Requests](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)
This one's my favorite. This one helps me to create PR without visiting GitHub! Also, it adds GitHub in the sidebar along with Extensions, where we can see multiple things related to PRs, like, Waiting For My Review, Assigned To Me and more.

### [4. Change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)
As a developer, we deal with variables the most. This extension helps me to convert the `PascalCase` to `kebab-case` or `snake_case` to `camelCase` with a single click.

![Change Case](https://cloud.githubusercontent.com/assets/2899448/10712456/3c5e29b6-7a9c-11e5-9ce4-7eb944889696.gif)

### [5. Lorem ipsum](https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum)
This one's pretty useful when we're beginning to work on new projects or I am doing an event. We need Lorem Ipsum right?

### [6. vscode-random](https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random)
In designing the UI, when it comes to adding name, email, date, country and more, I prefer them to look as natural as possible, Lorem Ipsum doesn't work there. During that time this extension comes to rescue. It allows us to place random name, email, uuid and more.

### [7. Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
I installed this extension few months back. This one helps me to correct the grammatical mistakes content of the website/app I am working in the code itself without Googling. And sometimes useful to correct variable names if I misspell them.

### [8. DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
I usually work on multiple projects and I need to deploy them to Netlify or Zeit. I manage multiple `.env`s and this one is quite useful to highlight `.env` files.

### [9. ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
Yep, it's for checking the linting of the code while working and fix it if necessary.

### [10. Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
This one's useful to reformat my code based on my Prettier config. Also I usually keep `editor.formatOnSave: true`, this Prettier formats the code automatically.

### [11. Prettify JSON](https://marketplace.visualstudio.com/items?itemName=mohsen1.prettify-json)
So, I used to google every time when I needed to format `.json` files and then found this <3. This one's pretty useful, just press `cmd + P` or `Ctrl + P` and `Prettify JSON`.

### [12. Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
This extension allows me to customize the path auto-completion while working on the code. It also allows to add aliases like `@` which we can point to the root directory of the project and configure the same in our `webpack.config.js`. I am mostly working on NuxtJS, so this help me to auto-complete using my aliases.

### [13. SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss)
Many times I am working on SCSS, and you know we've tons of variables to deal with. This one makes it really easy to auto-complete, navigate and even preview color variables. Saving a ton of time for me.

So that's it! Show some ❤️ if you liked reading the post and feel free to tell me which one's your favorite extension.