Visual Studio Code - Developer Plugins
Next: Visual Studio Code - Blockchain Development Plugins
Below are few list of plugins that I find useful while working on a development project in VS Code. The plugins are irrespective of programming language.
Ref: https://www.youtube.com/watch?v=yGGyRrcRXfc&list=PLvKOuwv1u7bF0x8HqOaBWbbdUMAHyI5V3&index=1
1. Reduce Typing
- Auto Close Tag: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
- Auto Comment Blocks: https://marketplace.visualstudio.com/items?itemName=kevinkyang.auto-comment-blocks
- TS/JS postfix completion: https://marketplace.visualstudio.com/items?itemName=ipatalas.vscode-postfix-ts
- ES7+ React/Redux/React: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
2. Errors and Troubleshooting
3. Code Format and Coding Help
- Prettier - Code Formatter: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
- Blockman — Highlight Nested Code Blocks: https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman
- Partial Diff: https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff
- Bookmarks: https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
- Colorize: https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize
- Color Picket: https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color
- IntelliCode: https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode
- Docs View: https://marketplace.visualstudio.com/items?itemName=bierner.docs-view
- Comment headers: https://marketplace.visualstudio.com/items?itemName=akmarnafi.comment-headers
- Better Comments: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
- TODO Highlight: https://marketplace.visualstudio.com/items?itemName=ygoe.TODOHighlighter
Setting Default Code Formatter: https://stackoverflow.com/questions/30064480/how-do-you-change-the-formatting-options-in-visual-studio-code
4. Live Preview
- Live Preview (HTML,CSS live view): https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
- Microsoft Edge Tools for VS Code: https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools
Note: For Ubuntu/Linux, after installing Microsoft Edge, the edge tools plugin may give you error, to resolve this you need to clear vscode cache.
rm -rf ~/.config/Code/Cache
5. Notes and Guides
- Polacode (code screenshot tool): https://marketplace.visualstudio.com/items?itemName=pnp.polacode
- CodeTour: https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour
- Githubinator: https://marketplace.visualstudio.com/items?itemName=chdsbd.githubinator
6. Utility
- Hex Editor: https://marketplace.visualstudio.com/items?itemName=ms-vscode.hexeditor
- Version Lens (Update Dependencies): https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens
7. Collaboration
- Live Share Extension Pack: https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack
Typescript Coding Best Practices

2. ES7+ React/Redux/React: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets