eslint binary is not in the top level node_modules/.bin folder after creating an app

[keyz]

I tested #149 again with create-react-app my-app --scripts-version 0.2.0-alpha.1 and noticed that ESLint in editor doesn't work as expected. Digging down into the issue and I realized our global-cli and npm run create-react-app in the main repo generate different node_module structures (I'm using npm 3):

A global create-react-app my-app call generates:

node_modules (top level)
├── .bin
│   ├── loose-envify
│   └── react-scripts
├── ...
└── react-scripts
    ├── ...
    └── node_modules
        └── .bin
            ├── ...
            └── eslint // 😢

And npm run create-react-app my-app in the main repo generates:

node_modules (top level)
├── .bin
│   ├── ... (everything's here like webpack, react-scripts, etc.)
│   └── eslint // 😃
├── ...
└── react-scripts
    ├── ...
    └── no node_modules here

As a result, the ESlint in editor part doesn't work for a global cli call. I've only tested my PR using the npm run create-react-app script and that's why I thought it was working for me. :(

To be clear, this issue only happens before ejecting; after ejecting eslint will be moved to the top level node_modules/.bin folder so it works fine. I think there's nothing wrong with "extends": "./node_modules/react-scripts/config/eslint.js"; the problem is the eslint binary gets put in a deep node_modules/.bin folder so editors (plugins) can't find it.

TBH I'm not sure what's a good way to fix this. Could we flatten the node_module structure while creating an app?

cc @gaearon @vjeux

[gaearon]

It's weird that npm 3 generates this. Does calling npm dedupe fix it? In general npm 3 should use flat structure when possible so I'm curious what causes the nesting.

[keyz]

yeah, calling npm dedupe fixed it but it took like 10 minutes to finish on my machine :(

[gaearon]

I think we might have to recommend npm dedupe or wait for eslint/eslint#3458 to be fixed (there’s some work on this as far as I can see).

[insin]

Delightful (nasty) hack I used for this in my entire-ESLint-config-in-a-box package with npm2 - define your own eslint bin script which finds and calls the real one 🌵

[gaearon]

Wow much evil. 😄
We probably won’t do this because I think it’s a notch too obnoxious for us to shadow eslint.

---

This is being worked on: eslint/eslint#3458. I think we might expect to have a solution to this in ESLint itself within a couple of months.

In the meantime, I documented the complete workaround that involves installing those plugins globally: https://github.com/facebookincubator/create-react-app/blob/master/template/README.md#display-lint-output-in-the-editor.

I think it will suffice for now.