🤩 24 Coolest VSCode Extensions That Will Rock Your World 🛠

Are you looking for the amazing VS Code extensions for your web app? Then Here is the amazing collection of the best vs code extensions of 2020. are essential in modern web development. They are basically a source code editor for building modern web applications. It is a free and open-source editor. Furthermore, It supports a huge number of extensions that can be used for web app development. VS Code extensions extensions let you add debuggers, languages, and tools to your installation in order to support your development workflow. Their rich extensibility model lets extension authors plug directly into the VS Code UI and contribute functionality through the same APIs used by VS Code. VS Code So, to help you choose the right extensions that will add more value than the resources they draw from your system, we’ve listed this extensive list of the best trending extensions available today. While some of these are well-known and commonly installed, others are highly recommended extensions by experienced developers who use Visual Studio Code. 1. GITLENS GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Besides, it let you explore the history and evolution of a codebase effortlessly. GitLens supercharges the Git capabilities built into Visual Studio Code. It also 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. Downloads: 5,972,117 2. PRETTIER – CODE FORMATTER It is an opinionated code formatter that 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. Besides, it supports many languages. It can be integrated with most editor. Downloads: 7,676,738 3. ESLINT ESLint statically analyzes your code to quickly find problems. ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline. ESLint fixes are syntax-aware so you won’t experience errors introduced by traditional find-and-replace algorithms. Downloads: 10,236,293 4. QUOKKA.JS Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type. It makes JavaScript / TypeScript . By default no config is required, simply open a new Quokka file and start experimenting prototyping, learning, and testing blazingly fast Downloads: 754,978 5. PATH INTELLISENCE It adds Intellisense-style completion to filenames, letting you easily type long path names. It removes the file extension by default if the statement is an import statement Downloads: 3,318,156 6. PATH AUTOCOMPLETE This extension provides path completion for VS Code so you don’t have to memorize those long paths. Downloads: 558,868 7. VISUAL STUDIO INTELLICODE It is built for helping developers and programmers with smart code completion suggestions. Also, it comes with default support for Python, TypeScript/JavaScript, React, and Java. IntelliCode saves you time by putting what you’re most likely to use at the top of your completion list. IntelliCode recommendations are based on thousands of open source projects on GitHub each with over 100 stars. When combined with the context of your code, the completion list is tailored to promote common practices. Downloads: 6,401,943 8. IMPORT COST This extension will display inline in the editor the size of the imported package. The extension utilizes a web-pack with the babili-webpack-plugin in order to detect the imported size. Downloads: 710,298 9. FILESIZE It displays the size of the focused file in the status bar of the editor. Downloads: 198,807 10. LIVE SERVER Launch a development local Server by a single click and watch live changes with some extra functionality Downloads: 6,541,468 11. PROJECT MANAGER It helps you to easily access your projects, no matter where they are located. Don’t miss those important projects anymore. Downloads: 1,090,254 12. CODE SPELL CHECKER A simple source code spell checker for multiple programming languages. Downloads: 1,596,862 13. BRACKET PAIR COLORIZER This extension allows matching brackets to be identified with colors. The user can define which tokens to match, and which colors to use. Downloads: 1,154,226 14. REMOTE — SSH The Remote – SSH extension lets you use any remote machine with an SSH server as your development environment. Downloads: 1,605,734 15. REST CLIENT REST Client allows you to send HTTP requests and view the response in the Visual Studio Code directly. Downloads: 1,025,700 16. JAVASCRIPT (ES6) CODE SNIPPETS This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript). Downloads: 3,789,793 17. CODE RUNNER Code Runner is a run code snippet or code file for multiple languages. It is useful to run the code file of the currently active text editor, through the context menu of file explorer. Also, you can run selected code snippets in the text editor. It supports REPL by running code in an Integrated terminal. Downloads: 4,549,546 18. DOCKER The Docker extension makes it easy to build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging of Node.js, Python, and .NET Core inside a container. The extension recognizes workspaces that use the most popular development languages (C#, Node.js, Python, Ruby, Go, and Java) and customizes generated Docker files accordingly. The Docker extension contributes a Docker view to VS Code. The Docker view lets you examine and manage Docker assets: containers, images, volumes, networks, and container registries Downloads: 5,136,014 19. BETTER COMMENTS The Better Comments extension will help you create more human-friendly comments in your code. You will be able to categorize your annotations into alerts, queries, TODOs, highlights, etc. Besides, commented-out code can also be styled to make it clear the code shouldn’t be there, and any other comment styles you’d like can be specified in the settings. Downloads: 960,927 20. DEBUGGER FOR CHROME The debugger is a VS Code extension to debug your JavaScript code in the Google Chrome browser or other targets that support the Chrome DevTools Protocol. It helps to debug eval scripts, script tags, scripts that are added dynamically, and set breakpoints, including in source files when source maps are enabled. Downloads: 1,617,311 21. MARKDOWN ALL IN ONE All you need for Markdown (keyboard shortcuts, table of contents, auto preview, and more). It supports the following markdown syntax: , , and (from GitHub Flavored Markdown) (from KaTeX) . CommonMark Tables strikethrough task lists Math support Frontmatter Downloads: 5,136,014 22. SEARCH NODE_MODULE Search node modules is a simple plugin for VS Code that allows you to quickly navigate the file inside your project’s node_modules directory. Downloads: 571,040 23. SETTINGS SYNC Setting sync lets you synchronize settings, snippets, themes, file icons, keybindings, workspaces, and extensions across machines by using a simple Gist. It supports GitHub Enterprise, pragmas with @sync keywords: host, os, and env. It is easy to Upload and Download with one click. It allows you to Sync any file across your machines. Downloads: 1,870,161 24. NPM 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. The scripts can be run either in the integrated terminal or an output window. Downloads: 2,748,32 : Conclusion Well, Visual Studio Code had 4.9 million monthly active users in 2019. It is no doubt the best code editor out there at the moment. One of the best features is the offering tons of extensions to customize it exactly to your needs and helping you in writing high-quality code. Market Place In this article, we will recommend these VS Code extensions for front-end engineers working with CSS, HTML, JavaScript, and frameworks like Angular, ReactJS, and VueJS. We at ThemeSelection are using some of these extensions to create Modern & Clean Bootstrap Admin Templates , VueJS Admin Templates , Laravel Admin Templates , and Free UI Kits . Vuexy - Vuejs, React, HTML & Laravel Admin Dashboard Template Sneat Free Bootstrap Admin Template You can also download free admin templates made using these extensions. We would say this collection is not the complete one and the extensions are not necessarily the best but we hope it helps you to select the best tools to help you write high-quality code and become the best web developer. If you think this list is missing an extension feel free to suggest and extend it by adding your favorite in the comments section. Also published at https://dev.to/theme_selection/vs-codes-every-developers-should-use-in-2020-2fa3