Must Have VsCode extensions for Web-developers

Having a good set of extensions for your VSCode would significantly speed up and simplify your web-development process. These tools can enhance your productivity, streamline your workflow, and improve your code quality.

Here are the 10 VS Code extensions every web developer should consider using.

1. Prettier - Code Formatter

This is one of the commonly used extension you can have as a developer, It helps maintain a consistent coding style by formatting your code automatically.

Key Features:

1. Supports JavaScript, TypeScript, CSS, HTML, JSON, and more.
2. Customizable rules to match your project's style guide.
3. Formats code on save.

Github: prettier Vscode
Marketplace: prettier marketplace

2. Live server

A must have extension as a webdeveloper. It quickly launches a local server with live reload feature for static & dynamic pages.

Key Features:

1. Auto-reload on file changes.
2. Supports HTML, CSS, JavaScript, and more.
3. Live preview in your default browser.

Github: livereload Vscode
Marketplace: livereload marketplace

3. Hover preview

Have you ever come across other peoples code and wanted to quickly preview the element without toggling between browser? well this is exactly what hover preview does.

Key Features:

1. Auto reload on File changes.
2. Preview specific elements on hover.
3. Supports HTML, CSS, JavaScript.
4. Configure preview sizes.

Github: Hoverpreview Vscode
Marketplace: hoverpreview marketplace

4. Path Intellisense

Path intellisense provides auto-complete for file-path in your code.

Key Features:

1. Autocompletes filenames and directories.
2. Supports both relative and absolute paths.
3. Works with many languages, including JavaScript, TypeScript, and CSS.

Github: Path intellisense Vscode
Marketplace: Path intellisense

5. Tailwind CSS IntelliSense

Tailwind CSS IntelliSense providies Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting for Tailwind css.

Github: Tailwind css Vscode
Marketplace: Path intellisense

Key Features

1. Intelligent class name autocompletion.
2. Tailwind CSS class linting.
3. Hover preview of Tailwind CSS classes.

6. ESLint

ESLint is a must-have extension for JavaScript developers. It identifies and fixes problematic patterns in your JavaScript code, helping you follow the best practices.

Key Features:

1. Integrates with your project's ESLint configuration.
2. Provides real-time linting feedback.
3. Autofix capabilities for certain rules.

Github: Eslint Vscode
Marketplace: Eslint

7. Gitlens

GitLens supercharges the built-in Git capabilities in VS Code, making it easier to understand code changes and history.

Key Features:

1. Inline blame annotations and hovers.
2. Powerful diff views and file history.
3. Visualize branch and commit history.

Github: Gitlens
Marketplace: Gitlens

8. Live Preview

Similar to Live server, but preview inside VSCode Tab

Key Features

1. Automatically refreshes the browser when you make changes to your HTML, CSS, and JavaScript files.
2. View your changes within the VS Code editor without switching to an external browser.

Github: Live preview Github
Marketplace: Live preview marketplace

9. HTML CSS Support

This extension helps with HTML id and class attribute completion for Visual Studio Code.

Key Features

1. HTML id and class attribute completion
2. Supports completion from in file defined styles
3. Supports specifying remote and local style sheets
4. Supports any language for completion

Github: Html css support Github
Marketplace: Html css marketplace

10. Javascript snippets

This extension comes with lot of time-saving code snippets for JavaScript, in ES6 syntax.

Github: Js snippets
Marketplace: Snippets marketplace

Now Install these and boost your productivity as a webdeveloper 🚀. Oh! and don't forget to comment your favourite extension below.