Streamline Code Reviews with ESLint + Prettier

A Shotgun Video Episode

Photo: Brandon Bailey — Midnight Cowboy (CC-BY-2.0)

In the latest episode of Shotgun with Eric Elliott, a video series for members of EricElliottJS.com, we walked through the process of setting up ESLint and Prettier to automate the process of syntax checking and code style management for JavaScript projects.

Why are Automated Lint and Code Style Important?

ESLint performs automated scans of your JavaScript files for common syntax and style errors.

Prettier scans your files for style issues and automatically reformats your code to ensure consistent rules are being followed for indentation, spacing, semicolons, single quotes vs double quotes, etc.

We use them on our teams because:

• They keep everybody on the same page, following the same rules.
• They save time in code reviews, because we can safely ignore all style issues, and focus on things that actually matter, like the structure and semantics of our code.
• They catch errors. Prettier, not so much, but ESLint actually catches a lot of syntax errors and simple forms of type errors, such as undefined variables.
• Setting these things up is a one time cost, but the time-saving benefits compound over time.

Configuring Prettier to Work with ESLint

Prettier can be run as a plugin for ESLint, which allows you to lint and format your code with a single command. Anything you can do to simplify your dev process is a win in my book. Prettier + ESLint is a match made in developer heaven.

It’s dangerous to go alone! Take this.

If you’ve ever tried to run Prettier and ESLint together, you may have struggled with conflicting rules. Don’t worry! You’re not on your own. Plug in eslint-config-prettier, and all ESLint’s conflicting style rules will be disabled for you automatically.

If you’re not already using eslint-plugin-react, it can remind you to add PropTypes to your components, and eslint-plugin-react-hooks can help you catch common problems users encounter with the React hooks API. Start by installing all those as devDependencies:

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

Next, you’ll need some configuration files. First, let’s ignore a bunch of stuff we don’t want to lint with .eslintignore:

node_modules
.next

And .prettierignore:

package-lock.json
.next
node_modules/

You’ll need an .eslintrc. Here’s mine:

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "react",
    "react-hooks"
  ],
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2018
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "linebreak-style": ["error", "unix"],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

And a .prettierrc. Here’s mine:

{
  "singleQuote": true
}

Now you just need to add a "lint" script to package.json:

"lint": "eslint --fix . && echo 'Lint complete.'"

I like to echo when it’s done. Otherwise, it’s just silent when there are no errors.

I also add linting to my watch script, like this:

"watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint' src",

If you’ve never used watch, you’ll need to install it before you can use that:

npm install --save-dev watch tap-nirvana

If you’re a Windows user, I recommend using the Linux subsystem for Windows for this stuff. I can’t guarantee all those scripts will work correctly without it.

Try Zeit Now

Disclaimer disclaimer: No need for a disclaimer here. Nobody has offered me anything to say what I’m about to say.

In the video I went on a short tangent about how cool Zeit Now is. Members should watch the video to see the continuous deploy GitHub hooks in action.

Zeit Now is a great hosting service that integrates easily with GitHub to give you end-to-end continuous deployment using serverless technology. Not sure what that means or how to write “serverless” apps? No problem. Just use Next.js and let Next and Now handle all the details for you.

It’s like having the best DevOps team in the world on the payroll — without the cost of hiring full time developers to streamline your continuous delivery process. Zeit is saving us money in hosting and developer hours.

And our apps serve faster than ever thanks to Next’s automatic bundle splitting, server side rendering, and ultra-fast serverless response times, and they even integrate with the Cloudflare CDN to reduce latency to near zero in just about every part of the world.

Key Video Takeaways

• Even when I’m prototyping, I use TDD. When you first start using TDD, it can take 15% — 30% longer to create an initial build-out. With a year or two of experience, writing tests first can actually save you time, because you spend less time changing code, refreshing the page, and walking through workflows to test your UI changes.
• Automated lint and code formatting make developers more productive by catching errors and getting developers on the same page, allowing your team to focus code reviews on topics that are more meaningful and productive.
• Try Zeit Now.
• Hook up a watch script to run while you code to automatically lint and run your unit tests on every file save.

Start your free lesson on EricElliottJS.com

Eric Elliott is the author of the books, “Composing Software” and “Programming JavaScript Applications”. As co-founder of EricElliottJS.com and DevAnywhere.io, he teaches developers essential software development skills. He builds and advises development teams for crypto projects, and has contributed to software experiences for Adobe Systems, Zumba Fitness, The Wall StreetJournal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica, and many more.

He enjoys a remote lifestyle with the most beautiful woman in the world.