This content originally appeared on DEV Community and was authored by swyx
"Civilization advances by extending the number of important operations which we can perform without thinking about them." — Alfred North Whitehead
I've just implemented Prettier + ESLint on my React codebase at work and figured I'd better share my notes in case others need to figure this out.
My setup includes:
- See lint violations inline in VSCode
- Prettify after PR merge with GitHub actions
- Prettify before git commit (some folks dislike this)
- Ability to manually run checks locally
Even if you use TypeScript, you'll want BOTH Prettier and ESLint in your codebase. Prettier sometimes breaks your code and ESLint checks things that Prettier doesn't. For historical reasons, this codebase doesn't use TypeScript, don't @ me, my love for TypeScript is well documented.
Step 1: Dependencies
yarn add -D eslint eslint-plugin-react husky lint-staged prettier
as of time of writing these are the versions I am working with:
{
"devDependencies": {
"eslint": "^7.27.0",
"eslint-plugin-react": "^7.23.2",
"husky": "^6.0.0",
"lint-staged": "^11.0.0",
"prettier": "^2.3.0"
}
}
Step 2: Scripts
add stuff to package.json...
{
"scripts": {
"format": "prettier --write .",
"prepare": "husky install"
},
"lint-staged": {
"**/*": "prettier --write --ignore-unknown"
},
}
You can now run npm run format to prettify your existing codebase as a oneoff.
In case you were wondering:
- Husky adds a git commit hook so that...
-
Lint-stagedonly runs Prettier on new stuff that you stage in git
Step 3: Prettier Settings
Commence bikeshedding! Use the Prettier Playground to decide on what settings your team wants.
Put this in .prettierrc.json
{
"arrowParens": "always",
"bracketSpacing": false,
"embeddedLanguageFormatting": "auto",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "es5",
"useTabs": false,
}
Step 4: ESLint
You know you gotta...
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/prop-types": [0, {}], // this is dumb, why is this still recommended
"react/no-unescaped-entities": [0, {}],
"no-unused-vars": [1, {}],
}
};
Recommended: also enable the ESLint VSCode plugin to see the eslint feedback in your editor!!!
Step 5: Automate
We'll just add a nifty little GitHub Action in .github/workflows/autoformat.yml:
name: Continuous Integration
# This action works with pull requests and pushes
on:
pull_request:
push:
branches:
- master
jobs:
prettier:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
with:
# Make sure the actual branch is checked out when running on pull requests
ref: ${{ github.head_ref }}
- name: Prettify code
uses: creyD/prettier_action@v3.3
with:
# This part is also where you can pass other options, for example:
prettier_options: --write **/*.{js,md}
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
That's it!
This content originally appeared on DEV Community and was authored by swyx
swyx | Sciencx (2021-05-25T22:32:58+00:00) How To Add Prettier and ESLint Automation to a React Codebase. Retrieved from https://www.scien.cx/2021/05/25/how-to-add-prettier-and-eslint-automation-to-a-react-codebase/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.