Hello everyone, following my previous post, “React + Node SSR Basics,” here is the continuation of the topic we reviewed a few days ago.
Today we will not be discussing any code. Instead, we will be talking about something that is fundamental when writing code and without it, there wouldn’t be anything. I am, of course, talking about our code editor, more specifically, VSCode.
This is my definitive collection of VSCode extensions for JavaScript/React development.
All the extensions, completely free and compatible with both Windows and Mac, are available on the extension marketplace for VSCode. You can access them by clicking this icon on VSCode:
General
1. GitLens – Git supercharged
“GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.”
2. Better Comments
Better Comments, as its name suggests, is a simple yet very useful extension for categorizing comments in your code.
3. Bracket Pair Colorizer 2
“This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.”
4. Polacode
Beautiful screenshots for your code.
5. Material Icon Theme
“The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code.”
JavaScript/React
1. ES7 React/Redux/React-Native/JS snippets & JavaScript (ES6) snippets
Both plugins provide a ton of very useful snippets for faster writing. You can choose either, but I recommend using both since some have extension-specific snippets.
Click on the links below for the full list of available snippets:
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
2. glean
“The extension provides refactoring tools for your React codebase: extract JSX into a new component, convert Class Components to Functional Components, and more! In addition, you can extract regular Javascript/Typescript code between files, while handling exporting the selected code from the old location and importing in the new one!”
3. Auto Rename Tag
“Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.”
4. htmltagwrap
“Wraps your selection in HTML tags. Can wrap inline selections and selections that span multiple lines (works with both single selections and multiple selections at once).”
5. Jest Snippets
Simple snippets for Jest. The full list for snippets: https://marketplace.visualstudio.com/items?itemName=andys8.jest-snippets
Themes
Do not forget to add a good-looking theme to your VSCode! There are plenty of them in the marketplace so go check them out!
And there you have it! This is my definitive setup for JS/React development in VSCode. I hope you found it useful and more importantly, helps you get the most out of VSCode when it comes to JS development!
