Linting and Formatting with ESLint and Prettier

Table of Contents

1. Introduction
2. Why Linting and Formatting Matter
3. What is ESLint?
4. What is Prettier?
5. Installing ESLint in a React Project
6. Configuring ESLint for React
7. Installing and Configuring Prettier
8. Integrating ESLint with Prettier
9. Editor Integration and Auto-Fix
10. Common Rules and Plugins for React Projects
11. Best Practices for Linting and Formatting
12. Conclusion

1. Introduction

Maintaining code quality and consistency is critical in a growing React codebase, especially when multiple developers are involved. Two powerful tools to help with this are ESLint (for linting) and Prettier (for formatting). Together, they help automate code quality checks and enforce style consistency across your project.

2. Why Linting and Formatting Matter

• Consistency: Everyone on the team writes code the same way.
• Readability: Cleaner code is easier to review, debug, and maintain.
• Catch Errors Early: ESLint can flag bugs and bad practices during development.
• Automation: Prettier handles formatting so you don’t have to think about spaces, semicolons, or indentation.

3. What is ESLint?

ESLint is a pluggable and configurable linter tool for identifying and fixing problems in JavaScript and React code. It checks your code against defined rules (e.g., no unused variables, use of strict equality, etc.).

4. What is Prettier?

Prettier is an opinionated code formatter. It automatically formats your code according to a consistent style, which helps avoid debates over code styling in teams.

5. Installing ESLint in a React Project

To get started, you can use the ESLint CLI tool to initialize your configuration.

bashCopyEditnpm install eslint --save-dev
npx eslint --init

During the setup, choose:

• “To check syntax, find problems, and enforce code style”
• “React”
• Your module format (e.g., JavaScript modules)
• Whether you’re using TypeScript or not

This will create a .eslintrc.js or .eslintrc.json config file.

Or directly install ESLint for React:

bashCopyEditnpm install eslint eslint-plugin-react eslint-plugin-react-hooks --save-dev

6. Configuring ESLint for React

A basic ESLint configuration for React might look like:

jsonCopyEdit{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "react-hooks"
  ],
  "rules": {
    "react/prop-types": "off",
    "no-unused-vars": "warn"
  }
}

7. Installing and Configuring Prettier

Install Prettier:

bashCopyEditnpm install --save-dev prettier

Then create a .prettierrc file:

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

Also, create a .prettierignore file to ignore files like node_modules.

8. Integrating ESLint with Prettier

Install plugins that integrate Prettier with ESLint:

bashCopyEditnpm install --save-dev eslint-config-prettier eslint-plugin-prettier

Update your ESLint config:

jsonCopyEdit{
  "extends": [
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ]
}

This allows ESLint to run Prettier as a plugin and report formatting issues as linting errors.

9. Editor Integration and Auto-Fix

Most code editors like VS Code support ESLint and Prettier through extensions:

• Install ESLint and Prettier extensions in VS Code.
• Add workspace settings:

jsonCopyEdit// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Now, ESLint and Prettier will automatically format and fix your code on save.

10. Common Rules and Plugins for React Projects

Some helpful ESLint plugins and rules:

• eslint-plugin-import: Checks for proper import/export usage
• eslint-plugin-jsx-a11y: Accessibility linting for JSX
• eslint-plugin-react-hooks: Ensures correct hook usage
• Useful rules:
  • "react/jsx-uses-react": "off" (for React 17+)
  • "react/react-in-jsx-scope": "off" (for React 17+)
  • "react-hooks/rules-of-hooks": "error"
  • "react-hooks/exhaustive-deps": "warn"

11. Best Practices for Linting and Formatting

• Commit .eslintrc and .prettierrc to version control.
• Run linting in CI pipelines.
• Use husky and lint-staged for pre-commit linting:

bashCopyEditnpx husky-init && npm install
npm install --save-dev lint-staged

Configure lint-staged in package.json:

jsonCopyEdit"lint-staged": {
  "src/**/*.{js,jsx}": [
    "eslint --fix",
    "prettier --write"
  ]
}

12. Conclusion

Linting and formatting are foundational tools in any professional React development setup. ESLint helps you catch bugs and enforce code quality, while Prettier ensures that your code style remains consistent across the entire codebase. With minimal setup, these tools can greatly enhance your team’s productivity and code reliability.