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?