Visual Studio Code is a code editor offered by Microsoft that includes a ton of extensions that make your web development a great experience. There is even an open source variant of Visual Studio Code called Vscodium that removes Microsoft’s telemetry from the editor.
In this article, I will introduce extensions that speed up and increase your productivity when using the editor. Heck, it might even give it superpowers ?. These extensions are meant for web development, mainly Html, CSS, JavaScript and Database interactions too. There are other extensions for web libraries and web frameworks available too( I’m looking at you, Vuejs).
These extensions can be accessed from the activity bar by clicking on the extensions’ icon.
10 best visual studio code extensions for web development
1. Live Server – An extension by Ritwick Dey, it allows you to launch the project in a browser and auto-refreshes the server instance when you save your work. It’s great for any HTML based project and saves you time.
2. 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.
3. JavaScript Booster – This VS Code extension provides various code actions (quick fixes) when editing code in JavaScript (or TypeScript/Flow). Just note the light bulb at the left and press it to learn how you can transform the code under the cursor. It also includes code actions for react too.
4. Thunder Client – Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with simple and clean design. With this extension you can quickly test your API endpoints without leaving the Visual Studio Code Editor interface at all. This speeds up your development flow quite a bit.
5. CSS Navigation – Allows Go to Definition from HTML to CSS / Sass / Less, provides Completion and Workspace Symbols for class & id name. Supports Find References from CSS to HTML. This is especially helpful when you want to edit a CSS class or id quickly from your template engine(HTML or otherwise).
6. JavaScript REPL – JavaScript REPL is a JavaScript playground for Visual Studio Code with live feedback(logs or errors) as you type, besides your code, in a log explorer, or in an output channel. It supports JavaScript, TypeScript, CoffeeScript, Node.js projects or with front-end frameworks. It allows you to run a code snippet and test your results.
7. GitLens – GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens. Seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and much more.
8. Docs View – VS Code extension that displays hover documentation in your sidebar or panel. It automatically displays documentation for the symbol at the current cursor position. It is language independent. Works in any language that supports hovers. The “Documentation” view shows in the panel by default. Move to other views or the panel just by dragging. It supports syntax highlighting and markdown rendering in the docs view.
9. Comment Anchor – Place anchors within comments or strings to place bookmarks within the context of your code. Anchors can be used to track TODOs, write notes, create foldable sections, or to build a simple navigation making it easier to navigate your files.
Anchors can be viewed for the current file, or throughout the entire workspace, using an easy to use sidebar. Comment Anchors provides many configuration options, allowing you to tailor this extension to your personal workflow, and increase productivity.
10. SQLTools – Database management done right. Connection explorer, query runner, Intellisense, bookmarks, query history. Feel like a database hero! Manage your database without leaving your code editor.
So, these few extension are the best to have when developing for the web, though there are a lot of other extension which you may find best suit your need. Go through the extensions and use what you want. For me, these are the best Visual Studio Code extensions for web development.
