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

1. Auto Close Tag: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
2. Auto Comment Blocks: https://marketplace.visualstudio.com/items?itemName=kevinkyang.auto-comment-blocks
3. TS/JS postfix completion: https://marketplace.visualstudio.com/items?itemName=ipatalas.vscode-postfix-ts
4. ES7+ React/Redux/React: https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

2. Errors and Troubleshooting

1. Error Lens: https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

3. Code Format and Coding Help

1. Prettier - Code Formatter: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
2. Blockman — Highlight Nested Code Blocks: https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman
3. Partial Diff: https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff
4. Bookmarks: https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
5. Colorize: https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize
6. Color Picket: https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color
7. IntelliCode: https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode
8. Docs View: https://marketplace.visualstudio.com/items?itemName=bierner.docs-view
9. Comment headers: https://marketplace.visualstudio.com/items?itemName=akmarnafi.comment-headers
10. Better Comments: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
11. 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

1. Live Preview (HTML,CSS live view): https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server
2. 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

1. Polacode (code screenshot tool): https://marketplace.visualstudio.com/items?itemName=pnp.polacode
2. CodeTour: https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour
3. Githubinator: https://marketplace.visualstudio.com/items?itemName=chdsbd.githubinator

6. Utility

1. Hex Editor: https://marketplace.visualstudio.com/items?itemName=ms-vscode.hexeditor
2. Version Lens (Update Dependencies): https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens

7. Collaboration

1. Live Share Extension Pack: https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack

Typescript Coding Best Practices

1. ESLint: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

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