Skip to content

Instantly share code, notes, and snippets.

@abhilashrathod
Created February 3, 2020 06:58
Show Gist options
  • Save abhilashrathod/6911b54c86d14b348ea6587b5fbde187 to your computer and use it in GitHub Desktop.
Save abhilashrathod/6911b54c86d14b348ea6587b5fbde187 to your computer and use it in GitHub Desktop.
List of Useful Visual Studio Code Extensions for Frontend/Backend JS Developers (Node, Angular, React, HTML and CSS)
1. Javascript (ES6) Code Snippets: [JS]
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript). It supports JavaScript (.js), TypeScript (.ts), JavaScript React (.jsx), TypeScript React (.tsx), Html (.html), Vue (.vue) files.
2. CSS Peek: [CSS]
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
Image demo
2.1 link: https://raw.githubusercontent.com/pranaygp/vscode-css-peek/master/working.gif
2.2 https://raw.githubusercontent.com/pranaygp/vscode-css-peek/master/symbolProvider.gif
This extension extends HTML and ejs code editing with Go To Definition and Go To Symbol in Workspace support for css/scss/less (classes and IDs) found in strings within the source code. This plugin has taken its inspiration from Brackets. The extension supports all the normal capabilities of symbol definition tracking, but does it for css selectors (classes, IDs and HTML tags). Its main featues are...
- Peek: load the css file inline and make quick edits right there. (Ctrl+Shift+F12)
- Go To: jump directly to the css file or open it in a new editor (F12)
- Hover: show the definition in a hover over the symbol (Ctrl+hover)
3. Auto Close Tag: [HTML]
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
3.1 https://raw.githubusercontent.com/formulahendry/vscode-auto-close-tag/master/images/usage.gif
3.2 https://raw.githubusercontent.com/formulahendry/vscode-auto-close-tag/master/images/close-tag.gif
Features:
- Automatically add closing tag when you type in the closing bracket of the opening tag
- After closing tag is inserted, the cursor is between the opening and closing tag
- Set the tag list that would not be auto closed
- Automatically close self-closing tag
- Support auto close tag as Sublime Text 3
- Use Keyboard Shortcut or Command Palette to add close tag manually
4. REST Client: [Other]
https://marketplace.visualstudio.com/items?itemName=humao.rest-client
REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
In editor, type an HTTP request and the standard HTTP response is returned. You can view the breakdown of the response time when hovering over the total duration in status bar, you could view the duration details of Socket, DNS, TCP, First Byte and Download. When hovering over the response size in status bar, you could view the breakdown response size details of headers and body.
5. ESLint: [JS]
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-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. This plugin will help you overcome your linting errors and make your code more structured and appealing.
6. TSlint: [Angular]
https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin
Just like ESLint checked for errors in JavaScript files, TSLint does the same for TypeScript Files.
7. Prettier: [Productivity]
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
When you're coding your mind out it's a little helpful to rearrage your code so it looks more gracious. Once installed Prettier can help you in that area. It works with most of the programming languages like JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown and YAML.
8. GitLens: [Git]
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
8.1 https://raw.githubusercontent.com/eamodio/vscode-gitlens/master/images/docs/gitlens-preview.gif
GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more. GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.
9. Path Intellisense: [Productivity]
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
9.1 http://i.giphy.com/iaHeUiDeTUZuo.gif
Visual Studio Code plugin that autocompletes filenames.
10. Project Manager: [Productivity]
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
10.1 https://raw.githubusercontent.com/alefragnani/vscode-project-manager/master/images/project-manager-list-sort-by-name.png
This extension keeps track of all of your projets, all in one place. So switching projects is not be more of a pain after this :)
11. Live server: [HTML]
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
11.1 https://raw.githubusercontent.com/ritwickdey/vscode-live-server/master/images/Screenshot/vscode-live-server-animated-demo.gif
Launch your local development server with live reload feature for static & dynamic pages.
12. Debugger for Chrome: [Productivity]
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
12.1 [Please take image directly from the extension site]
A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol. Its a supper handy tool and will make you master debugger. It allows...
- Setting breakpoints, including in source files when source maps are enabled
- Stepping, including with the buttons on the Chrome page
- The Locals pane
- Debugging eval scripts, script tags, and scripts that are added dynamically
- Watches and Console
13. Better Comments: [Productivity]
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
13.1 https://raw.githubusercontent.com/aaron-bond/better-comments/master/images/better-comments.PNG
The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categorise your annotations into:
14. Polacode: [Productivity]
14.1 [Please take image directly from the extension site]
https://marketplace.visualstudio.com/items?itemName=pnp.polacode
You have spent countless hours finding the perfect JavaScript grammar, matching it with a sleek-looking VS Code theme, trying out all the best programming fonts. You take three days porting over your theme before starting to use VS Code. You shell out $200 for italic cursive html attributes.
*The code has to look right*
15. NPM: [Productivity]
https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script
15.1 https://raw.githubusercontent.com/Microsoft/vscode-npm-scripts/master/images/validation.png
This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.
16. NPM Pkg Intellisense: [Productivity]
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
16.1 https://raw.githubusercontent.com/ChristianKohler/NpmIntellisense/master/images/auto_complete.gif
Visual Studio Code plugin that autocompletes npm modules in import statements.
17. Bracket Pair Colorizer: [Productivity]
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
17.1 https://raw.githubusercontent.com/CoenraadS/BracketPair/master/images/example.png
This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.
18. VSCode React Refactor: [React]
https://marketplace.visualstudio.com/items?itemName=planbcoding.vscode-react-refactor
18.1 https://raw.githubusercontent.com/planbcoding/vscode-react-refactor/master/assets/images/preview.gif
This simple extension provides refactor code actions for React developers. Recompose your overgrown JSX without worrying about the given data. This extension will do the dirty work for you without breaking your code.
19. Simple React Snippets
https://marketplace.visualstudio.com/items?itemName=burkeholland.simple-react-snippets
19.1 [Please take image directly from the extension site]
The essential collection of React Snippets and commands.
20. Markdown All in one: [Productivity]
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
20.1 https://raw.githubusercontent.com/yzhang-gh/vscode-markdown/master/images/gifs/multi-ctrl-b-light.gif
This extension helps with all Markdown (keyboard shortcuts, table of contents, auto preview and more).
21. Live SASS Compliler: [CSS]
https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass
https://raw.githubusercontent.com/ritwickdey/vscode-live-sass-compiler/master/images/Screenshot/AnimatedPreview.gif
A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.
22. Bookmarks: [Productivity]
https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks
22.1 https://raw.githubusercontent.com/alefragnani/vscode-bookmarks/master/images/bookmarks-toggle.png
It helps you to navigate in your code, moving between important positions easily and quickly. No more need to search for code. It also supports a set of selection commands, which allows you to select bookmarked lines and regions between bookmarked lines. It's really useful for log file analysis.
23. Color Info: [CSS]
https://marketplace.visualstudio.com/items?itemName=bierner.color-info
23.1 https://raw.githubusercontent.com/mattbierner/vscode-color-info/master/media/starter-example.png
Color Info adds additional information when you hover over a css color, including: rgb, hsl, css-hover-name, hsv, lab, cmyk, hex, alpha, preview and others. You can also customize which of these fields are displayed and the order they are displayed in using the settings.
24. Autoprefixer: [CSS]
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer
24.1 https://cloud.githubusercontent.com/assets/7034281/16823311/da82a3c6-496b-11e6-8d95-0bebbf0b9607.gif
plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use[https://caniuse.com/]. It is recommended by Google and used in Twitter and Alibaba.
25. CSS Percent: [CSS]
https://marketplace.visualstudio.com/items?itemName=morehardy.css-percent
25.1 https://raw.githubusercontent.com/morehardy/vscode-css-percent/master/images/demo.gif
a vscode snippet plugin for transform px to percent unit(vw , vh)
26. Refactor CSS: [CSS]
https://marketplace.visualstudio.com/items?itemName=urbantrout.refactor-css
26.1 https://raw.githubusercontent.com/urbantrout/refactor-css/master/img/refactor.gif
Helps you identify reoccurring CSS class name combinations in your markup. This is especially useful if you are working with an utility-first CSS framework like TailwindCSS, Tachyons etc.
28. Angular Essentials: [Angular]
https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials
Essential extensions for Angular developers. This is an ultimate extension pack for all angular related extensions.
29. Angular Language Service: [Angular]
https://marketplace.visualstudio.com/items?itemName=Angular.ng-template
29.1 https://raw.githubusercontent.com/angular/vscode-ng-language-service/master/demo.gif
This extension provides a rich editing experience for Angular templates, both inline and external templates including Completions lists, AOT Diagnostic messages, Quick info and Goto Defination.
30. Angular Snippets: [Angular]
https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2
https://raw.githubusercontent.com/johnpapa/vscode-angular-snippets/master/images/use-extension.gif
This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML.
31. Angular2-inline: [Angular]
https://marketplace.visualstudio.com/items?itemName=natewallace.angular2-inline
31.1 https://raw.githubusercontent.com/natewallace/angular2-inline/master/images/example.png
This package is a language extension for Microsoft Visual Studio Code. It extends the javascript and typescript languages to add Angular2 specific features for inline templates and stylesheets. When you define an inline template or inline style sheet using the backtick character(`) the content will be processed by this extension.
32. Auto Import: [Productivity]
https://marketplace.visualstudio.com/items?itemName=steoates.autoimport
Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX.
33. Expand Region: [Productivity]
https://marketplace.visualstudio.com/items?itemName=letrieu.expand-region
33.1 https://raw.githubusercontent.com/windwp/vscode-expand-region/master/image/javascript.gif
Expand selection to word, quotes, square braces, expression, content of braces, line, function body (with or withour curly brace)
34. File Icons: [Other]
https://marketplace.visualstudio.com/items?itemName=file-icons.file-icons
34.1 https://raw.githubusercontent.com/DanBrooker/file-icons/6714706f268e257100e03c9eb52819cb97ad570b/preview.png
File-specific icons in VSCode for improved visual grepping
35. Glean: [React]
https://marketplace.visualstudio.com/items?itemName=wix.glean
[Please fetch images from the site page itself]
The extension provides refactoring tools for your React codebase: extract JSX into a new component, convert Class Components to Functional Components and more! In addition, you can extract regular Javascript/Typescript code between files, while handling exporting the selected code from the old location and importing in the new one!
36. htmltagwrap: [HTML]
https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap
36.1 https://raw.githubusercontent.com/bgashler1/vscode-htmltagwrap/master/images/screenshot.gif
Wraps your selection in HTML tags. Can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once).
37. Reactjs code snippets: [React]
https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets
37.1 https://raw.githubusercontent.com/xabikos/vscode-react/master/images/stateless.gif
This extension contains code snippets for Reactjs and is based on the awesome babel-sublime-snippets package. It works with all the standard JavaScript (.js), TypeScript (.ts), JavaScript React (.jsx) and TypeScript React (.tsx) files.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment