DEV Community

Sophia Brandt
Sophia Brandt

Posted on • Originally published at rockyourcode.com on

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

Configure package.json

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

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

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:

Now run:

yarn run format
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Add the husky configuration to package.json:

{
  "husky": {
    "hooks": {
      "pre-push": "yarn run format",
      "...": "..."
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Links

Top comments (2)

Collapse
 
inspiraller profile image
steve

Great post. Note, for people using node 8, this seems to fail.
When running npm run format you will get an error:

assertion error - 'basePath' should be an absolute path

The above installs eslint@6.7.2 which adds an extra file into myapp\node_modules\eslint\lib\cli-engine\config-array\ignore-patterns.js

Solution:

npm i eslint@6.4.0 --save-dev
Collapse
 
fattylee profile image
Fattylee

Thanks. Useful post