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.
{,!(node_modules)/**/}
: exclude everything in thenode_modules
directory, and target all files in all directories and subdirectories (via**
)*.{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",
"...": "..."
}
}
}
Top comments (2)
Great post. Note, for people using node 8, this seems to fail.
When running npm run format you will get an error:
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:
Thanks. Useful post