25 VS Code Extensions For Productivity
Published: 2022-10-21 10:43:13

VS Code extensions are created for improving developer productivity. As such knowing the most used extensions and using them no doubt a must for any level of developers. In today's post, I've gathered 25 VS Code extensions that I love using personally and you should too. 

# 1. live server
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hz7r5577vwnu0prxfvf2.png)

Launch a development local Server with live reload feature for static & dynamic pages

# 2. live share
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/586drno558trt51zygh7.png)

Real-time collaborative development from the comfort of your favorite tool with other developers in different parts of the world.

# 3. eslint
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gncpv0obj5b22jdhao6v.png)

Integrates ESMAScript Lint JavaScript into VS Code.

# 4. beautify
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wx5u0n2onak10n8amk79.png)


Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

# 5. git history
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g4j8ogp13lut50qex0zg.png)

View git log, file history, compare branches or commits

# 6. intellicode
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9b7cmgf6uk6gm5hmx5o.png)

AI-assisted development

# 7. color highlight
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wj7wcn69547qj9s7nxcw.png)

Highlight web colors in your editor

# 8. todo highlight
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyev1doyz2xtawvijogh.png)

highlight TODOs, FIXMEs, and any keywords, annotations...

# 9. material icon theme
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy7sw5tarh35irdz7q5f.png)

Material Design Icons for Visual Studio Code

# 10. one dark pro
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1pz4peadynlgtzm5o1q.png)

Atom‘s iconic One Dark theme for Visual Studio Code

# 11. drakula offical
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bx8qm92hdrdce8sub53l.png)

Official Dracula Theme. A dark theme for many editors, shells, and more.

# 12. es7+ react/redux/react-native snippets
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dlkyu8uk0gufblxk46kf.png)

Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.

# 13. reactjs code snippets
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70qyvyh6l4cmwami1ef4.png)

Code snippets for Reactjs development in ES6 syntax

# 14. html snippets
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlvqm8c1cgvbgqfaa94r.png)

Full HTML tags including HTML5 Snippets

# 15. markdown all in one
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4xqkngagvn9xsl63gs2.png)

All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)


# 16. dotenv
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h5msfziw0cq0ldu26ek.png)

Support for dotenv file syntax

# 17. rest client
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0wdcyhwk7oy2uaawnt1z.png)

REST Client for Visual Studio Code

# 18. github copilot
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djdr8wn4tkqg1w1r4x1f.png)

Your AI pair programmer

# 19. quokka.js
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hswrx2oux40xg8k51lwv.png)

JavaScript and TypeScript playground in your editor.

# 20. babel javascript
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d7dcoo1ukcinooky4fwm.png)

VSCode syntax highlighting for today's JavaScript

# 21. prettier code formatter
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4tg3dpq0pfmz9wvonoxe.png)

Code formatter using prettier

# 22. tabnine ai autocomplete
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8gw52qhwz15frmq8zztn.png)

JavaScript, Python, Java, Typescript & all other languages - AI Code completion plugin. Tabnine makes developers more productive by auto-completing their code.

# 23. vscode styled components
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7cul8ceqxxm3nf8r03d.png)

Syntax highlighting for styled-components

# 24. path intellisense
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1nodt6ft38771zq3efk.png)

Visual Studio Code plugin that autocompletes filenames

# 25. intellisence for css
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oubnuyj70554l02gi7k4.png)

CSS class name completion for the HTML class attribute based on the definitions found in your workspace.


# More extensions
You can explore tons of more extensions in the VS CODE official [website](https://marketplace.visualstudio.com/)