Medium
leandroaps.medium.com › setting-up-eslint-and-prettier-in-a-react-project-with-vite-c2ab658dc0e7
Setting Up ESLint and Prettier in a React Project with Vite | by Leandro A. Siqueira | Medium
January 20, 2025 - eslint-config-prettier: Disables ESLint rules that might conflict with Prettier.
Reddit
reddit.com › r/reactjs › how do you guys add prettier to vite reactjs project with typescript? (eslint v9)
r/reactjs on Reddit: How do you guys add prettier to vite reactjs project with typescript? (eslint v9)
October 15, 2024 -
Best way to add prettier to default preset given by vite?
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';
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}
); Top answer 1 of 5
5
The docs are here: https://prettier.io/docs/en/install.html
2 of 5
4
I may be late, but I found the correct solution, as of now. It's described in the typescript-eslint documentation: https://typescript-eslint.io/users/what-about-formatting#suggested-usage---prettier // import eslint from '@eslint/js'; import someOtherConfig from 'eslint-config-other-configuration-that-enables-formatting-rules'; import prettierConfig from 'eslint-config-prettier'; import tseslint from 'typescript-eslint'; export default tseslint.config( eslint.configs.recommended, ...tseslint.configs.recommended, ...someOtherConfig, prettierConfig, ); Just pass prettierConfig as an argument after other plugins to tseslint.config. In my case, I added it even after my custom rules because I want prettierConfig to overwrite (disable) all rules from not only other plugins but also from my own rules, as I trust prettierConfig to handle it instead. import globals from 'globals' import js from '@eslint/js' import tseslint from 'typescript-eslint' import prettier from "eslint-config-prettier"; import importPlugin from 'eslint-plugin-import'; import react from 'eslint-plugin-react' import reactHooks from 'eslint-plugin-react-hooks' import reactRefresh from 'eslint-plugin-react-refresh' import reactQuery from '@tanstack/eslint-plugin-query' export default tseslint.config( { ignores: ['dist'] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended, importPlugin.flatConfigs.recommended, react.configs.flat['jsx-runtime'], ...reactQuery.configs['flat/recommended']], files: ['**/*.{ts,tsx}'], languageOptions: { ecmaVersion: 2020, globals: globals.browser, }, plugins: { 'react-hooks': reactHooks, 'react-refresh': reactRefresh, }, settings: { 'import/resolver': { typescript: { alwaysTryTypes: true, extensions: ['.js', '.jsx', '.ts', '.tsx'], }, }, }, rules: { ...reactHooks.configs.recommended.rules, 'react-refresh/only-export-components': [ 'warn', { allowConstantExport: true }, ], "@tanstack/query/exhaustive-deps": "off", // All my custom rules // }, }, prettier, ) I copied the boilerplate from Vite react-ts eslint config, added react query, plugin import, custom rules and prettier. Feel free to copy bits that work for you. if you're going to check, if it works or not, the easiest way I found is: set Eslint rules for semicolons against your prettier rule. In my prettier.json I have "semi": true. So I added 'semi': ['error', 'never'] rule to my eslint.config.js. Then just run from your CLI eslint, e.g. npx eslint and you should see thousands of errors if the prettier config didn't apply. If it did, no new errors will show. Don't forget to remove the eslint "semi" testing rule afterwards!
Videos
34:33
Set Up Your Own Vite 5.x React + ESLint & Prettier Template - YouTube
ReactJS setup with Vite, ESLint and Prettier | Ultimate guide to ...
How to make your code look like mine (with ESLint + Prettier ...
Vite React App with EsLint & Prettier in VSCode (2023)
DEV Community
dev.to › leon740 › setup-eslint-prettier-husky-with-vite-860
Setup ESLint, Prettier, Husky with Vite - DEV Community
November 15, 2024 - yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-refresh eslint-plugin-import eslint-import-resolver-typescript eslint-plugin-jsx-a11y eslint-config-prettier eslint-plugin-prettier prettier · { "name": "app", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.13.0", "@types/react": "^18
GitHub
github.com › winniesi › vite-eslint
GitHub - winniesi/vite-eslint: My ⚡️Vite configuration, including ESLint, Prettier and Tailwind CSS
Make modifications to .eslintrc.js (if not, create one): { "extends": [ "some-other-config-you-use", "prettier" ] }
Author winniesi
GitHub
github.com › TheSwordBreaker › vite-reactts-eslint-prettier
GitHub - TheSwordBreaker/vite-reactts-eslint-prettier: vite-react-typescript with eslint and prettier predefined settings · GitHub
A starter for React with Typescript with the fast Vite and all static code testing with Eslint and formatting with Prettier.
Author TheSwordBreaker
GitHub
github.com › pappijx › Vite-react-eslint-prettier-husky-setup
GitHub - pappijx/Vite-react-eslint-prettier-husky-setup: Effortlessly Setting up Your React Project with Vite, Husky, TypeScript, and ESLint: A Comprehensive Guide
This blog post provides a step-by-step guide to set up a React project using Vite, Husky, TypeScript, and ESLint.
Starred by 25 users
Forked by 4 users
Languages CSS 51.8% | JavaScript 21.0% | TypeScript 15.0% | HTML 10.5% | Shell 1.7%
Prettier
prettier.io › docs › install
Install · Prettier
Use eslint-config-prettier to make Prettier and ESLint play nice together.
Medium
medium.com › @nedopaka › setup-a-react-vite-project-with-prettier-vitest-2024-12e291669b4b
Setup a React Vite project with Prettier & Vitest [2024] | by Sasha Nedopaka | Medium
February 1, 2024 - Keep in mind, that you should have installed ESLint plugin to make it work. ... Looking on package.json it has come to my attention that there are 2 packages with type declarations, although we do not use TypeScript in our project. Let’s get rid of them with npm rm command. ... Now let’s install Prettier to make our code look nice.
Prettier
prettier.io › docs › integrating-with-linters.html
Integrating with Linters · Prettier
Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in Prettier vs.
GitHub
github.com › eyvindove › vite-react-typescript-eslint-prettier
GitHub - eyvindove/vite-react-typescript-eslint-prettier: A boilerplate for Vite, React, TypeScript, ESLint, Prettier and Vitest.
Starred by 12 users
Forked by 5 users
Languages TypeScript 54.4% | CSS 28.3% | JavaScript 10.7% | HTML 5.6% | Shell 1.0%
Codeomelet
codeomelet.com › posts › react-prettier-eslint-configuration
React Prettier Eslint Configuration | CodeOmelet
If you are following along with CodeOmelet posts, Prettier configuration has already been seen and covered along with Angular, in this Angular Prettier ESLint Configuration article, we will follow the same tone. Previously in React ESLint Configuration, we have seen how to configure ESLint with React Vite app, which will be helpful to continue the inclusion of Prettier as ESLint rule.