15 React Productivity VSCode Extensions (Pack)

15 React Productivity VSCode Extensions (Pack)

Firstly, let me introduce myself. My name is Cem. Currently, I am working as a FullStack Engineer in Berlin. In this article, I will share the VSCode extensions I used for react development and productivity. I hope you can find delicious extensions to use :)

Links

Github: https://github.com/ickarakurt/vscode-react-productivity-pack

Extension Pack: https://marketplace.visualstudio.com/items?itemName=ickarakurt.react-productivity-pack

Auto Close Tag

The extension adds HTML/JSX close tags automatically same as Visual Studio IDE or Sublime Text does.

Auto Rename Tag

Automatically rename paired HTML/JSX tag, same as Visual Studio IDE does.

Better Comments

Improve your code commenting by annotating with alerts, informational, TODOs, and more!

Color Highlight

This extension styles CSS/web colors found in your document.

Docker

The extension adds a Docker menu to the side panel of VsCode. With this menu, you can build, manage, and deploy containerized applications from Visual Studio Code. It also provides one-click debugging for some languages.

DotENV

The extension makes the environment files more readable by using color schema.

ESLint

Integrates ESLint into VS Code. If you are new to ESLint check the documentation.

ES7+ React/Redux/React-Native snippets

Extensions for React, React-Native, and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.

Gitlens

GitLens supercharges Git inside VS Code and unlocks untapped knowledge within each repository. It helps you to visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerful comparison commands, and so much more.

GitHub Copilot

GitHub Copilot is an AI pair programmer which suggests line completions and entire function bodies as you type. GitHub Copilot is powered by the OpenAI Codex AI system, trained on public Internet text and billions of lines of code.

I recently start using Github Copilot. So far, it works really nice.

Indent Rainbow

This extension colorizes the indentation in front of your text, alternating four different colors on each step. This is a really helpful extension to make indentation more visible.

Project Manager

The extension adds a new menu to the side panel of VsCode. You can add your projects and easily switch between projects.

Path Intellisense

The extension autocompletes filenames. It is really useful while you are importing a component.

Prettier — Code Formatter

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Turbo Console Log

By using a simple keyboard shortcut, you can add a console logline in a readable format

In Conclusion:

These extensions are really useful for me. Just give it a try and decide whether you need the extension or not.

--

--

--

Software Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Set & WeakSet in JavaScript

S.O.L.I.D the First 5 Principles of Object-Oriented Design with JavaScript

Test-Driven Development — Develop Faster in the Long Run

Service worker weirdness in Chrome

What is Redux Toolkit?

The Best of 2017 on dormoshe.io

Building Interactable Components with Backbone.js Events

JSX React Basics

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Cem Karakurt

Cem Karakurt

Software Developer

More from Medium

5 hurdles when creating a Spotify app

Introduction to React js

How to build React Chrome Extension in Five steps!

React Routing