Most Useful VS Code Extension’s Which Makes Developer Life Easier

Top 19 Most Used Visual Studio Code Extensions. I’ll be updating this list whenever I find something good.

There is curated list of resources at the end of this article. So read till the last line.

Here are my top picks for Visual Studio Code extensions for fullstack developers.

1. ESLint – The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version. If you haven’t installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

2. Live Server – Launch a development local Server with live reload feature for static & dynamic pages.

3. Code Spell Checker! One nice thing is the extension understands camelCase, PascalCase, snake_case, and more. Another great feature is there are dictionaries available for Spanish, French, German, Russian, and a number of other languages.

4. Settings Sync – Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces and Extensions Across Multiple Machines Using GitHub Gist.

5. Bracket Pair Colorizer – A customizable extension for colorizing matching brackets.

6. Quokka – Live Scratchpad for JavaScript.

7. Live Share – Real-time collaborative development from the comfort of your favorite tools.

8. Code Spell Checker – Spelling checker for source code.

9. Prettier – Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

10. Auto Rename Tag – Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

11. Markdownlint extension can help you make sure your markdown syntax is in good form!

12. EditorConfig – This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true is not specified, EditorConfig will continue to look for an .editorconfig file outside of the project.

13. Browser Preview – Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug. Browser Preview is powered by Chrome Headless, and works by starting a headless Chrome instance in a new process.

14. Chrome Debugger – Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

15. REST Client – REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.

16. Import Cost – This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

17. Code Metrics – Computes complexity in TypeScript / JavaScript / Lua files.

18. DotENV extension for VS Code adds convenient syntax highlighting when editing a .env file.

19. Material Icon Theme adds a ton of icons to VS Code for different file types. Being able to quickly distinguish different files in project can be a great time saver!

There are large number of extensions are available go and checkout. And let me know if you find something useful, I will update list.

This library is a curated collection of sources of information related to web development, JavaScript and similar resources, selected by educator, experts, learners and made accessible to programmer community for reference.
Simply fork and star this repo:
https://github.com/roshangrewal/programming-library

Open for contributor, Anyone who find something good and want to contribute can make pull request to above repo.