Sources Contact Advanced Search Tutorials

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

May 25, 2021 10:32 pm GMT

How To Add Prettier and ESLint Automation to a React Codebase

"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-staged only 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 pusheson:  pull_request:  push:    branches:      - masterjobs:  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/[email protected]        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!

Original Link: https://dev.to/swyx/how-to-add-prettier-and-eslint-automation-to-a-react-codebase-2gk1

Share this article:

View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To