How to Set Up VS Code for Efficient React and TypeScript Development – Part 1

Recently, I had to set up my development environment from scratch again. The first project I tackled was a React application, so I decided to share this process with you. My favourite editor is Visual Studio Code. I can also use Vim (I’m even planning to try switching—at least temporarily—to NeoVim, and I’ll write about it! 😉). But for now, VS Code remains my go-to editor.

To fully leverage its capabilities in React + TypeScript projects, it’s worth spending some time on proper configuration. A well-configured VS Code will help you write code faster, avoid many errors, and improve project readability and organisation.

In this post, I’ll show you step by step how to customise the editor, which extensions are worth installing, and how to streamline your workflow to make working with React and TypeScript even more enjoyable and efficient.

Ready? Let’s get started!

Installing and Basic
Configuration of VS Code

1. Download and Installation

If you don’t have VS Code yet, download it from the official website and install the appropriate version for your operating system. On Linux, I recommend using the .deb or .rpm packages, and if you’re using Arch Linux, install it via yay -S visual-studio-code-bin.

2. First Launch and Customising the Appearance

After installation, it’s worth customising the editor’s appearance to suit your preferences. My recommendations:

• Colour Theme: Dracula Official, One Dark Pro, or Night Owl
• File Icons: Material Icon Theme

You can find these in the Marketplace (Ctrl + Shift + X, then search for the theme/icon name).

3. Editor Settings (settings.json)

VS Code allows you to customise many aspects of the editor via the settings.json file. To open it:

1. Open the Command Palette (Ctrl + Shift + P).
2. Type “Preferences: Open Settings (JSON)” and select the option.

Here are some useful settings to add:

{
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "afterDelay",
  "typescript.suggestionActions.enabled": true
}
  

This basic configuration automatically formats code on save, sets indentation to 2 spaces, and enables TypeScript suggestions.

Essential Extensions

To maximise your productivity in VS Code, it’s worth using several extensions that not only improve code quality but also speed up your workflow. In this section, I’ll present the most important add-ons that will make working with React and TypeScript more enjoyable, structured, and efficient.

ESLint – Automatic Code Analysis

🔹 ESLint is a must-have tool for every React and TypeScript developer. It helps detect code errors, ensures consistent style, and prevents potential issues before running the application.

How to install?

1. Open Extensions (Ctrl + Shift + X).
2. Search for ESLint and click Install.
3. Add a .eslintrc.json file in the project’s root directory:

Copy

{
    "extends": [
        "eslint:recommended", 
        "plugin:react/recommended", 
        "plugin:@typescript-eslint/recommended"
    ]
}
  

4. Ensure ESLint is working by running this in the terminal:

Copy

npx eslint . --fix

  

Prettier – Code Formatting

🔹 Prettier automatically formats code, improving its readability and maintaining a consistent style throughout the project. It works great with ESLint.

Installation and Configuration:

1. Install the Prettier – Code formatter extension.
2. In the .vscode/settings.json file, add:

Copy

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

  

3. To automatically format TypeScript and JSX files:

Copy

npx prettier --write src/
  

React Developer Tools – Debugging React Components

🔹 React Developer Tools is a must-have for every React developer. It allows you to inspect components and their props in DevTools.

How to Use?

1. After installation, open DevTools in your browser (F12 or Ctrl + Shift + I).
2. You will find a new tab called “Components”, where you can inspect your React component structure.

TypeScript Hero – Enhanced TypeScript Support

🔹 This extension enhances TypeScript support in VS Code by adding features such as:
✔ Automatic imports
✔ Quick navigation to file definitions
✔ Improved IntelliSense suggestions

Installation:

1. Search for TypeScript Hero in the marketplace.
2. Restart VS Code after installation.

Jest / Testing Library – Code Testing

🔹 If you use Jest and Testing Library to test React components, it’s worth installing the following extensions:
✔ Jest – allows running tests directly in the editor
✔ ESLint Plugin for Testing Library – detects errors in tests

Installation:

1. Jest: npm install --save-dev jest @testing-library/react
2. ESLint plugin: npm install --save-dev eslint-plugin-testing-library

Add to .eslintrc.json:

{
  "extends": ["plugin:testing-library/react"]
}
  

Path Intellisense and Auto Import – Faster File Imports

🔹 Path Intellisense helps with file path autocompletion, while Auto Import adds missing imports to your code.

Installation:

1. Install Path Intellisense and Auto Import.
2. In the .vscode/settings.json file, set:

Copy

{
  "typescript.preferences.importModuleSpecifier": "relative"
}
  

Error Lens – Highlighting Errors in Code

🔹 Error Lens immediately highlights errors in the editor instead of hiding them in the problems panel.

Installation:

1. Search for and install Error Lens.
2. In .vscode/settings.json, you can customize the error display:

Copy

{
  "errorLens.enabled": true,
  "errorLens.messageBackgroundMode": "message",
  "errorLens.fontSize": "14pt"
}
  

In the next post, we will go through more steps to configure VS Code for React and TypeScript. 🙂