How to Set up Vite, React, TypeScript, ESLint, Prettier, Vitest, and @testing-library in 2022-08-31

Setting up Vite + React + TypeScript + Eslint + Prettier + Vitest + @Testing-library

In the world of web development, there’s an ever-growing list of tools and frameworks to choose from. With so many options, it can be challenging to decide which ones to use for your project. However, if you’re looking to build a modern web application using popular technologies, combining Vite, React, TypeScript, Eslint, Prettier, Vitest, and @Testing-library is a great choice.

This article will guide you through the setup process for these tools, ensuring that you have a solid foundation for developing your web application.

Firstly, let’s start with Vite. Vite is a build tool that optimizes the development experience for modern JavaScript frameworks like React, Vue, and Angular. It offers lightning-fast hot module reloading, instant server startup, and a streamlined build process. To set up Vite, you’ll need Node.js installed on your machine. Once Node.js is installed, open your terminal and run the following command to create a new Vite project:

“`html
npm init vite@latest
“`

This command will prompt you to select a framework. Choose `react` and then follow the instructions to generate your project.

Next, let’s incorporate TypeScript into our project. TypeScript is a statically typed superset of JavaScript that offers advanced features such as type checking and enhanced code editor support. To add TypeScript to your Vite project, navigate to your project directory in the terminal and run the following command:

“`html
npm install –save-dev typescript @types/react @types/react-dom
“`

This command installs TypeScript as a development dependency and adds the necessary type definition packages for React.

Now, it’s time to integrate Eslint and Prettier into our project to ensure consistent code style and catch potential errors. Eslint is a popular pluggable linting utility for JavaScript, while Prettier is a code formatter that enforces a consistent code style. To install these tools, run the following command:

“`html
npm install –save-dev eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks
“`

Once the installation is complete, create an `.eslintrc` file in your project’s root directory and add the following configuration:

“`html
{
“extends”: [
“plugin:prettier/recommended”,
“plugin:react/recommended”,
“prettier/react”
],
“rules”: {
“react/prop-types”: “off”
},
“plugins”: [“prettier”],
“settings”: {
“react”: {
“version”: “latest”
}
}
}
“`

This configuration extends the recommended rulesets for Prettier and React, while also disabling the `react/prop-types` rule. Additionally, we specify that we’re using the latest version of React.

To enable Eslint and Prettier to format your code automatically, add the following scripts to your `package.json` file:

“`html
“scripts”: {
“format”: “prettier –write “src/**/*.ts” “src/**/*.tsx””,
“lint”: “eslint “src/**/*.ts” “src/**/*.tsx””
}
“`

You can now run `npm run format` and `npm run lint` to format and lint your code respectively.

Moving on, let’s integrate Vitest and @Testing-library into our project for unit testing. Vitest is a test runner specifically built for Vite, and @Testing-library provides a set of utilities for testing React components. To install these tools, run the following command:

“`html
npm install –save-dev vitest @testing-library/react @testing-library/jest-dom
“`

Once the installation is complete, create a `tests` directory in your project’s root directory. Inside the `tests` directory, create a `example.test.js` file and add the following test:

“`html
import { render, screen } from ‘@testing-library/react’;
import ExampleComponent from ‘../src/ExampleComponent’;

test(‘renders ExampleComponent’, () => {
render();
const linkElement = screen.getByText(/example/i);
expect(linkElement).toBeInTheDocument();
});
“`

This test uses the `render` function from @Testing-library to render the `ExampleComponent` and verifies that the component contains the text ‘Example’.

Lastly, add the following scripts to your `package.json` file to run the tests:

“`html
“scripts”: {
“test”: “vitest”
}
“`

You can now run `npm run test` to execute your unit tests.

Congratulations! You’ve successfully set up Vite, React, TypeScript, Eslint, Prettier, Vitest, and @Testing-library. You now have a fantastic foundation for building modern web applications. Happy coding!