• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Abhishek Tanwar

I build web & mobile experiences

  • HOME
  • BLOG
  • CONTACT ME
  • DISCLAIMER & COPYRIGHTS
You are here: Home / Building Web Apps / Productivity and Quality Extensions for ReactJS in VSCode..

Productivity and Quality Extensions for ReactJS in VSCode..

March 15, 2022 by Abhishek Tanwar

I wrote a post sometime back “My goto VSCode plugins for 2022…” – which included list of extensions for utilities, formatting and themeing. While those helps to code in a personalized and helpful manner, I thought to share few key extensions which I use very often to increase my productivity.

  • ESLint
  • Import Cost
  • npm Intellisense
  • ES7+ React/Redux/React-Native/JS snippets

ESLint

In today’s world of “DevOps” – quality is very important from standard, formatting and guidelines perspective. ESLint has helped me over the years to write good quality code aligned with industry standard guidelines for ReactJS. At the time of writing this post, Airbnb standards are leading and I prefer them too. Of course there are fine tuning to those rules based on the project I am working on but it is very nice start. It has changed by coding style drasitically.

Import Cost

ReactJS application is mostly SPA and sometimes server side rendered. In both the cases, the cost of downloading the bundle needs to be handled either by client or server. Processing is the only expensive commodity over the internet. Your application needs to be as low as possible in the bundle size. Import cost has helped me to keep a tab on the imports and define a strategy to reduce the same. I use it with another utility “BundlePhobia”.

npm Intellisense

Normally, I used to go to “npmjs.org” to search for an import package. With this you can check from VSCode itself and to import the right module from the list of modules you have in an application – which keeps growing and growing.

ES7+ React/Redux/React-Native/JS snippets

This is one of the best extensions which saves me a lot of time. I can guarantee you that you never write ReactJS code without this once you get used to it. You will not believe the number of snippets they have. I insist you try this one time at least.

These are my productivity extensions – How about yours?

Share this:

  • Facebook
  • X

Like this:

Like Loading...

Filed Under: Building Web Apps, Fullstack, Tips & Tricks, VSCode Tagged With: 2022 vscode extensions, amazing vscode extensions, helpful vscode extensions, vscode extensions, vscode productivity extensions

Primary Sidebar

  • Behance
  • Email
  • Facebook
  • GitHub
  • LinkedIn

Popular Posts

How To Integrate React in JSP Application
SaaS, PaaS, IaaS
XQuery highlighting in Notepad++
Standard Design Patterns – Applied to JAVA
XQDT Installation on Eclipse JUNO

Categories

  • Building APIs
  • Building Mobile Apps
  • Building Web Apps
  • Coding Challenges
  • Extensions
  • Fullstack
  • Patterns
  • Tips & Tricks
  • Uncategorized
  • VSCode

Tags

2022 vscode extensions Abstract Factory alienware amazing vscode extensions apple challenges coding coding-challenges Design Patterns dota2 dota2 items dynamic web service call dynamic webservice invocation enterprise integration express flex helpful vscode extensions how to implement mfa in nodejs increasing productivity using vscode integration pattern macro message channel message endpoint message pattern message router message translator messaging mfa offline action processing offline actions in struts pipes and filters PRG in struts react Steam struts System Emulator threads in struts utilities vscode vscode customization vscode extensions vscode productivity extensions xquery xquery 1.0 xquery design principles

Recent Posts

  • 15+ VSCode Extensions To Improve Your Productivity
  • Productivity and Quality Extensions for ReactJS in VSCode..
  • My goto VSCode plugins for 2022…
  • How to enable MFA for your application in Node.JS?
  • Structuring Express Application – How I do it?

Categories

  • Building APIs (8)
  • Building Mobile Apps (1)
  • Building Web Apps (7)
  • Coding Challenges (3)
  • Extensions (1)
  • Fullstack (6)
  • Patterns (8)
  • Tips & Tricks (41)
  • Uncategorized (43)
  • VSCode (2)

Tags

2022 vscode extensions Abstract Factory alienware amazing vscode extensions apple challenges coding coding-challenges Design Patterns dota2 dota2 items dynamic web service call dynamic webservice invocation enterprise integration express flex helpful vscode extensions how to implement mfa in nodejs increasing productivity using vscode integration pattern macro message channel message endpoint message pattern message router message translator messaging mfa offline action processing offline actions in struts pipes and filters PRG in struts react Steam struts System Emulator threads in struts utilities vscode vscode customization vscode extensions vscode productivity extensions xquery xquery 1.0 xquery design principles

Archives

  • August 2023 (1)
  • March 2022 (1)
  • February 2022 (1)
  • November 2020 (1)
  • April 2020 (2)
  • May 2019 (1)
  • April 2019 (1)
  • March 2019 (1)
  • December 2018 (1)
  • July 2018 (4)
  • June 2018 (3)
  • March 2018 (1)
  • May 2016 (1)
  • December 2015 (1)
  • May 2015 (1)
  • April 2015 (2)
  • March 2015 (1)
  • December 2014 (2)
  • November 2014 (2)
  • October 2014 (1)
  • August 2014 (2)
  • July 2014 (1)
  • April 2014 (1)
  • March 2014 (1)
  • February 2014 (2)
  • January 2014 (1)
  • December 2013 (4)
  • November 2013 (4)
  • October 2013 (3)
  • September 2013 (4)
  • August 2013 (2)
  • July 2013 (5)
  • June 2013 (9)
  • May 2013 (6)
  • April 2013 (2)
  • March 2013 (2)
  • January 2013 (1)
  • November 2012 (2)
  • HOME
  • BLOG
  • CONTACT ME
  • DISCLAIMER & COPYRIGHTS

Copyright © 2025

%d