Format And Fix All Files With Prettier And ESLint (Recursively)

The problem: You have a bunch of JavaScript and .jsx files that you wish to parse with Prettier and ESLint.

Why?

You would like to make sure that ESLint analyzes your code for problematic patterns.

You would like to have consistent formatting, and don't worry about code style while writing the code.

In this post, I'll show you how to recursively fix and format all your JavaScript files with one command.

Installing the Packages

You'll need to install ESLint, Prettier and some helper tools.

yarn add --dev eslint babel-eslint eslint-config-prettier eslint-plugin-prettier prettier prettier-eslint-cli

If you use Create-React-App, don't install ESLint separately. Create-React-App ships with ESLint. Installing it separately often leads to problems.

For React, use:

yarn add --dev eslint-config-prettier eslint-plugin-prettier eslint-plugin-react prettier prettier-eslint-cli

Configure ESLint and Prettier

ESLint

Create an .eslintrc.json file in your project directory:

{
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "modules": true
    }
  },
  "plugins": ["prettier"],
  "extends": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

For React:

{
  "env": {
    "browser": true,
    "es6": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 8,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  },
  "plugins": ["prettier", "react"],
  "extends": ["prettier", "eslint:recommended", "plugin:react/recommended"],
  "rules": {
    "prettier/prettier": "error"
  },
  "settings": {
    "react": {
      "version": "detetect"
    }
  }
}

You can read more about the configuration options in the ESLint Documentation.

Prettier

Create a .prettierrc.json file in your project root directory. You can choose from several options.

These are the ones that work for me:

{
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true
}

Configure package.json

In your package.json file, add a new script:

// ...
  "scripts": {
    // ...
    "format": "prettier-eslint --write \"{,!(node_modules)/**/}*.{js,jsx}\""
    }
// ...

The --write flag tells the plugin to modify the files themselves. Otherwise, you'd only log the output to your terminal.

The next part is a glob and tells the tool what to parse.

1. {,!(node_modules)/**/}: exclude everything in the node_modules directory, and target all files in all directories and subdirectories (via **)

2. *.{js,jsx}: target all files with the extension .js and .jsx

This setup ignores everything in the node_modules folder and formats every .js and .jsx file in your project.

If you would like to know more about the glob options, you should take a look at these two links:

• How can I tell prettier to parse files recursively?
• GitHub Issue - Prettier: add a glob example for how to ignore node_modules #1358

Now run:

yarn run format

Optional: Pre-Commit Hook

This setup lends itself well to a pre-commit hook. The hook will run before you commit or push your code to a repository.

The easiest way is to use husky:

yarn add --dev husky

Add the husky configuration to package.json:

{
  "husky": {
    "hooks": {
      "pre-push": "yarn run format",
      "...": "..."
    }
  }
}

Links

• Prettier and its options
• ESLint and its options
• Husky