How to configure ESLint and Prettier to work together

  • javascript
  • eslint
  • prettier

Let’s face it. Development is hard.

While developers have a multitude of concerns when building software, some of them simply aren’t worth worrying about. In my mind, the enforcement of coding style and convention fall squarely within this category. As Ryan Warner informed me, this is called bike-shedding:

…an observation about the human tendency to devote a great deal of time to unimportant details while crucial matters go unattended.

Luckily, tools like ESLint and Prettier make it easier for developers to enforce their team’s chosen coding standards. While having a bit of overlapping functionality, they’re both aimed at improving different parts of the developer experience. However, configuring them to work together in harmony can be less that straightforward.

ESLint

ESLint helps your team write consistent code in terms of style and syntax by enforcing the rules you define in your project’s my-repo/.eslintrc configuration file. For each rule, you can choose to throw an error, log out a warning or ignore it altogether. Optionally, you can also have ESLint fix these violations based on your preferred configuration.

You can use ESLint in one of two ways: as a CLI or editor extension.

You can use ESLint in a number of ways:

  1. via the CLI
  2. by installing an editor extension
  3. using ESLint with a build tool

The CLI comes in handy because you can lint (and fix) specific files and directories, use it in your pre-commit hooks, or integrate it into your CI/CD pipeline. Extensions, on the other hand, make your life easier when actually writing code by highlighting code blocks that break your preferred rules. In some cases, they can even suggest or fix violations on their own.

ESLint also allows you to extend rule sets, which are distributed as npm packages, from other developers and organizations. Extending a configuration like the one Airbnb’s engineeering team uses or StandardJS is an easy way to get started with ESLint. Over time, if there are rules your team does not like, you can always override them to create a custom configuration.

Prettier

Prettier allows you to automate your team’s code formatting. This is a huge win because it completely eliminates formatting related comments from the review process. Like ESLint, Prettier uses a configuration file (i.e. my-repo/.prettierrc) to define the rules you want to enforce. Here’s an example of what one would look like:

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "requirePragma": true,
  "insertPragma": true,
  "endOfLine": "lf"
}

Prettier also provides two similar tools to ESLint: a CLI and editor extension.

With the CLI, you can programmatically format files and/or directories within your repo. This saves a massive amount of time, especially when transitioning a project over to a new rule set.

The editor extension can be configured to auto-format the file you’re working on when you save it. This ensures all of your commits are going to be properly formatted.

If you’re using VS Code, you can add the following snippet to your user settings and let the robots do all the work! 🤖 If you’re on a Mac, you can open your user settings with the Cmd + , hotkey.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true
}

ESLint && Prettier

When using ESLint and Prettier together, there are a couple packages you’ll want to install in order to help them work well together.

  1. eslint-config-prettier - This disables ESLint’s formatting rules and defers that concern to Prettier.

  2. eslint-plugin-prettier - Using this plugin allows ESLint to check for violations of Prettier rules and throw errors as part of its linting process.

  3. eslint-config-airbnb - Extending this configuration allows you to use Airbnb’s preferred coding style and standards.

With these three packages installed, your .eslintrc would look something like this:

{
  "plugins": ["prettier"],
  "extends": ["airbnb", "airbnb/hooks", "prettier"],
  "rules": {
    // Allow Prettier to throw errors via ESLint
    "prettier/prettier": "error"
  }
}

Conclusion

By taking the time to configure ESLint and Prettier, you can automate away the concerns of formatting and code convention from your day to day work. This not only helps you but your team as well because it reduces cycles in the code review process.

Have a conversation with your team, agree upon a basic set of standards, and create some configuration files. Then, go forth and ship some well formmated code! 🚀