Create-react-app: Adding custom ESLint Coding Style Support (airbnb or other)

[gkatsanos]

Hello.

I am aware of https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor and I read some issues here and there but I can't seem to be able to find a concrete solution to that.

Just to summarize, and for people who're looking this into the future: As it stands, the only way to be able to use a custom/different JS Coding standard configuration for ESLint is to eject? I saw the extends: "react-app" thingy, but I'd like to use extends: "airbnb" . That's not possible right?

[Timer]

The only way to get the CLI tool to use your changes is to eject, yes.
Any changes you make to the configuration will show up in your editor, however.

Let me know if you have any other questions.

[gkatsanos]

Could you elaborate :

Any changes you make to the configuration will show up in your editor, however

.?

[Timer]

If you create an .eslintrc in the root of your application directory and enable ESLint integration within your editor, your editor will show any ESLint problems. CRA does not prevent this in any form. Additionally, you can even run linting yourself if you so choose (using your global install).

The "no configuration" of linting only applies to npm start.

[gkatsanos]

Hm, when I added a eslint Npm command in package.json and run it, I got
several errors for missing components of eslint..

On 5 May 2017 7:32 PM, "Joe Haddad" [e-mail] wrote:

If you create an .eslintrc in the root of your application directory and
enable ESLint integration within your editor, your editor will show any
ESLint problems. CRA does not prevent this in any form. Additionally, you
can even run linting yourself if you so choose.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/facebookincubator/create-react-app/issues/2087#issuecomment-299527068,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABr9gslhftMd7OGRZKtwu6na_IiggGujks5r210zgaJpZM4NSL2v
.

[Timer]

Configuring and using ESLint might be a better question for StackOverflow or the ESLint repo itself, if you have a simple question and can provide some context, we may be able to help.

[gaearon]

As it stands, the only way to be able to use a custom/different JS Coding standard configuration for ESLint is to eject?

Just to be clear—we are not enforcing any style rules (except for a few cases we’ll fix). We only use ESLint for actual mistakes in the code.

If you want to enforce style, I recommend Prettier. It formats the code automatically so you don’t need to ever think about the style again.

[gkatsanos]

Thanks @gaearon , I read the Readme and the related tickets. I attempted going through the Prettier setup but there were no clear instructions on how to use with CRA and in combination with the Airbnb styleguide. Also I realized Prettier is a formatter which isn't really what we need? For us enforcing a style guide is a way for junior devs to pick up the right habits for the language and avoid any accidental problems because of that. I guess the only choice is to eject

[gkatsanos]

@Timer the global install partially works although I get a lot of these:
Error 1,1: Definition for rule 'jsx-a11y/img-has-alt' was not found (jsx-a11y/img-has-alt) I suspect that's because of a conflicting local package under the react-scripts hood?
in general I'm afraid a global build of ESLint could be problematic as there are often conflicts between the local and the global packages (for example for other projects running on the same machine and which are using the local setup).
Sublime doesn't seem to have a built-in ESLint thing to check files, it has a package that runs the actual global Eslint command via a terminal so.. same problem..
PS: I've setup ESLint on other non-CRA projects successfully, I think I'm quite familiar with the process so that's probably a case-specific issue..

[gkatsanos]

follow-up : it seems to work with the global setup , but I do get a repeating error: Definition for rule 'jsx-a11y/img-has-alt' was not found (jsx-a11y/img-has-alt) in all files..

[luftywiranda13]

@gkatsanos it's because of the latest breaking updates from eslint-plugin-jsx-a11y. not because how eslint implemented in CRA.

eslint-config-airbnb depends on eslint-plugin-jsx-a11y it but they haven't update it. the rule img-has-alt has been renamed to alt-text.

https://github.com/evcohen/eslint-plugin-jsx-a11y/pull/220

i strongly believe that you didn't follow eslint-config-airbnb installation instruction and you updated some of eslint plugins by yourself.

the temporarry workaround is you can turn off that specific rule by adding jsx-a11y/img-has-alt: off in rules.
or you can uninstall all eslint plugin/config then start to install eslint-config-airbnb based on how it's instructed in https://www.npmjs.com/package/eslint-config-airbnb

[gkatsanos]

@luftywiranda13 correct, following the instructions over at npmjs gives a cleaner setup. We still ejected though, I don't know if that was unnecessary or not anymore :/

[gaearon]

We still ejected though, I don't know if that was unnecessary or not anymore :/

If you do this in a separate commit, you can always revert it later and try again when you have time.

Also I realized Prettier is a formatter which isn't really what we need? For us enforcing a style guide is a way for junior devs to pick up the right habits for the language and avoid any accidental problems because of that

Are we talking about style or code issues?

By “style” I mean things like semicolons, or whether you put spaces before parens in function definition. I don’t agree that forcing beginners to conform to a specific style teaches them anything about the language. In my opinion, if you want to the code to be formatted consistently, Prettier is the solution.

If by “style” you mean other lint rules that actually check for correctness (e.g. unused variables, accidentally unused expressions, etc), we already include those in our default preset. So I’m not sure what exactly Airbnb style guide would give you in this case.

Are there particular correctness rules you are missing? Raise an issue and let’s discuss them specifically.

[gkatsanos]

@gaearon from the top of my head some of the things we got notified about when switching to airbnb (some actually were part of eslint-plugin-react) were :

• missing prop type validation
• order of imports (global/local)
• trailing commas
• using stateful components instead of functional where necessary

there were a couple more but I can't remember..

[gaearon]

Thanks for feedback!
I agree we probably won’t add these things since they’re a bit too opinionated.

Except:

trailing commas

Prettier does this.

using stateful components instead of functional where necessary

Personally I disagree that this is a great rule. Converting components back and forth just when you need to add state or lifecycle is cumbersome, and many people choose to just use classes when they’re not sure yet.

[gkatsanos]

I take those suggestions seriously naturally :) We're a small group of 3 devs who are building skills, I'm trying to mentor the other 2 who have less experience with React/JS in general and I thought following to the letter most of these rules is going to help us get into the right habits..
But yes I already realized that Converting components depending on if you need to use hooks or declare methods isn't super smart.
But I must say I'm very relieved by stateless components as last time I tried React (and they were less popular) the syntax seemed a bit weird (especially from someone coming from Vue)

[gaearon]

You can totally use them—just saying I probably wouldn’t enforce it.

[Chris-Petty]

I think that if custom eslint rules can be communicated in editor then that is perfect. CRA rules catch potential coding errors in the app, while code editors can just hint more opinionated rules.