Focus on writing code not formatting: Prettier + ESLint

This post was originally published in my Medium blog.

Stop wasting time formatting JavaScript, let your tools handle it automatically.

I confess that I used to be the type of coder who cared about coding standards, maybe a little bit too much. I once debated about semi colons like they’re such a big deal. Thinking back, I feel silly.

The thing is, it doesn’t really matter as long as your team are agreed on common rules, enforcing the same rules and style guides to your code. Preferably this should be automatic so you have less headaches with formatting and more time for actual coding!

Powerful Duo

We’ll use two popular tools to check and format our source code.

• ESLint - is the most popular JavaScript linter which analyses code for common errors, including both non-standard formatting and possible bugs.

• Prettier - is an opinionated code formatter. It supports many languages and integrates with most code editors. You can setup your own rules or just use the default setting without extra configuration.

Both tools come with an auto-fixing feature to fix the formatting of your code.

In this case, we’re going to use Prettier for this feature (eg: max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style ... etc).

This means we’ll only use ESLint’s code quality features. These are the ones which enforce coding (best) practices and aim to reduce bugs and incorrect code (eg: no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors ... etc).

Getting Started

Install Prettier and extensions:

yarn add prettier prettier-eslint prettier-eslint-cli -D

Install eslint-config-prettier (disables formatting for ESLint) and eslint-plugin-prettier (allow ESLint to run Prettier):

yarn add eslint-config-prettier eslint-plugin-prettier -D

Then in .eslintrc.json add the following “extends” array to your configuration, making sure to put it last in the extends array. This makes sure it overrides all other config.

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error"]
  },
}

If you want to setup your own formatting rules, create a .prettierrc file in the root directory of your project. For example:

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "parser": "babel",
  "semi": true
}

That’s it. You are ready to use Prettier and ESLint in your project.

Prettier Bonus Features

• Using within code editors — most code editors have support for Prettier built in. You can make it run every time you save. For example: in WebStorm, press Alt+Shift+Cmd+P to easily format the code on the fly.

• Running as a pre-commit hook — simply add config to package.json:
  

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run prettier"
    }
  }
}

Conclusion

Prettier and ESLint can be adjusted to suit your needs.

They are useful tools to enforce consistent coding standards and styles within a team. They don’t just ease the effort of maintaining the code but also reduce on-boarding processes for any newcomers. Most importantly, they definitely mean less unnecessary meetings to discuss code-formatting and code review comments! More time saved to focus on actual coding.

If you haven’t tried it already, I’d strongly recommend you give it a go!

Enjoy 😃