New eslint configurations for the js-stack

Development
1

Hi everyone,

The UI team just updated the eslint configurations to be based on eslint-plugin-patternfly-react.

eslint-plugin-patternfly-react is much more strict when it comes to linting configurations and it is going to help us to catch code issues.

Why we chose patternfly-react linting configurations?

  1. It will catch issues that developers and reviewers usually don’t notice
  2. Most of the people who worked with it (under the patternfly repo) liked at and reported about a good experience (It is not annoying).
  3. It reuses and extends the best linting configurations and plugins (standard, airbnb, prettier).
  4. It can fix most of the errors automatically.
  5. It will help us to achieve code similarity between repositories (if they will adopt it, we already have similarity with patternfly-react itself).
  6. We don’t need to manage and maintain configurations, we rely on a different open-source project for it.

Use it in your terminal:

# run the linter and see all the linter errors
npm run lint

# run the linter and fix errors automatically
npm run lint -- --fix

Use it in your code editor:
I strongly recommend you to install it on your editor so:

  1. You can see the errors live in your code
  2. It will automatically fix errors when you save a file

See video, how it works for me with atom:

To use it with atom you should install linter-eslint and linter packages.

If you want to see the actual rules they bring you can visit:

We do some small overrides here:

Thank you!

2 Likes
2

If it interest you, you can see the process we had to go on in order to fix all the linting issues we have found after we installed the new linting configurations (29 different PRs):
https://github.com/theforeman/foreman/pulls?utf8=✓&q=is%3Apr+is%3Aclosed+%2325217

3

Big plus one to this change, thanks for all of your work on this. :+1:

4

Awesome change! Is this the same for plugins as well or will that take additional work?

5

@John_Mitsch It will take additional work and we should eventually go there (better sooner then later), most of the effort is about fixing all the issues the linter will find.

The first step is installing the linter:

Then fix everything you can fix automatically:

npm run lint -- --fix

Then run npm run lint and fix all the errors manually, most of the errors in foreman was about missing prop-types and default-props for components.

1 Like