What extensions do you use on VS Code for react development

Ok, it is one of those days, PHPStorm is sucking up everything I have on my computer. Literally I7 laptop acts like a spaceX shuttle. I need to get rid of it but last 3 attempts to use VS Code was not pleasant. No matter what extensions I added, still didn't feel like phpstorm. Couldn't find anything will give the same pleasure of intellisense. So if there is someone out there been in the same boat, can you tell me what plugins/extensions etc you added to make it easier to use VSCode for react development. Here are some stuff I love about PhpStorm that would like to have in VSCode to make my life easier.

Intellisense : Incredible code completion
Eslint integration: Immediate code review while typing.
webpack support
docker support
debug support from docker containers
low memory and cpu consumption
TODO/FIXME collection : can review all todo or fixme comments at once organized by file directory
auto import, support for absolute or relative paths. Something I couldn't figure out on vscode. it doesn't have autocompletion for named modules
AutoFix. In phpstorm, I can do CTRL+ALT+L to reformat and apply code style right away. so it will fix any indentation, spacing, trailing comma etc issues at once. 10 last but not least ecmascript support. 11 live file templates and code templates. for instance i can create a template for my common react components ( with redux, functional, class, withStyles etc ) and with a small piece of characters will create the code for me to speed up development. ie msp will create
```
const mapStateToProps = (state, ownProps) = ({
   :
});
```
and cursor will be waiting before colon to add first prop.

Responses(4)

Disha T

Web Developer

Jul 26, 2019

Hi I graduated as an electronics engineer sand now I work as Web Developer. I think the best way to learn is through working on simple projects.

I also have my own YouTube channel where I create simple projects to learn more into programming. Check it out here - youtube.com/channel/UCtHEWTpi4_DCKzhOgeYUwug

I have also shared my story here - hashnode.com/post/my-journey-from-electroni..

Thank you :) Disha

Hey Disha, Thanks for the reply. My question is actually about getting used to VSCode. I have been in the industry as a senior developer for over 18 years so learning programming part is little in the past in my case :) but thanks for sharing. I am pretty sure it will help someone about to get their feet wet about programming.

It really depends on your preferences which extensions to get and which settings to make. Vscode is a super customizable code editor and if you want to feel really comfortable with it, you should invest some time into personalizing it and make it fit your flow.

There are mutliple code snippet extensions for react out there, but I personally prefer to create my own snippets with: snippet-generator.app Then clicking on the settings wheel, you can go to user snippets and insert them.
To auto-format your code, just go to settings and search for Format on save . I would also suggest to install the prettier extension
For the todo thing, just search for TODO and you will find many extensions which do the same.
You have a docker extension and an eslint extension, just search for them

-Another extension I can recommend is Bracket Pair Colorizer 2

I also really like the Material Icon Theme and One Dark Pro Theme. I would search for a theme which you like best

-Then there is Gitlens, which is super helpful to manage your git history, most of the time I use it to check out an old state of a file

To sum up, usually there is an extension for everything you need/want and vscode has very good autocompletion already built-in

Thread

What extensions do you use on VS Code for react development

Responses(4)

Recent threads

Search Hashnode

What extensions do you use on VS Code for react development

Responses(4)

Recent threads