eslint prettier typescript vite

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

The docs are here: https://prettier.io/docs/en/install.html

2 of 5

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!

Medium

medium.com › @nedopaka › setup-a-react-vite-project-with-typescript-prettier-vitest-2024-9bb6e919ac8f

Setup a React Vite project with TypeScript, Prettier & Vitest [2024] | by Sasha Nedopaka | Medium

February 13, 2024 - { "name": "vite-project", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc && vite build", "format": "prettier --write ./src", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", "test": "vitest" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^14.2.1", "@types/react": "^18.2.55", "@types/react-dom": "^18.2.19", "@typescript-eslint/eslint-plugin": "^6.21.0", "@typescript-eslint/parser": "^6.21.0", "@vitejs/plugin-react": "^4.2.1", "eslint": "^8.56.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.5", "jsdom": "^24.0.0", "prettier": "3.2.5", "typescript": "^5.2.2", "vite": "^5.1.0", "vitest": "^1.2.2" } }

Videos

19:43

YouTube

Airbnb ESLint & Prettier Setup With React.js & TypeScript - YouTube

React Typescript #1 Setup with ESLint, Prettier, and Husky Pre-commit ...

November 24, 2023

34:33

YouTube

Set Up Your Own Vite 5.x React + ESLint & Prettier Template - YouTube

September 11, 2023

2.58K

youtube.com

Vite React App with EsLint & Prettier in VSCode (2023)

06:16:27

YouTube

2022-08-31 - Setting up vite + React + TypeScript + eslint + prettier ...

September 6, 2022

54:23

YouTube

Setting up vite, React, TypeScript, eslint, prettier, vitest, ...

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 › 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.

Starred by 462 users

Forked by 154 users

Languages JavaScript 36.1% | TypeScript 32.0% | CSS 25.1% | HTML 6.8%

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.

A boilerplate based on Vite, React, TypeScript, ESLint, Prettier, and Vitest.

Starred by 12 users

Forked by 5 users

DEV Community

dev.to › khalid7487 › configure-eslint-prettier-and-show-eslint-warning-into-running-console-vite-react-typescript-project-pk5

Configure Eslint, Prettier and show eslint warning into running console vite react typescript project - DEV Community

June 8, 2024 - Assuming you already have your React Vite project set up (using npm create vite@latest), the first step is to install Vitest: yarn add eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier eslint-plugin-react-refresh prettier typescript-eslint

Medium

medium.com › @josprima.id › setup-reactjs-typescript-project-with-vite-eslint-and-prettier-2024-e714f7daca1a

Setup ReactJS typescript project with vite, eslint, and prettier 2024 | by Josprima | Medium

August 20, 2024 - Setup ReactJS typescript project with vite, eslint, and prettier 2024 Eslint introduces a new way to configure the file configuration and it’s a bit different from the way we configured the eslint …

Cathalmacdonnacha

cathalmacdonnacha.com › setting-up-eslint-prettier-in-vitejs

Setting up ESLint & Prettier in ViteJS

November 27, 2024 - Let's get started! ... ESLint: Our main linter. Prettier: Our main code formatter. @typescript-eslint/eslint-plugin: An ESLint plugin which provides rules for TypeScript codebases.

GitHub

github.com › shven › vite-vue3-typescript-eslint-prettier

GitHub - shven/vite-vue3-typescript-eslint-prettier

This template should help get you started developing with Vue 3 and TypeScript in Vite.

Starred by 7 users

Forked by 2 users

Find elsewhere

Google Bing Mojeek

DEV Community

dev.to › pappijx › effortlessly-setting-up-your-react-project-with-vite-husky-typescript-and-eslint-a-comprehensive-guide-n5l

Effortlessly Setting up Your React Project with Vite, Husky, TypeScript, and ESLint: A Comprehensive Guide - DEV Community

November 17, 2024 - This blog post provides a step-by-step guide to set up a React project using Vite, Husky, TypeScript, and ESLint. It explains the benefits of each tool and their role in ensuring a smooth and efficient development process. The post includes code snippets and screenshots to illustrate each step of the setup process, making it easy for readers to follow along. To get The full code go to https://github.com/pappijx/Vite-react-eslint-prettier-husky-setup

DEV Community

dev.to › topeogunleye › building-a-modern-react-app-with-vite-eslint-and-prettier-in-vscode-13fj

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

July 30, 2024 - 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.

Medium

mitrich.medium.com › vite-react-eslint-vitest-typescript-project-setup-95f1923bba36

Vite, React, Eslint, Vitest, TypeScript project setup | by mitrich | Medium

January 16, 2024 - Eslint is already included to the Vite project, but I should configure it. ... I like airbnb config. ... And edit .eslintrc.cjs adding “airbnb”, “airbnb-typescript” and “airbnb/hooks” to extends prop, so this what I got: "extends": [ "airbnb", "airbnb-typescript", "airbnb/hooks", "plugin:react/recommended", "standard-with-typescript" ], And add “.eslintrc.cjs” to include prop of tsconfig.json: ... /** @type {import("prettier").Config} */ const config = { trailingComma: "es5", tabWidth: 4, semi: false, singleQuote: true, }; export default config;

Stackademic

blog.stackademic.com › adding-eslint-and-prettier-to-a-vitejs-react-project-84a0752c0fc5

Adding ESLint and Prettier to a ViteJS React project | by Marcos Dias da Conceição | Stackademic

September 23, 2024 - In this post, we will briefly go through the installation and configuration of those two packages in a React project created with ViteJS. ... eslint-config-prettier: an ESLint configuration to disable conflicting rules between ESLint and Prettier.

DEV Community

dev.to › devidev › setting-up-eslint-9130-with-prettier-typescript-vuejs-and-vscode-autosave-autoformat-n0

Vue3 + ESLint 9.13.0 + Prettier +TypeScript and VSCode Autoformat on Save - DEV Community

November 6, 2024 - ESLint 9.13.0 with TypeScript and Vue.js support · Prettier integration for consistent code formatting · Autoformatting on save in VSCode using the Prettier ESLint extension ESLint Flat Config · Subscribe · Visaka Devi · Visaka Devi · Visaka Devi · Follow · Tech · Joined · Nov 6, 2024 • Nov 6 '24 · Copy link · Hide · Vitest update: import vitest from '@vitest/eslint-plugin'; ...vitest.environments.env.globals, For further actions, you may consider blocking this person and/or reporting abuse ·

DEV Community

dev.to › denivladislav › set-up-a-new-react-project-vite-typescript-eslint-prettier-and-pre-commit-hooks-3abn

Set up a new React project: Vite, TypeScript, ESLint, Prettier and pre-commit hooks - DEV Community

May 1, 2025 - Development: Vite + TypeScript Linting & Formatting: ESLint + prettier Pre-commit checks: husky + lint-staged

DEV Community

dev.to › marcosdiasdev › adding-eslint-and-prettier-to-a-vitejs-react-project-2kkj

Adding ESLint and Prettier to a ViteJS React project - DEV Community

March 21, 2023 - @typescript-eslint/parser: a code parser for TypeScript. eslint-config-prettier: an ESLint configuration to disable conflicting rules between ESLint and Prettier.

JavaScript in Plain English

javascript.plainenglish.io › setting-up-a-react-typescript-project-with-vite-eslint-prettier-and-husky-ef7c9dada761

Setting Up a React + TypeScript Project with Vite, ESLint, Prettier, and Husky | by Leandro A. Siqueira | JavaScript in Plain English

June 19, 2025 - Create a React + TypeScript project using Vite. Set up ESLint for code quality. Add Prettier for consistent formatting.

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

terminal> npm create vite@latest √ Project name: ... test-project √ Select a framework: » React √ Select a variant: » TypeScript Scaffolding project in D:\Work\Blogs\test-project...

Starred by 25 users

Forked by 4 users

DEV Community

dev.to › marina_eremina › how-to-set-up-eslint-and-prettier-for-react-app-in-vscode-2025-2341

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

July 8, 2025 - ESLint helps to catch bugs and enforce consistent code quality. Prettier ensures consistent code formatting by automatically applying style rules. ✅ Ensure both extensions are enabled after installation. Use Vite’s react-ts template to start a new project:

Medium

leandroaps.medium.com › building-a-modern-react-app-with-vite-vitest-typescript-eslint-prettier-and-husky-abc7a9876e9d

Building a Modern React App with Vite, Vitest, TypeScript, ESLint, Prettier, and Husky | by Leandro A. Siqueira | Medium

April 30, 2024 - This command will create a new Vite-based React project using TypeScript as the template. Vitest is a testing framework built for Vite. It provides fast, concurrent testing for your application.