Supercharge Your React Development with Vite, ESLint, and Prettier in VSCode

You can find the finished project at https://github.com/topeogunleye/modern-react-app-vite-eslint-prettier.

Boost your React projects by combining Vite’s fast development server, ESLint’s strong linting features, and Prettier’s consistent formatting. With these tools, your VSCode becomes a productivity powerhouse. As you read this article, you’ll learn how to set up Prettier and ESLint to automatically format your files when you save them, maintaining a polished codebase.

Prerequisites

Ensure Node.js and Yarn are installed on your computer. If they’re not already set up, visit the Node.js official website to download and install Node.js, and visit the Yarn official website to download and install Yarn.

Package Versions

• Yarn: 1.22.22
• Node: 20.12.2
• See full package.json on this gist

Step 1: Initializing the Project with Vite

To kick off our project, follow these steps:

1. Create a new project directory and initialize it:

   mkdir my-react-app
   cd my-react-app
   yarn init -y
   

2. Install Vite with the React template:

   yarn create vite my-react-app --template react
   cd my-react-app
   

Step 2: Installing ESLint

ESLint is a powerful tool that statically analyzes your code to identify and fix problems quickly. It integrates seamlessly with most text editors and can be incorporated into your continuous integration pipeline for automated code quality checks.

To install ESLint, run the following command:

yarn create @eslint/config

This command initializes ESLint in your project, guiding you through the configuration process to suit your coding style and requirements. You will see a series of prompts similar to this:

? How would you like to use ESLint? …
  To check syntax only
▸ To check syntax and find problems

? What type of modules does your project use? …
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? …
▸ React
  Vue.js
  None of these

? Does your project use TypeScript? …
▸ No
  Yes

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

? Would you like to install them now? ‣ No / Yes
✔ Would you like to install them now? · Yes

? Which package manager do you want to use? …
▸ npm
  yarn
  pnpm
  bun

Select the appropriate options based on your needs:

• Choose "To check syntax and find problems" for comprehensive code quality checks.
• Select "JavaScript modules (import/export)" if you are using ES6 modules (ESM).
• Choose "React" as your framework.
• Specify whether your project uses TypeScript.
• Indicate where your code runs by selecting "Browser" and/or "Node" as applicable.
• Choose "Yes" to install the required dependencies.
• Select your preferred package manager (e.g., yarn).

This thorough step-by-step setup will configure ESLint to effectively lint your project's code according to your specific requirements.

Step 3: Installing the ESLint Plugin for VSCode

Enhance your coding experience by integrating ESLint into VSCode. Follow these steps:

1. Open VSCode Extensions:

   • Access the Extensions view by clicking the VSCode sidebar’s square icon or pressing Ctrl+Shift+X.

2. Search for ESLint:

   • Type ESLint into the search bar.

3. Install the Plugin:

   • Find the ESLint plugin by Microsoft and click ‘Install’. This will help you maintain code quality and adhere to best practices directly within your editor.

By adding the ESLint plugin to VSCode, you can automatically lint and format your code as you write, ensuring consistency and readability.

Step 4: Setting Up Prettier

1. Install Prettier:

   yarn add --dev prettier
   

2. Create and Configure .prettierrc.json:

   touch .prettierrc.json
   

   Define your formatting preferences within .prettierrc.json. For example, to use single quotes:

   {
     "singleQuote": true
   }
   

Step 5: Sync Prettier & ESLint

To make Prettier and ESLint work together without issues:

1. Install eslint-config-prettier:

   yarn add --dev eslint-config-prettier
   

2. Update .eslintrc.cjs:
   Add eslint-config-prettier to the extends array in your .eslintrc.cjs file to ensure that Prettier’s formatting doesn’t conflict with ESLint rules:

   module.exports = {
     extends: [
       // other configs...
       'prettier'
     ],
     // other settings...
   };
   

3. Check for Conflicts:

   npx eslint-config-prettier ./src/main.jsx
   

   If you see the message "No rules that are unnecessary or conflict with Prettier were found," it means that Prettier and ESLint are properly integrated.

Step 6: Integrating Prettier for Code Formatting

To ensure consistent code style across your project, integrate Prettier by adding a format script to your package.json:

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
  "preview": "vite preview",
  "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css}\""
}

Usage:
Execute the command yarn format to automatically format all files in the src directory, including subdirectories. Prettier will apply formatting rules to TypeScript, JavaScript, JSON, and CSS files, ensuring a uniform coding style throughout your project.

Step 7: Installing the Prettier Plugin for VSCode

To streamline your development workflow, install the Prettier extension for Visual Studio Code. This will allow you to automatically format your code as you write, ensuring consistent style without manual effort.

1. Open VSCode Extensions:

   • Launch Visual Studio Code and navigate to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window, or by pressing Ctrl+Shift+X.

2. Search for Prettier:

   • In the Extensions view, type Prettier-Code Formatter in the search bar. Look for the official extension published by Prettier.

3. Install Extension:

   • Click on the Install button to add the Prettier extension to your Visual Studio Code.

Executing Code Formatting with Prettier

To format your code using Prettier within Visual Studio Code, utilize the Command Palette for quickly accessing all available commands.

1. Open Command Palette:

   • Press Ctrl+Shift+P to open the Command Palette. This shortcut brings up a search bar where you can run various commands.

2. Run Format Document:

   • Type Format Document into the Command Palette’s search bar. Select the command when it appears in the dropdown menu. This action will apply Prettier formatting to your currently open file.

3. Verify Formatting:

   • After executing the command, check your code to ensure that Prettier has formatted it according to your project’s style guide.

Optional Settings: Customizing Prettier Behavior in VSCode

To fine-tune how Prettier formats your code in Visual Studio Code, follow these steps:

1. Set Prettier as Default Formatter:

   • Go to File > Preferences > Settings (or Code > Preferences > Settings on macOS), search for Default Formatter, and select Prettier-Code Formatter from the dropdown menu.

2. Enable Format On Save:

   • Still in Settings, find Format On Save and check the box to have Prettier format your files each time you save.

3. Activate Format On Paste:

   • Look for Format On Paste in the Settings and enable it to format content automatically when you paste it into your document.

Conclusion

Adopting Vite, ESLint, and Prettier in VSCode enhances our development with efficiency and quality. These tools help us maintain and scale projects, keeping us at the forefront of technology. As developers, we must continually evolve with the ever-changing tech landscape, and leveraging tools like Vite, ESLint, and Prettier helps us stay ahead of the curve. Thanks for exploring these tools with me. Happy coding!

You can find the full app setup in this GitHub repository.