DEV Community

Yuya Hirano
Yuya Hirano

Posted on

Recommended VSCode extensions for use with React and TypeScript 

There are a lot of extension in vscode.
I will introduce only five first.

1. TypeScript Importer

Image description

When you type in some code and it will automatically
import the modules in .ts, .js, .tsx, etc.

You should install it definitely at first if you write TypeScript.

2. JavaScript and TypeScript Nightly

Image description

It can enables the nightly build of TypeScript.

What is the nightly build?

A daily build or nightly build is the practice of completing a software build of the latest version of a program, on a daily basis. This is so it can first be compiled to ensure that all required dependencies are present, and possibly tested to show no bugs have been introduced.

3. Move TS - Move TypeScript files and update relative imports

Image description

Extension for moving typescript files and folders and updating relative imports in your workspace.

if you move the file location, then it will change all relative paths automatically.

4. Prettier - Code formatter

Image description

If you normally use vscode, perhaps you already have it installed.
Prettire is a code formatter. It understands your code and formats it according to the rules you set.

5. Auto Rename Tag

Image description

Here is the last one.
When you are writing HTML or JSX in React, have you ever wanted to rename a tag or typoed it?

In such a case, it would be so tedious to modify both the start and the end of each one.

With this extension, you are free to modify only the start and even the end tag.

Conclusion

In this article, we have mainly focused on TypeScript functions and the extensions that we would like to introduce first.
By using VScode extensions, you can dramatically increase your development efficiency.
We hope you will try using them.

Thank you <3

Top comments (0)