Keep your code clean with ESLint, prettier, pre-commit and pre-push hooks using husky, lint-staged, and pretty-quick

Keeping your code clean and consistent is important in any software development project.

This is especially true for React apps, where code can become complex and difficult to maintain over time. One way to ensure that your code is clean and consistent is to use a set of tools that automate the process of checking and fixing code.

In this post, we will look at how to use ESLint, Prettier, pre-commit, and pre-push hooks in a React app using Husky, lint-staged, and pretty-quick. These tools will help you maintain code quality and consistency throughout your development process.

First, let's start by installing the required packages. Run the following command in your terminal:

npm install eslint prettier husky lint-staged pretty-quick --save-dev

Next, you need to configure ESLint and Prettier. You can either create a .eslintrc and .prettierrc file in the root of your project or use the default configuration by running the following command:

npx eslint --init
npx prettier --write .

Now, it's time to set up Husky and lint-staged.
Pre-commit and pre-push hooks are used to run scripts before you commit changes to your Git repository or before you push changes to a remote repository. You can use husky, lint-staged, and pretty-quick to configure these hooks in your project.

To set up Husky and lint-staged, you'll add the following code to your package.json file:

"husky": {
  "hooks": {
    "pre-commit": "lint-staged",
    "pre-push": "npm test"
  }
},
"lint-staged": {
  "*.{js,jsx}": [
    "pretty-quick --staged",
    "eslint --fix",
    "git add"
  ]
}

This configuration runs lint-staged on the pre-commit hook and npm test on the pre-push hook. Lint-staged runs Prettier and ESLint on all staged .js and .jsx files and fixes any issues. This way, every time you run git commit, lint-staged will run pretty-quick to format your code and eslint to fix any linting errors. And, every time you run git push, npm test will run to make sure your code passes all tests.

The following is an example of what your package.json file might look like after setting up the tools and hooks:

{
  "name": "your-project-name",
  "version": "1.0.0",
  "scripts": {
    "lint": "eslint src",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "eslint": "^7.16.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.22.0",
    "husky": "^4.3.0",
    "lint-staged": "^11.0.0",
    "prettier": "^2.1.2",
    "pretty-quick": "^3.0.2"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "npm test"
    }
  },
  "lint-staged": {
    "src/**/*.{js,jsx}": [
      "pretty-quick --staged",
      "eslint --fix"
    ]
  }
}

Additionally, by using pre-commit and pre-push hooks, you can ensure that only well-formed and error-free code is committed to your repository and pushed to the remote server. This helps to avoid conflicts with other team members, as well as ensures that the code is always up-to-date and easy to maintain.

It's also important to note that these tools are customizable, and you can fine-tune the configuration to fit your specific needs and preferences. You can adjust the rules used by ESLint and Prettier, as well as the scripts run by the pre-commit and pre-push hooks, to suit your project's requirements.

In summary, using a set of tools like ESLint, Prettier, pre-commit, and pre-push hooks can greatly improve the quality and maintainability of your React code. By automating the process of checking and fixing code, you can focus on the more important aspects of your project and avoid potential roadblocks down the line

Links: