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:
https://www.buymeacoffee.com/oscarWeb
Top comments (0)