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:
- Supports JavaScript, TypeScript, CSS, HTML, JSON, and more.
- Customizable rules to match your project's style guide.
- 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:
- Auto-reload on file changes.
- Supports HTML, CSS, JavaScript, and more.
- 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:
- Auto reload on File changes.
- Preview specific elements on hover.
- Supports HTML, CSS, JavaScript.
- 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:
- Autocompletes filenames and directories.
- Supports both relative and absolute paths.
- 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
- Intelligent class name autocompletion.
- Tailwind CSS class linting.
- 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:
- Integrates with your project's ESLint configuration.
- Provides real-time linting feedback.
- 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:
- Inline blame annotations and hovers.
- Powerful diff views and file history.
- Visualize branch and commit history.
Github: Gitlens
Marketplace: Gitlens
8. Live Preview
Similar to Live server, but preview inside VSCode Tab
Key Features
- Automatically refreshes the browser when you make changes to your HTML, CSS, and JavaScript files.
- 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
- HTML id and class attribute completion
- Supports completion from in file defined styles
- Supports specifying remote and local style sheets
- 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.
Top comments (4)
Great writeup!
thanks :)
There are just too many post on the Dev.to about this topic and all of them have same extensions. Just saying.
This was posted a while back, will update when I find somethings more interesting. Try Hover preview for something new.