Building a Modern React App with Vite, Vitest, TypeScript, ESLint, Prettier, and Husky

The Daily Life Of Darth Vader by Paweł Kadysz

In the ever-evolving world of web development, staying up-to-date with the latest tools and technologies is essential. This tutorial will guide you through creating a modern React application using some of the most popular tools and libraries available today, including Vite, Vitest, TypeScript, ESLint, Prettier, and Husky.

By the end of this article, you will have a robust development environment that enforces best practices for code quality, testing, and version control.

Computadores e Informática | Amazon.com.br

Prerequisites

Before we get started, make sure you have Node.js and npm (Node Package Manager) installed on your system. If not, you can download them from the official website: Node.js.

Step 1: Setting Up the Project

First, let’s create a new directory for our project and navigate into it:

mkdir react-vite-starter
cd react-vite-starter

Now, we’ll initialize a new Node.js project:

npm init -y

Step 2: Installing Vite

npm install create-vite
npx create-vite@latest my-react-app --template react-ts
cd my-react-app

This command will create a new Vite-based React project using TypeScript as the template.

Step 3: Adding Vitest for Testing

Vitest is a testing framework built for Vite. It provides fast, concurrent testing for your application. To add Vitest, run the following command:

npm install vitest jsdom @testing-library/react @testing-library/jest-dom --save-dev

Edit you scripts inside package

{
  ...
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest",
    "preview": "vite preview"
  },
  ...
}

Step 4: Configuring ESLint and Prettier

ESLint and Prettier help maintain code quality and consistency. Install them along with some required configurations:

npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y eslint-config-prettier eslint-plugin-prettier prettier

Create an ESLint configuration file .eslintrc.js in your project root:

module.exports = {
  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:react-hooks/recommended', 'plugin:jsx-a11y/recommended'],
  plugins: ['react', 'react-hooks', 'jsx-a11y', 'prettier'],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {
    'prettier/prettier': 'error',
  },
};

Create a Prettier configuration file .prettierrc.js in your project root:

module.exports = {
  singleQuote: true,
  semi: true,
  useTabs: false,
  tabWidth: 2,
  trailingComma: 'all',
};

Step 5: Integrating Husky for Git Hooks

Husky allows us to enforce our project’s linting and testing rules with Git hooks. Install Husky and create a pre-commit hook to run ESLint and Vitest before each commit:

npm install --save-dev husky lint-staged

Add the following configuration in your package.json file:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "vitest"
  ]
}

Step 6: Writing a Simple React Component and Test

In the src directory, create a file named App.tsx with the following content:

import React from 'react';

function App() {
  return <div>Hello, React!</div>;
}

export default App;

Now, let’s create a test for this component. In the src directory, create a file named App.test.tsx:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/Hello, React!/i);
  expect(linkElement).toBeInTheDocument();
});

Step 7: Running the Application and Tests

You can start the development server by running:

npm run dev

To run the tests, use:

npm test

Conclusion

In this article, we have set up a modern React application using Vite, Vitest, TypeScript, ESLint, Prettier, and Husky. This stack ensures efficient development, high code quality, and robust testing. As you build your project, remember to adhere to best practices for maintainable and scalable React applications. Happy coding!