Format And Fix All Files With Prettier And ESLint (Recursively)
Tags: javascript, react, webdev, beginners
Published: 2019-09-23 03:48:05

---
title: Format And Fix All Files With Prettier And ESLint (Recursively)
published: true
tags: JavaScript,React,webdev,beginners
canonical_url: https://www.rockyourcode.com/format-and-fix-all-files-with-prettier-and-es-lint-recursively
---

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

Why?  
You would like to make sure that [ESLint analyzes your code for problematic patterns](https://eslint.org/docs/about/).  
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][eslint], [Prettier][prettier] and some helper tools.

```bash
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](https://create-react-app.dev/docs/setting-up-your-editor) ships with ESLint. Installing it separately often leads to problems.

**For React, use:**

```bash
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:

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

For React:

```json
{
  "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][eslintoptions].

### Prettier

Create a `.prettierrc.json` file in your project root directory. You can choose from several [options][prettieroptions].  
These are the ones that work for me:

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

## Configure package.json

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

```json
// ...
  "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?](https://stackoverflow.com/questions/43764210/how-can-i-tell-prettier-to-parse-files-recursively)
- [GitHub Issue - Prettier: add a glob example for how to ignore node_modules #1358](https://github.com/prettier/prettier/issues/1358#issuecomment-355145272)

Now run:

```bash
yarn run format
```

## Optional: Pre-Commit Hook

This setup lends itself well to a [pre-commit hook](https://prettier.io/docs/en/precommit.html). The hook will run before you commit or push your code to a repository.

The easiest way is to use **[husky][husky]**:

```bash
yarn add --dev husky
```

Add the husky configuration to `package.json`:

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

### Links

- [Prettier][prettier] and its [options][prettieroptions]
- [ESLint][eslint] and its [options][eslintoptions]
- [Husky][husky]

[prettier]: https://prettier.io
[eslint]: https://eslint.org/
[eslintoptions]: https://eslint.org/docs/user-guide/configuring
[prettieroptions]: https://prettier.io/docs/en/options.html
[husky]: https://github.com/typicode/husky