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:
-
Create a new project directory and initialize it:
mkdir my-react-app cd my-react-app yarn init -y
-
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:
-
Open VSCode Extensions:
- Access the Extensions view by clicking the VSCode sidebar’s square icon or pressing
Ctrl+Shift+X
.
- Access the Extensions view by clicking the VSCode sidebar’s square icon or pressing
-
Search for ESLint:
- Type
ESLint
into the search bar.
- Type
-
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
-
Install Prettier:
yarn add --dev prettier
-
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:
-
Install
eslint-config-prettier
:
yarn add --dev eslint-config-prettier
-
Update
.eslintrc.cjs
:
Addeslint-config-prettier
to theextends
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... };
-
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.
-
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
.
- 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
-
Search for Prettier:
- In the Extensions view, type
Prettier-Code Formatter
in the search bar. Look for the official extension published by Prettier.
- In the Extensions view, type
-
Install Extension:
- Click on the
Install
button to add the Prettier extension to your Visual Studio Code.
- Click on the
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.
-
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.
- Press
-
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.
- Type
-
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:
-
Set Prettier as Default Formatter:
- Go to
File > Preferences > Settings
(orCode > Preferences > Settings
on macOS), search forDefault Formatter
, and selectPrettier-Code Formatter
from the dropdown menu.
- Go to
-
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.
- Still in Settings, find
-
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.
- Look for
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.
Top comments (2)
Another USELESS guide. Completely skips initializing eslint. No version information provided, so you have no idea if you are installing the same version. I tried following this guide and the eslint -init command creates a eslint.config.mjs file which is completely different from this guide. Why even bother writing a guide if it doesn't actually work? Like did you try doing this yourself before you wrote it? How hard is it to publish the versions of the packages you are using so we can ACTUALLY FOLLOW ALONG. This is so frustrating. I hate how inconsistent this ecosystem is.
Hi @jeffrey_tillwick_7b698772, thank you for your message. please kindly check the updated guide.