18

I have monorepository managed by rush (https://rushjs.io/)

The structure of code is:

enter image description here

As you see, there are two eslint configs and two directories node_modules (it is just symlink created by rush).

Eslint to back work perfectly.

But I have some troubles with eslint config to front. When I run it with yarn eslint --ext .js --ext .jsx ./src from directory front, it work.

But it doesn't work, when eslint has launched from vscode. In output I see:

Consider running eslint --debug /Users/oleg/Desktop/projects/hire/front/src/pages/config.js from a terminal to obtain a trace about the configuration files used.
[Error - 2:04:08 PM] 
Failed to load plugin 'react' declared in 'front/.eslintrc': Cannot find module 'eslint-plugin-react'
Require stack:
- /Users/oleg/Desktop/projects/hire/__placeholder__.js
Referenced from: /Users/oleg/Desktop/projects/hire/front/.eslintrc
Happened while validating /Users/oleg/Desktop/projects/hire/front/src/pages/config.js
This can happen for a couple of reasons:
1. The plugin name is spelled incorrectly in an ESLint configuration file (e.g. .eslintrc).
2. If ESLint is installed globally, then make sure 'eslint-plugin-react' is installed globally as well.
3. If ESLint is installed locally, then 'eslint-plugin-react' isn't installed correctly.

eslint-plugin-react is already installed and defined in front/package.json

Do you have any idea, why eslint can't work?

P.S Eslint config:

{
  "parser": "babel-eslint",
  "extends": [
    "airbnb",
    "plugin:react/recommended"
  ],
  "env": {
    "browser": true,
    "node": true,
    "jest": true,
    "es6": true
  },
  "plugins": [
    "react",
    "jsx-a11y"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "newline-before-return": "error",
    "newline-after-var": "error",
    "arrow-parens": [
      "error",
      "always"
    ],
    "arrow-body-style": [
      2,
      "as-needed"
    ],
    "comma-dangle": [
      2,
      "always-multiline"
    ],
    "import/imports-first": 0,
    "import/newline-after-import": 0,
    "import/no-extraneous-dependencies": 0,
    "import/no-named-as-default": 0,
    "import/no-unresolved": 2,
    "import/prefer-default-export": 0,
    "indent": [
      2,
      2,
      {
        "SwitchCase": 1
      }
    ],
    "max-len": 0,
    "newline-per-chained-call": 0,
    "no-confusing-arrow": 0,
    "no-console": 1,
    "no-use-before-define": 0,
    "prefer-template": 2,
    "class-methods-use-this": 0,
    "react/forbid-prop-types": 0,
    "react/jsx-first-prop-new-line": [
      2,
      "multiline"
    ],
    "react/jsx-no-target-blank": 0,
    "react/require-extension": 0,
    "react/self-closing-comp": 0,
    "react/display-name": 0,
    "require-yield": 0,
    "import/no-webpack-loader-syntax": 0,
    "react/prop-types": [
      0
    ]
  },
  "settings": {
    "babel-plugin-root-import": {
      "rootPathPrefix": "~/",
      "rootPathSuffix": "src/"
    }, 
    "import/resolver": {
      "webpack": {
        "config": "./webpack/webpack.prod.js"
      }
    }    
  },
  "globals": {
    "CONFIG": true
  }
}
1

2 Answers 2

42

Add to workspace settings:

{
    "eslint.workingDirectories": [
        "back",
        "front"
    ]
}

and potentially:

{
    "eslint.workingDirectories": [
        { 
            "directory": "front", 
            "changeProcessCWD": true
        }
    ]
}

The problem is with where vscode/eslint looks for dependencies.

4
  • 6
    For those unfamiliar with how VSCode handles settings, @Mykybo's recommended additions should go into the Workspace Settings (JSON), as outlined here: code.visualstudio.com/docs/getstarted/settings
    – CorreyL
    Commented Jan 28, 2021 at 23:03
  • After a whole lot of searching, (for about 6, 7 hours), your answer finally fixed my issue, so thank you.
    – Mamrez
    Commented Jan 24, 2023 at 15:04
  • 4
    To anyone fighting with this - the workindDirectories option also now supports "eslint.workingDirectories": [{ "mode": "auto" }] which could also work without you having to manually specify the directories Commented Feb 21, 2023 at 12:59
  • thanks. it work for me with below: "eslint.workingDirectories": [ { "directory": "./apps/frontend" }, ],
    – cng.buff
    Commented Apr 8 at 6:51
2

Going to add "babel/next" not installed to here. so hopefully google picks this up. eslint works fine in cli. eslint complains in vscode on all import lines.

Have been going through loads of different recommendations and none of them have worked properly > adding and correctly configuring this file is the correct answer.

So for instance if you have a website folder add this.

"eslint.workingDirectories": [
      { "pattern": "website/*/" }
    ]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.