A light walkthrough of adding eslint-airbnb and prettier to a create react app.

PurdySetup.MD

Use the follwing steps to setup and use eslint and prettier in a create react app. I've seperated out the eslint and prettier setup so you can see whats needed for both.

1. Create app

npx create-react-app purdier

2. Install eslint deps

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

3. Install linter in editor

Find each in the respective marketplace in the editor.

• Atom: https://github.com/AtomLinter/linter-eslint
• VSCode: https://github.com/Microsoft/vscode-eslint

4. Create .eslintrc

{
  "extends": ["airbnb"],
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ]
  },
  "parser": "babel-eslint"
}

6. See that your project lints nicely now in atom and vscode.

6. Add prettier eslint

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

7. Update eslintrc with prettier config

"extends": ["airbnb", "prettier", "prettier/react"],
"plugins": ["prettier"],

8. Create .prettierrc with empty object

{}

9. Install Atom/Vscode prettier

Find these on the respective marketplace tabs in your editor

• Atom: https://github.com/prettier/prettier-atom
• VSCode: https://github.com/prettier/prettier-vscode

10. Enable autosave

• Atom: Verify auto save checkbox is checked in prettier setttings.
• VSCode: Under settings search for 'formatOnSave', and ensure the option is checked.

11. Try it on an html/css/js!

12. Prettier Everything in your project

Instead of re-formating each file you touch in your project bring it all up to prettier style. This makes it easy to see new changes you make.

• Install prettier cli

npm i -g prettier --dev

prettier --write "src/**/*.js"

13. Format on commit with husky & precise-commit. Ideal for teams.

Ensure nothing is unstyled no matter whos commiting code. This will be ran after every commit.

npm i -D precise-commits husky

Add to your package.json

"husky": {
  "hooks": {
    "pre-commit": "precise-commits"
  }
}

Away you go!