DEV Community

Oscar
Oscar

Posted on • Originally published at Medium

Chrome and VS Code Extensions for Web Developers

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)