Oleg
Oleg

Reputation: 1168

Eslint doesn't work in VScode, but work from terminal

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

Upvotes: 19

Views: 26192

Answers (2)

xdvr
xdvr

Reputation: 41

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/*/" }
    ]

Upvotes: 3

Mykybo
Mykybo

Reputation: 1509

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.

Upvotes: 42

Related Questions