The Daily Life Of Darth Vader — by Paweł Kadysz (https://pwlk.pl)

Setting Up ESLint, Prettier, and Husky in a TypeScript-based React 18 Project: A Comprehensive Guide — Typescript version

As the React ecosystem evolves, it’s crucial to maintain code quality and consistency in your projects. Linting and code formatting tools like ESLint and Prettier help identify and fix code issues, while Husky enables you to enforce these standards throughout your development workflow. In this article, we will walk you through the step-by-step process of setting up ESLint, Prettier, and Husky in a TypeScript-based React 18 project, ensuring that your codebase remains clean and error-free.

Prerequisites

Before we begin, make sure you have the following prerequisites installed on your development machine:

1. Node.js and npm: Ensure you have Node.js (version 14 or higher) and npm (version 7 or higher) installed.
2. React 18: Set up a new TypeScript-based React 18 project using your preferred method, such as Create React App with TypeScript or any custom setup.

Computadores e Informática | Amazon.com.br

Step 1: Initializing the Project

Let’s start by creating a new TypeScript-based React 18 project. Open your terminal and run the following commands:

npx create-react-app my-ts-react-app --template typescript
cd my-ts-react-app

Replace my-ts-react-app with the desired name for your project.

Step 2: Installing Required Packages

Next, we need to install the necessary packages for ESLint, Prettier, and Husky. Run the following command in your project root directory:

npm install --save-dev eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier eslint-plugin-prettier husky @typescript-eslint/parser @typescript-eslint/eslint-plugin

These packages include:

• eslint: The core ESLint package.
• prettier: The code formatter.
• eslint-plugin-react: ESLint rules for React.
• eslint-plugin-react-hooks: ESLint rules for React Hooks.
• eslint-config-prettier: Disables ESLint rules that conflict with Prettier.
• eslint-plugin-prettier: Integrates Prettier with ESLint.
• husky: Enables Git hooks.
• @typescript-eslint/parser: TypeScript parser for ESLint.
• @typescript-eslint/eslint-plugin: TypeScript-specific ESLint rules.

Step 3: Configuring ESLint

Create an .eslintrc.js file in the root directory of your project with the following configuration:

module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
  plugins: ["react", "react-hooks", "@typescript-eslint"],
  rules: {
    // Define your custom ESLint rules here, if needed.
  },
  settings: {
    react: {
      version: "detect",
    },
  },
};

In this configuration, we specify @typescript-eslint/parser as the parser, enable JSX support, and define environments for browser and ECMAScript 2021. We also extend the recommended ESLint, React, TypeScript, and Prettier configurations and integrate Prettier with ESLint using the plugin:prettier/recommended extension.

Step 4: Configuring Prettier

Create a .prettierrc file in the root directory of your project with your desired Prettier configuration:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2
}

In this example, we configure Prettier to use single quotes, add trailing commas in arrays and objects (except functions), and set the tab width to 2 spaces. Feel free to adjust these settings to match your preferred code style.

Step 5: Setting Up Husky Git Hooks

Husky allows you to set up Git hooks to run ESLint and Prettier before commits. This ensures that your code meets the defined standards before it is committed to the repository. Add the following configuration in your package.json:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.ts": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.tsx": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

This configuration tells Husky to run lint-staged before each commit, which in turn runs ESLint and Prettier on the staged TypeScript and TypeScript JSX files (the files about to be committed).

Step 6: Testing the Configuration

At this point, your ESLint, Prettier, and Husky setup is complete. Restart your development server if it was running, and ESLint and Prettier will now enforce code quality and formatting rules in your TypeScript-based React 18 project.

To see the tools in action, try introducing some code violations, such as unused variables or inconsistent formatting, in your project. When you attempt to commit changes, Husky will prevent the commit if any issues are detected, asking you to fix them first.

Conclusion

By following this comprehensive guide, you have successfully set up ESLint, Prettier, and Husky in your TypeScript-based React 18 project. This powerful combination of tools will help you maintain a consistent and error-free codebase, leading to better collaboration, improved code quality, and more productive development workflows. Happy coding!