Vite, React, Eslint, Vitest, TypeScript project setup

I recorded this cheat sheet for React project setup from this YouTube video, it explains the whole process in detail. But I also added a few settings of my own.

Project directory

Usually I start my project from creating repository at GitHub. After cloning it to your projects directory by “git clone” you will have yourProjectName directory there. Finally you should go to this directory with “cd yourProjectName”. All next steps will start from this place.

Vite + React

Firstly run:

npm create vite@latest

You already have directory, so you type . as Project name, then React and TypeScrypt.

Finally

npm install

Eslint installation

Eslint is already included to the Vite project, but I should configure it.

npm init @eslint/config

Usually I chose:

1. To check syntax, find problems, and enforce code style
2. JavaScript modules (import/export)
3. React
4. Use TypeScript — Yes
5. Browser
6. Use a popular style guide
7. Standard JavaScript

Finally

npm install

Eslint style config [optional]

I like airbnb config.

npx install-peerdeps --dev eslint-config-airbnb

Also we need TypeScript support:

npm install eslint-config-airbnb-typescript

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:

“include”: [“src”, “.eslintrc.cjs”]

Prettier

Install Prettier with command:

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

Add Prettier config file:

/** @type {import("prettier").Config} */
const config = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

export default config;

Add ‘prettier’ to plugins and ‘plugin:prettier/recommended’ to extends to .eslintrc.cjs

  extends: [
    ...
    'plugin:prettier/recommended'
  ],
plugins: ['react', 'prettier'],

Also I usually install lint-staged

npm i -D lint-staged

Vitest, React Testing Library

Insall Vitest:

npm install -D vitest

Edit vite.config.ts like this:

/// <reference types="vitest" />
/// <reference types="vite/client" />
import { defineConfig } from "vite";
import { configDefaults } from "vitest/config";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./testConfig.ts"],
    coverage: {
      provider: "v8",
      exclude: [...configDefaults.coverage.exclude, "*.config.js"],
      all: true,
    },
  },
  plugins: [react()],
  build: {
    target: "esnext",
  },
});

And add file testConfig.ts to src folder:

import matchers from '@testing-library/jest-dom/matchers';
import { expect } from 'vitest';

expect.extend(matchers);

Add tsconfig.node.json file:

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

And add/edit tsconfig.json

  "include": ["src", ".eslintrc.cjs", ".vite.config.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]

React Testing Library

npm install — save-dev @testing-library/react

JestDOM

npm install — save-dev @testing-library/jest-dom

Husky

Husky tool for automatic linting and test run on commit and push.

npm install husky --save-dev
npm pkg set scripts.prepare="husky install"
npm run prepare
npx husky add .husky/pre-push "npx lint-staged"
npx husky add .husky/pre-commit "npm run test"

Also we should add to package.json configuration for husky and lint-staged

  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "test"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": "eslint . --ext ts,tsx --fix",
    "*.{json,js,ts,jsx,tsx,html}": "prettier --write --ignore-unknown"
  }