Guide to Setting Up Prettier, Airbnb ESLint, and Husky for Your Next Project

Introduction

Starting a new project? Readable code with good architecture is essential for ensuring a consistent and clean codebase. In this quick guide, we'll set up three tools – Airbnb ESLint, Prettier, and Husky – a powerful trio that enhances your development workflow and helps maintain code quality.

Configuring Prettier

Prettier is a code formatter that takes the hassle out of maintaining a consistent code style. Its opinionated approach ensures that code looks clean by automatically formatting it according to a predefined set of rules.
Here are steps to setting up ESLint for your project and Airbnb configuration for your next project.

• Installation

  • Download the Prettier extension for VSCode.
  • Install prettier with the command below.

  npm install --save-dev prettier
  

  • Next, we install the following:
    • eslint-config-prettier - This is to disable formatting for ESLint
    • eslint-plugin-prettier - This allows ESLint to show formatting errors

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

  • Now, create a Prettier configuration file - .prettierrc.json or prettier.config.js to specify formatting rules. Prettier Config File contains all the necessary information for selecting various configuration keys and values.

  //.prettierrc.json
  {
    "semi": false,
    "singleQuote": true,
    "tabWidth": 2,
    "useTabs": false,
    "endOfLine": "auto",
    "printWidth": 80,
    "arrowParens": "avoid",
    "proseWrap": "always",
    "htmlWhitespaceSensitivity": "strict",
    "jsxBracketSameLine": false,
    "bracketSpacing": true,
    "insertPragma": false,
    "requirePragma": false,
    "quoteProps": "as-needed",
    "trailingComma": "none",
    "eslintIntegration": true,
    "parser": "babel",
    "jsxSingleQuote": false,
    "vueIndentScriptAndStyle": false,
    "semi": false,
    "tabWidth": 2,
    "singleQuote": true
  }
  
  

  • The final step here is to ensure Prettier formats on save. Insert editor.formatOnSave: true into the user settings in VSCode, so Prettier formats the file before saving.

Setting Up ESLint

ESLint stands out as a guardian of code quality, offering a set of rules to keep the codebase in top shape. It is a pluggable linting utility that aids developers in identifying and rectifying potential errors, enforcing a consistent coding style, and promoting maintainability across projects.

Here are steps to setting up ESLint for your project and Airbnb configuration for your next project.

• Installation

  • Download the ESLint extension for VSCode.
  • Install eslint with the command below - It's worth noting that in frameworks like React and VueJS, eslint comes as default.

  npm install eslint --save-dev
  

  • Next, install Airbnb Config and its dependencies

  npx install-peerdeps --dev eslint-config-airbnb
  

  • Now, create an ESLint configuration file - .eslintrc.json or .eslintrc.js if one wasn't autogenerated. Extend the Airbnb configuration and Prettier we installed. Adjust the rules to match your team's coding standards and preferences.

   {
  "extends": ["airbnb-base", "prettier"],
  "plugins": ["prettier"],
  "parserOptions": {
      "project": "./tsconfig.json"
  },
  "rules": {
      //We can specify more rules that we need here
    "prettier/prettier": ["error"],
    "import/extensions": ["error", "ignorePackages", { "js": "never", "jsx": "never", "ts": "never", "tsx": "never" }]
  }
    }

Implementing Husky for Git Hooks

Husky is a Git hook manager that simplifies the integration of hooks into your project. It ensures that defined tasks, such as code linting and formatting, are executed before certain Git events, like commits.

Having know what Husky is -- Git hooks are scripts triggered at specific points in Git's workflow. They allow developers to automate tasks and enforce consistent processes.

Here are steps to setting up Husky for your project and Airbnb configuration for your next project.

• Installation

  • Install Husky with the command below.

  npm install --save-dev husky
  

  • Next we update the package.json file to include Husky configuration, specifying tasks to be executed before commits. We can also add other forms of task for Husky to perform before we commit like npm test if we have test file in the project.

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}

With Husky in place, your project gains an automated guardrail, preventing code inconsistencies from slipping into your version control history.

Troubleshooting and Customization

Some common issues that may arise during the setup of Airbnb ESLint, Prettier, and Husky includes:

Dependency Conflicts:

• Issue: Conflicts between versions of ESLint, Prettier, or other dependencies.
• Solution: Carefully manage versions in your package.json file, ensuring compatibility among packages.

Configuration Errors:

• Issue: Incorrect ESLint or Prettier configuration leading to unexpected behavior.
• Solution: Double-check configuration files for syntax errors and ensure alignment with project requirements.

All Configs Not Working

• Issue: Even after following all the steps above nothing seems to work?
• Solution: Restart your server and ultimate close and re-open your project folder on your editor

Conclusion

With these tools in place, you've established a foundation for clean code and an efficient workflow architecture. Remember to use them, regularly check your code, and keep iterating to enhance its quality.