DEV Community 👩‍💻👨‍💻

Cover image for Add Linting to Create-React-App
Chris Otto
Chris Otto

Posted on • Originally published at chrisotto.dev on

Add Linting to Create-React-App

Image from Free Illustrations.

Create-React-App gives a nice bootstrapped project. I like being able to lint outside of the build or run process of the application, like on pre-commit hooks with husky. To do that I needed to add linting to my create-react-app. Follow these steps to add linting to your create-react-app project and get linting outside of your build process.

Install packages 📦

This is the most painful part of the process I kept installing one package after another to see if linting worked. All-in-all seven packages later I finally had everything there and ready to run based on the configurations from create-react-app.

npm i --save-dev babel-eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
Enter fullscreen mode Exit fullscreen mode
yarn add --dev babel-eslint eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks
Enter fullscreen mode Exit fullscreen mode

Add ESLint Configuration to package.json

You can either supply this in a separate file (.eslintrc.json/.eslintrc.js) or right in your package.json. For larger configuration changes I would recommend a separate file but I’m just extending the react-app configuration and applying a couple of rule adjustments.

  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "semi": 0,
      "no-console": 0
    }
  },
Enter fullscreen mode Exit fullscreen mode

Add Linting Script

Now, all we need to do is to add the linting script to our package.json and we’ll be able to lint whenever we want. Even hook up husky or add a specific step for linting in our CI/CD pipeline.

  "scripts": {
    ...
    "lint": "node_modules/.bin/eslint --ext js src"
  },
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
dwjohnston profile image
David Johnston

This seems unneccessary. CRA already has eslint installed.
See this answer: stackoverflow.com/a/66438578/1068446

Timeless DEV post...

How to write a kickass README

Arguably the single most important piece of documentation for any open source project is the README. A good README not only informs people what the project does and who it is for but also how they use and contribute to it.

If you write a README without sufficient explanation of what your project does or how people can use it then it pretty much defeats the purpose of being open source as other developers are less likely to engage with or contribute towards it.