Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added react-scripts lint #2729

Closed
wants to merge 1 commit into from
Closed

added react-scripts lint #2729

wants to merge 1 commit into from

Conversation

devonjs
Copy link

@devonjs devonjs commented Jul 6, 2017

Added react-script for linting with specifications in #1217 & #2625

@facebook-github-bot
Copy link

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

@facebook-github-bot
Copy link

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

Copy link
Contributor

@gaearon gaearon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comments above.

It would also be great to add a step verifying react-scripts lint works before and after ejecting as part of "simple" end-to-end test.

spawn.sync(
'node',
[
'node_modules/eslint/bin/eslint.js',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would prefer that we use require.resolve here rather than hardcode node_modules path.

[
'node_modules/eslint/bin/eslint.js',
'--config',
'node_modules/eslint-config-react-app/index.js',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same.

@devonjs
Copy link
Author

devonjs commented Jul 6, 2017

@gaearon updated PR (rebased) with your notes for require.resolve and simple e2e test.

Found that on the close event listener, ESLint will send a code of 0 or 1 on successful finishes (0: ESLint found no lint errors, 1: ESLint found lint errors) so that code is not particularly useful. So what we can only mainly check is errors throughout and the closing signal.

@gaearon
Copy link
Contributor

gaearon commented Jul 12, 2017

Apologies, what I meant is we should add ./node_modules/.bin/react-scripts lint to our end-to-end testing suite that runs on CI. This helps us catch regressions. We should run it both before and after ejecting.

@devonjs
Copy link
Author

devonjs commented Jul 18, 2017

@gaearon updated commit, let me know what you think

@devonjs
Copy link
Author

devonjs commented Aug 1, 2017

@gaearon ping!

@Timer
Copy link
Contributor

Timer commented Aug 2, 2017

Hmm, I'm really not sold on the benefit here. This can be handled on CI way more accurately as npm run build or as part of npm test.

I'll leave it to your discretion, @gaearon.

@devonjs
Copy link
Author

devonjs commented Aug 18, 2017

@Timer yeah, it's a bit weird to really test if linting works or not. Putting it in tasks/e2e-simple.sh made sense to me because it tries to lint and if it doesn't work, it throws the error.

Is there a better way in the npm run build or npm test script that can test if lint works? Perhaps I might be thinking of the test wrong (lint works or not), when there's a better way to test it!

console.log('ESLint finished');
});
results.on('error', err => {
console.log('Error running ESLint: ' + err);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should exit with an exit code. Otherwise CI wouldn't fail.

console.log('ESLint closed with signal: ' + signal);
return;
}
console.log('ESLint finished');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need to log this.

[
require.resolve('eslint/bin/eslint'),
'--config',
require.resolve('eslint-config-react-app'),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After ejecting this should somehow let it infer config from package.json.

@gaearon
Copy link
Contributor

gaearon commented Aug 18, 2017

This can be handled on CI way more accurately as npm run build or as part of npm test.

This is for the case when build is taking minutes and you just want to do a quick lint check.

@devonjs
Copy link
Author

devonjs commented Sep 5, 2017

@gaearon updated, apologies in advance for a bit of hand-holding through this

@Timer Timer added this to the 1.x milestone Sep 29, 2017
@react-scripts-dangerous

Hello! I'm a bot that helps facilitate testing pull requests.

Your pull request (commit a452a0f) has been released on npm for testing purposes.

npm i [email protected]
# or
yarn add [email protected]
# or
create-react-app [email protected] folder/

Note that the package has not been reviewed or vetted by the maintainers. Only install it at your own risk!

Thanks for your contribution!

@Stupidism
Copy link

How is this going?

@RWOverdijk
Copy link

For anyone interested, I solved this differently because I have some other code styles to follow. It's really not that challenging:

Create an .eslintrc file:

{
  "extends": "./node_modules/eslint-config-react-app/index.js",
  "rules"  : {
    "key-spacing": [
      "error",
      {
        "align": "colon"
      }
    ]
  }
}

Add a linting script in package.json:

"lint": "node_modules/eslint/bin/eslint.js src"

That's it. Now you cna run yarn lint or npm run lint. And you can define your own rules.

@trevordmiller
Copy link

trevordmiller commented Jan 14, 2018

Being able to run react-scripts lint like react-scripts test and react-scripts start would be very helpful for both CI and pre-commit hooks.

@gaearon
Copy link
Contributor

gaearon commented Jan 14, 2018

Agreed, we want to take this in some form. It's been a while so I don't quite remember why this PR does things in the way it does. Let me leave a comment.

Copy link
Contributor

@gaearon gaearon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See below: I don't quite understand why this is written with a try-catch, and I don't think it will work after ejecting.


try {
eslintConfigPath = require.resolve('eslint-config-react-app');
} catch (e) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When would this throw and why? I don't understand.

try {
eslintConfigPath = require.resolve('eslint-config-react-app');
} catch (e) {
eslintConfigPath = require.resolve('../../../package.json');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why would package.json count as a valid config?

require.resolve('eslint/bin/eslint'),
'--config',
eslintConfigPath,
'src/**/*.{js,jsx}',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to include .mjs now that we support it.

It's interesting that this doesn't filter tests out. I guess we can say it's a feature. (Currently there's no way to lint tests.)

@@ -314,6 +317,9 @@ npm link "$root_path"/packages/eslint-config-react-app
npm link "$root_path"/packages/react-dev-utils
npm link "$root_path"/packages/react-scripts

# Test lint
"$root_path"/packages/react-scripts/bin/react-scripts.js lint
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't make sense to me. What is this testing?

After you eject, react-scripts doesn't exist (it might on CI but you shouldn't rely on this—the point of ejecting is to wipe out react-scripts on the next installs).

So the script clearly doesn't "still work" after ejecting. If you had "lint": "react-scripts lint" before ejecting, it will stop working after.

@gaearon
Copy link
Contributor

gaearon commented Jan 14, 2018

@devonjs Thanks for your initial work with this! I think this PR might need somebody’s helping had to push this through. I’m sorry I didn’t get time to review it in more detail earlier.

@trevordmiller If you want to pick this up given the above review and resubmit it with these points addressed we can definitely try to get it in!

@gaearon gaearon modified the milestones: 1.x, 2.0.0 Jan 14, 2018
@JaKXz JaKXz mentioned this pull request Jan 16, 2018
@maciej-ka
Copy link
Contributor

I would give a try to close this. Should I open a new PR to submit changes?

@trevordmiller
Copy link

@gaearon Thanks! Sorry, I'm currently swamped or else I would. I appreciate the invite though. @devonjs or @maciej-ka seem like they could maybe do it?

@gaearon
Copy link
Contributor

gaearon commented Jan 17, 2018

@maciej-ka Sounds good!

@techrah
Copy link

techrah commented Jan 19, 2018

Please provide link to new PR. Thanks! :)

@maciej-ka
Copy link
Contributor

#3850

@SirBif
Copy link

SirBif commented Oct 3, 2018

Should this PR be closed since it has been picked up and continued in #3850 ? @Timer

@Timer Timer removed this from the 2.x milestone Nov 2, 2018
@ianschmitz ianschmitz closed this Feb 7, 2019
@lock lock bot locked and limited conversation to collaborators Feb 12, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.