To make work easier and boost productivity developers use different VS code and Browser extensions. In this article, I will recommend extensions, that are useful for web developers.

Chrome Extensions

ColorPick Eyedroppe Daily.dev | The Homepage Developers Deserve CSS Peeper Fake Filler Grammarly Open Last Tab SVG Export Speechify Text-to-Speech (TTS) ColorPick Eyedroppe Tool to pick color from website. It gives hex and rgb values.

Daily.dev

To follow the newest developer news. Also, it helps to learn and follow the latest market technologies, best practices, etc.

CSS Peeper

I use this extension to see spaces between elements. Pay attention when working with text spaces. When I work with text spaces I make screenshots and paste them in paint to check spaces. In this case, I can see the space between text elements correctly. Also, it helps to export all images from the website. This extension is better for designers because it allows seeing all colors, fonts, etc. It does not require-dev tools, which makes work easier for better who are not developers.

Fake Filler

Good for productivity. When working with a form to test if validation and authentication work properly, filling every field can take some time. Fake Filler solves this problem.

Grammarly

Makes communication with other team members and report writing easier. Correct grammar mistakes, and improve clarity.

Open Last Tab

When You have a lot of tabs open and want to return to the previous it can take some time. With these extensions, You can boost Your productivity with the key combination - "Alt + Q" on windows.

SVG Export

Download SVGs from websites as SVGs, PNGs, or JPEGs.

Speechify Text-to-Speech

Useful at night, when your eyes are closing and You cannot read. With this extension, You can just listen to information.

VS Code Extensions

Auto Rename Tag - Jun Han ES7+ React/Redux/React-Native snippets - dsznajder SonarLint - SonarSource Live Server - Ritwick Dey Highlight Matching Tag - vincaslt PHP Extension Pack - Xdebug (Optional) Prettier Thunder Client - Ranga Vadhineni Auto Rename Tag Automatically rename paired HTML/XML tag.

ES7+ React/Redux/React-Native snippets

JavaScript and React/Redux snippets in ES7+ with Babel plugin. Must have for react developers. For vue js - Vetur.

SonarLint

SonarLint highlights bugs and security vulnerabilities as you write code, with clear remediation guidance so you can fix them.

Live Server

Do not reload the browser to see Your changes, use Live Server.

PHP Extension Pack

In case You are using PHP programming language for back-end development. Must have for a PHP developer. Adds better debug support and advanced autocompletion.

Prettier

Code formatter. Do not waste Your time on code formatting, let extensions do it.

Thunder Client

Lightweight and simple tool for testing API.

Let me know, what extensions are You using.

I am available on social media: Twitter LinkedIn Instagram

Support me: buymeacoffee.com/oscarWeb