Create-react-app: Run Lint from the command line?

[danielstern]

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?

[gaearon]

What is your use case for running lint separately?

[danielstern]

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",
  }

[caesarsol]

+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.

[sakulstra]

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"
}

[caesarsol]

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)

[danielstern]

@caesarsol Interesting, an all-purpose solution would be great

[gaearon]

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.

[talkingtab]

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.

[stevenmusumeche]

+1

[Andrei-Vakulski]

+1, basicly want to integrate a https://github.com/observing/pre-commit hook to lint my app.

[Morkowski]

@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?

[talkingtab]

maybe App.js does not have any errors? Try inserting and 'x' some place where it will cause an error ...

[Morkowski]

@talkingtab: I tried with incorrect code in App.js file, which shows errors in browser box while running CRA.

[Morkowski]

@talkingtab @caesarsol - Everything works okay now. I've... typed wrong path to file. App.js instead src/App.js
Sorry guys ;)

[ryanhomer]

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

[gaearon]

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?

[Morkowski]

Sure: @gaearon
https://github.com/facebookincubator/create-react-app/pull/2625

[devonjs]

@gaearon moved command to react-scripts lint in #2729

[eddyLazar]

Is there some progress here?

[mrmckeb]

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.

[ah3eyy]

i dont know if this is correct practice what i was looking to do was
$ yarn lint
and for npm
$ npm run lint

[tylerwray]

Anyone working on this actively? If not I'll begin work on it

[goldo]

is there any acceptable solution for now ?

[SleepWalker]

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"
}

[goldo]

@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

[buoyantair]

Hello, is anyone working on this? I would like to solve this issue...

[goldo]

@buoyantair maybe @tylerwray ?

[avesus]

What's the recommended way to run ESLint from create-react-app today?

[enzoferey]

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.

[pedro-mass]

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...

[mrmckeb]

If you use a .js file, you could try resolving the file @pedro-mass. If you're using Yarn or modern NPM, it's normally available at root.

[cmdcolin]

I dunno if this is helpful to anyone but I wanted a simple sort of setup where I can run eslint from the command line also (e.g. yarn lint), and have prettier also which is autofixed with the lint command. There are probably a million starter packs that do this but I wanted the minimal setup on top of create-react-app. One insight I needed was that it was helpful for me to manually setup .eslintrc and .pretterrc and install some deps like prettier manually. I created this as a ref https://github.com/cmdcolin/cra_starter_pack

If I am perhaps missing something with this setup (e.g. there is an easier way) feel free to let me know

[zachwolf]

Is anyone working on this?

I've built this functionality for a forked project. It would be fairly quick to contribute the work back

[ErisDS]

It seems really weird that this isn't included. I assumed it would be done as part of the test phase as eslint config is already included.

I fixed it by doing the following:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src --ext .js --cache",
    "posttest": "yarn lint"
  },

This requires adding .eslintcache to .gitignore. If you're using a different file extension you'll need to change that, but for me eslint src works alone as well.

[tomhicks]

I've just come across this and I'm having to install countless eslint plugins and parsers. Anyone else having this issue?

Currently doing: npm run lint, get missing plugin from error message, npm install, npm lint, repeat.

[nanocents]

My solution was to use Prettier integrated with Vim. I have been a big fan of CRA but I have to say, this issue is one of the things that moved me to use Parcel - I felt like my tool (CRA) was picking a fight with me. The Parclejs system does not solve this problem either, but at least we're not fighting. And Prettier is a pretty good solution.

[rhernandog]

@tomhicks, the solution posted by @SleepWalker works just fine in my case with the latest CRA version (3.4.1).
I have the following config added to package.json:

"eslintConfig": {
  "extends": "react-app",
  "parser": "babel-eslint",
  "rules": {
   "semi": "error",
   "no-console": "warn"
  }
},

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "lint": "eslint --ext js,ts,tsx src"
},

And it's linting every file in the src folder with the indicated extensions.

[cryptogoth]

I used @pedro-mass 's .eslintrc.json config file above with react-scripts 3.4.1. thanks much.
My package.json looks like

 "scripts": {
    "test": "mocha ./tests --trace-warnings --exit --colors --recursive --reporter spec -t 2000",
    "start": "node scripts/fullServer.js 127.0.0.1 8545 8546 30303",
    "lint": "eslint -c .eslintrc.json --fix src/*.js*"
  },

[sazzer]

My use case here is to get fast feedback from CI builds. Tests can sometimes be slow - especially if you have lots of them. yarn build is slow. I want to be able to lint all of the code as a first step before the tests run, so that if the linting fails the CI build fails in seconds instead of minutes.

[bennettdams]

Just a workaround, but executing the linting is pretty straightforward with VS Code. The following will use the same ESLint config as VS Code uses to show problems/errors at the editor:

1. Enable the ESLint task in your settings.json: "eslint.lintTask.enable": true
2. Open VS Code's command palette (e. g. via CTRL + Shift + P)
3. Enter "task" and select "Tasks: Run task"
4. Select eslint > eslint: lint whole folder
5. The terminal will pop up and show all problems/errors. It will also populate VS Code's "PROBLEMS" tab, which can be opened via the icons that are shown at the status bar at the bottom of the editor or via the command "View: Toggle problems".

Not as good as CLI, but at least this will show you all the problems for all files.

[osdiab]

i'm trying out yarn 2 with zero-install config, and i'm finding that just using eslint in package.json doesn't work, the eslint command can't be found. Not knowledgable enough yet to say how to mitigate that though besides redundantly installing eslint and all the configs/plugins CRA uses (or just not using CRA)

[bendtherules]

Anyone still facing the problem, follow the above comment . Quoting to keep it visible -

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"
}

I can't believe this simple thing has still not been merged.

[mrmckeb]

Thanks @bendtherules! You should also be able to use yarn eslint to run Lint, without anything in your package.json.

The official templates will also include our ESLint config in package.json, so users may not need to add a config :)

I think we can close this issue off now, unless anyone has any objections?

[bendtherules]

@mrmckeb The main problem for me was - this is not documented in the cra website. It is not obvious at all (specially considering eslint is not visible as dependency).
Let's add that before closing maybe?

Currently, people will eventually land here and have a bad experience going through so much discussion.

[mrmckeb]

I think that's a great idea @bendtherules, and would definitely support adding this to the docs. Would you like to open a PR for that and ping me to review?

[sazzer]

What would be great is for the generated package.json to already have this,
so people can just run eslint without having to set anything up manually.

It seems like quite a simple change to avoid this whole discussion in the
first place.

On Mon, 28 Sep 2020, 12:40 Brody McKee, [e-mail] wrote:

I think that's a great idea @bendtherules
https://github.com/bendtherules, and would definitely support adding
this to the docs. Would you like to open a PR for that and ping me to
review?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/create-react-app/issues/1217#issuecomment-699954060,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAAQEGBA43MKXAO6GDR5EWTSIBY3XANCNFSM4CZEZM2Q
.

[bendtherules]

I second @sazzer. Can the team explain why that wouldn't be a good idea?

[mrmckeb]

I don't disagree personally, but it's also very easy to add manually.

@ianschmitz and @iansu, what do you think about adding a "lint" script to the base templates? This may be more useful now that we're allowing custom configs everywhere.

[ya3ya6]

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?

Hey @danielstern . i'm here from googling "create react app lint script" (it's first result on google) and i found the solution on here after reading the whole discussion (~10 min).
can't you add an edit to your first post, like this: "EDIT: It's added on new versions. see here for the solution." ?