How to Set Up ESLint and Prettier for React app in VSCode (2025)

#vscode #vite #prettier #react

This tutorial shows how to configure ESLint and Prettier in a React + TypeScript project using Vite and VSCode.

ESLint helps to catch bugs and enforce consistent code quality.
Prettier ensures consistent code formatting by automatically applying style rules.

1. Install ESLint and Prettier extensions in VSCode

✅ Ensure both extensions are enabled after installation.

2. Create a New React + TypeScript Project with Vite

Use Vite’s react-ts template to start a new project:

npm create vite@latest react-lint-setup -- --template react-ts
cd react-lint-setup
npm install

The react-ts Vite template includes ESLint pre-installed and pre-configured by default. You’ll see an eslint.config.js file in the project root directory with a minimal setup.

You can open src/App.tsx file and make a small change to test ESLint, for example, declare a new variable let testVariable = 'test'. Now if you run npm run lint in the console, there should be an error like this:

8:7  error  'testVariable' is never reassigned. Use 'const' instead  prefer-const
8:7  error  'testVariable' is assigned a value but never used        @typescript-eslint/no-unused-vars

VSCode should also highlight the error automatically if the ESLint extension is working correctly.

3. Install Prettier and configure it to work with ESLint

Next, we’ll integrate Prettier into the ESLint workflow to handle code formatting. This will ensure that there are no conflicts between ESLint and Prettier rules.

Run the following commands in the project directory:

// Install Prettier
npm install --save-dev --save-exact prettier

// Install plugins to run Prettier inside ESLint
npm install --save-dev eslint-plugin-prettier eslint-config-prettier

Update eslint.config.js file:

import js from '@eslint/js';
import globals from 'globals';;
import reactHooks from 'eslint-plugin-react-hooks';
import reactRefresh from 'eslint-plugin-react-refresh';
import tseslint from 'typescript-eslint';
// add Prettier support
import prettierConfig from 'eslint-plugin-prettier/recommended'; 
import { globalIgnores } from 'eslint/config';

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs['recommended-latest'],
      reactRefresh.configs.vite,
      prettierConfig, // extend ESLint with Prettier config
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    rules: { // add Prettier rules
      'prettier/prettier': [
        'error', 
        { 
          singleQuote: true,
          printWidth: 100,
          tabWidth: 2,
          semi: true,
          trailingComma: 'es5',
          bracketSpacing: true,
          endOfLine: 'lf'
        }],
    },
  },
]);