Configuring Development Tools (ESLint, Prettier) in React JS

When working with React JS, using development tools like ESLint and Prettier ensures clean, consistent, and error-free code. ESLint is a linter for identifying problematic patterns in JavaScript code, while Prettier is a code formatter that enforces a consistent code style. This guide explains how to set up and configure these tools in a React application.

Step 1: Install ESLint and Prettier

To get started, install ESLint and Prettier as development dependencies in your React project:

          
              // Install ESLint and Prettier
              npm install eslint prettier --save-dev

Step 2: Configure ESLint

ESLint can be configured by creating an .eslintrc.json file in your project root:

          
              {
                  "env": {
                      "browser": true,
                      "es2021": true
                  },
                  "extends": [
                      "eslint:recommended",
                      "plugin:react/recommended"
                  ],
                  "parserOptions": {
                      "ecmaFeatures": {
                          "jsx": true
                      },
                      "ecmaVersion": 12,
                      "sourceType": "module"
                  },
                  "plugins": [
                      "react"
                  ],
                  "rules": {
                      "react/react-in-jsx-scope": "off"
                  }
              }

Explanation:

  • env: Specifies the environments (browser, Node.js, etc.) in which the code will run.
  • extends: Includes recommended rules from ESLint and React.
  • parserOptions: Configures the JavaScript version and enables JSX parsing.
  • rules: Allows customization of linting rules (e.g., turning off the rule that enforces React in scope).

Step 3: Configure Prettier

Create a .prettierrc file in your project root to configure Prettier:

          
              {
                  "semi": true,
                  "singleQuote": true,
                  "printWidth": 80,
                  "tabWidth": 2
              }

Explanation:

  • semi: Adds semicolons at the end of statements.
  • singleQuote: Uses single quotes for strings.
  • printWidth: Limits line length to 80 characters.
  • tabWidth: Sets the number of spaces per indentation level.

Step 4: Integrate ESLint and Prettier

To integrate ESLint and Prettier, install the following plugins:

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

Update the .eslintrc.json file to include Prettier:

          
              {
                  "extends": [
                      "eslint:recommended",
                      "plugin:react/recommended",
                      "plugin:prettier/recommended"
                  ],
                  "rules": {
                      "prettier/prettier": [
                          "error",
                          {
                              "singleQuote": true,
                              "semi": true
                          }
                      ]
                  }
              }

Explanation:

  • plugin:prettier/recommended: Extends ESLint rules to include Prettier integration.
  • prettier/prettier: Enforces Prettier rules as ESLint errors.

Step 5: Add Scripts to package.json

Add the following scripts to your package.json file:

          
              "scripts": {
                  "lint": "eslint src/**",
                  "format": "prettier --write src/**"
              }

Explanation:

  • lint: Runs ESLint on all files in the src/ folder.
  • format: Formats all files in the src/ folder using Prettier.

Step 6: Example React Code with ESLint and Prettier

Here’s an example of a React component before and after formatting with Prettier:

Before Formatting

          
              import React from 'react';

              function App(){
              return 

              
Hello, World!

              
This is a poorly formatted React component.

              

              }

              export default App;

After Formatting

          
              import React from 'react';

              function App() {
                  return (
                      

                          
Hello, World!

                          
This is a properly formatted React component.

                      

                  );
              }

              export default App;

Conclusion

By configuring ESLint and Prettier in a React project, you can ensure consistent code quality and style. These tools help identify potential issues early and maintain a clean, readable codebase. With proper setup, running linting and formatting becomes seamless and enhances your development workflow.




Advertisement