VSCode shortcuts & extensions for Web developer

Install and apply the material icon theme to VS Code to replace default file icons with modern material design icons, creating a visually updated project view.

Install and explore the better comments extension to colorize and organize comments in VSCode. Colorize and differentiate alerts, to-dos, queries, and highlights to improve readability, visualization, and collaboration across languages.

Discover Excalidraw, a VS Code extension that creates hand-drawn style diagrams inside the VS Code editor to visualize ideas, plan docs, and export sketches as images.

Explore the color highlight extension for VSCode that provides instant visual feedback for hexadecimal, RGB, and HSL color values in your code, simplifying color handling in CSS and HTML.

Install the HTML to CSS autocompletion extension to generate automatic class and id suggestions from markup to your stylesheet, speeding up CSS writing.

Explore how the CSS navigation extension lets you jump from HTML or JSX to CSS definitions, and learn to install and use it with command/ctrl clicks across platforms.

Learn to test APIs inside VSCode using the REST Client extension, performing get, post, put, and delete requests against the fake store API with JSON payloads.

Explore the es7 VS Code extension for React, Redux, GraphQL snippets that speed up development by generating functional, class, and arrow function components, exports, and other shortcuts, guided by readme.

Install and use the ERD editor in VSCode to create entity relationship diagrams, define tables and columns in a .ERD file, and plan your database and API data models.

Discover how the Code Spell Checker extension catches spelling mistakes in code, comments, and strings, with custom dictionaries and language settings; see installation, docs, and quick fixes in action.