Supercharge Your Vite

28. October, 2023 • 4 min read • Learn

Boosting Vite with ESLint, Prettier and Jest

In my previous article, I covered the process of migrating from react-scripts to Vite.

While Vite offers significant benefits, there are some missing elements we need to address to make the transition complete. We’ll focus on adding essential tools like ESLint, Prettier, and Jest to enhance our development environment.

Adding ESLint for Code Quality

ESLint is a powerful tool for maintaining code quality and consistency in your projects.

Begin by installing the Vite plugin:

npm install vite-plugin-eslint --save-dev

To enable ESLint in your Vite project, you need to import and configure the plugin in your vite.config.js:

import eslint from 'vite-plugin-eslint';

export default {
  // ...
  plugins: [react(), eslint()],
};

Next, you need to install ESLint itself:

npm install eslint --save-dev

Run the following command to initialize your ESLint configuration: npm init @eslint/config, and follow the configuration steps.

Here is what my .eslintrc.js looks like after some tweaking:

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'standard-with-typescript',
    'plugin:react/recommended',
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: ['.eslintrc.{js,cjs}'],
      parserOptions: {
        sourceType: 'script',
      },
    },
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    '@typescript-eslint/semi': 'off',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

Optionally, for better code formatting, you can also integrate Prettier with ESLint. Run the following command: npm init prettier and follow the configuration steps.

Here is what my .prettierrc.yaml file looks like after some tweaking:

printWidth: 80
tabWidth: 2
useTabs: false
semi: true
singleQuote: true
trailingComma: none
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: avoid

Following these steps, you’ve successfully integrated ESLint with your Vite project. Your code will now be automatically checked for code quality and style adherence.

Testing with Jest

Jest is a popular JavaScript testing framework, and integrating it with Vite is straightforward.

First, lets install Jest, ts-jest, @types/jest, and jest-environment-jsdom:

npm install jest ts-jest @types/jest jest-environment-jsdom --save-dev

Next, we need to create a Jest configuration file. Run touch jest.config.js and add the following content:

/** @type {import('ts-jest').JestConfigWithTsJest} */

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>src/setupTests.ts'],
  moduleDirectories: ['node_modules', 'src'],
  moduleNameMapper: {
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
      '<rootDir>/src/setupTests.ts',
    '\\.(css|less)$': '<rootDir>/src/setupTests.ts',
  },
};

If you want to start from scratch run npx ts-jest config:init instead.

With Jest set-up, you can quickly write and run tests through Vite. I’ll add the finished package.json at the end with all the new “scripts” commands.

Some Cleanup and Upgrades

To enhance your Vite project further, consider the following clean-up and upgrade steps:

Install ‘browserslist-to-esbuild’: To optimize your build process, install ‘browserslist-to-esbuild’ as a development dependency: npm install browserslist-to-esbuild --save-dev
Uninstall ‘web-vitals’: Remove ‘web-vitals’ if you no longer need it in your project.
Periodically run the following commands to keep your project dependencies up to date: npx npm-check-updates && ncu -u

These steps will ensure that your Vite project remains well-maintained and up-to-date.

Finally, my finished vite.config.ts and package.json files:

// vite.config.ts
import { defineConfig } from 'vite';

import react from '@vitejs/plugin-react';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgrPlugin from 'vite-plugin-svgr';
import eslint from 'vite-plugin-eslint';
import browserslistToEsbuild from 'browserslist-to-esbuild';

// see more at https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), viteTsconfigPaths(), svgrPlugin(), eslint()],
  build: {
    target: browserslistToEsbuild(),
  },
});

// package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@vitejs/plugin-react": "^4.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.2.2",
    "vite": "^4.5.0",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-svgr": "^4.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview",
    "lint": "eslint src/**/*.{ts,tsx}",
    "test": "jest"
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^6.1.4",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.5.1",
    "@types/jest": "^29.5.6",
    "@types/node": "^20.8.9",
    "@types/react": "^18.2.33",
    "@types/react-dom": "^18.2.14",
    "@typescript-eslint/eslint-plugin": "^6.9.0",
    "browserslist-to-esbuild": "^1.2.0",
    "eslint": "^8.52.0",
    "eslint-config-standard-with-typescript": "^39.1.1",
    "eslint-plugin-import": "^2.29.0",
    "eslint-plugin-n": "^16.2.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.33.2",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "ts-jest": "^29.1.1"
  }
}

Wrapping Up

In this article, we’ve addressed some crucial aspects of migrating from React-Scripts to Vite. By adding ESLint, Prettier, and Jest and optimizing your project’s dependencies, you can enjoy a more efficient and streamlined development experience. Embrace these tools, and your Vite project will be better equipped to handle complex tasks easily.

Remember, the migration process is not dead; it’s an ongoing journey of improvement and adaptation. So, keep exploring and optimizing your Vite projects, and until next time, happy coding!

‘Till next time!