create-react-app
create-react-app copied to clipboard
facebook
Run Lint from the command line?
It would be great to be able to type
eslint into bash and have it run ESLint just like it was building. As it is, it can't find the config file unless I eject. Is ejection really necessary here?
We are running it in coordination with Husky(https://github.com/typicode/husky) to run ESLint in our pre-push. We're hoping for something like
"scripts": {
"prepush": "set CI=true&&npm test&&eslint",
}
+1, could be useful to lint in CI if someone has no tests. Plus, someone does a complete lint before committing or as a precommit hook.
even if one has tests, this would be useful. In our projects we usually first check if linting is correct before we actually run the tests in another ci step.
Is this currently possible with create react app? e.g. sth like:
"scripts": {
"lint": "react-scripts run lint"
"test": "react-scripts run test"
}
Yes, I erronously thought linting was checked inside the testing.
A workaround is possible (npm >= 3), by directly executing node node_modules/eslint/eslint.js fron npm scripts, pointing it to the right eslint react-app config.
(I'm currently linking that path to node_modules/.bin/eslint as a dirty trick to lint from Sublime Text)
We are running it in coordination with Husky(https://github.com/typicode/husky) to run ESLint in our pre-push.
Why not build the project too? It could uncover other critical issues that ESLint might miss.
And running npm run build includes linting.
My use case: because my component interacts with the server, and because I need the real server, I end up having to run npm build (which slowly builds an optimized package) when it would be very nice to just say "run eslint" and find out quickly whether I have syntax errors.
I have tried the proxy web server but because my application requires an https connection and because the interaction between the server and client is complex I have never found a way to have that work successfullly. This is an Oauth2 oriented project.
+1, basicly want to integrate a https://github.com/observing/pre-commit hook to lint my app.
@caesarsol Is your solution works with new version CRA? Tried executing:
node node_modules/eslint/bin/eslint.js --config node_modules/eslint-config-react-app/index.js App.js
but I can't see any output. What I'm doing wrong?
maybe App.js does not have any errors? Try inserting and 'x' some place where it will cause an error ...
@talkingtab: I tried with incorrect code in App.js file, which shows errors in browser box while running CRA.
@talkingtab @caesarsol - Everything works okay now. I've... typed wrong path to file. App.js instead src/App.js Sorry guys ;)
Sometimes it's handy to do a quick test before pushing code upstream. Atom often misses some eslint errors if you didn't open the file.
I don't remember if I had to install any additional packages other than what create-react-app does, but I run eslint from the command line with ./node_modules/eslint/bin/eslint.js src/**/*.js. By specifying src/ I don't need to bother with trying to ignore node_modules/.
UPDATE: Specifying ** in the path doesn't recurse all subdirectories as I thought. Simply specifying the directory, however, causes all subdirectories to be scanned, including their subdirectories, etc.: ./node_modules/eslint/bin/eslint.js src
I'm open to adding support for react-scripts lint command that will run the linter alone.
We won't add it to the project scripts by default but it will be there for people who need it.
Who wants to send a PR?
Sure: @gaearon https://github.com/facebookincubator/create-react-app/pull/2625
This work was never completed from what I can see @eddyLazar, feel free to pick up a PR if you're interested in seeing this merged.
i dont know if this is correct practice what i was looking to do was $ yarn lint and for npm $ npm run lint
scripts
simply add in scripts section in your package.json
"lint": "eslint src"
if you are using typescript, then:
"lint": "eslint --ext js,ts,tsx src"
run
then to run use:
$ yarn lint
or
$ npm run lint
config
and, of course, don't forget to add .eslintrc.json into your project's root (this is from official cra docs and this should be already done because you have read the docs, aren't you?):
{
"extends": "react-app"
}
@SleepWalker this doesn't work, it only lints staged/modified code. I have to run ./node_modules/.bin/eslint src to get a full project linting
The solution given by @SleepWalker here works for me with latest react-scripts version (v3.1.1).
Note that if you use .jsx extension you will need to specify it as well.
I couldn't get that to work b/c it couldn't find where eslint-config-react-app was located.
The temporary workaround I found was navigating directly to the file:
{
// .eslintrc.json
"extends": [
"./node_modules/react-scripts/node_modules/eslint-config-react-app/index.js"
]
}
Not ideal though...
