Guide to Setting Up Prettier, Airbnb ESLint, and Husky for Your Next Project
Tags: productivity, design, architecture, javascript
Published: 2024-01-25 12:41:00

### 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](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extension for VSCode.

    - Install prettier with the command below.
    ```bash
    npm install --save-dev prettier
    ```
    - Next, we install the following: 
        - [eslint-config-prettier](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) - This is to disable formatting for ESLint
        - [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) - This allows ESLint to show formatting errors
    ```bash
    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](https://github.com/prettier/prettier#configuration-file)  contains all the necessary information for selecting various configuration keys and values.
    
    ```json
    //.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](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-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*.
    ```bash
    npm install eslint --save-dev
    ```
    - Next, install [Airbnb Config](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) and its dependencies
    ```bash
    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](https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb) and Prettier we installed. Adjust the rules to match your team's coding standards and preferences.


```json
   {
  "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.
    ```bash
    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.
    
```json
// 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.