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

13,062

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.

Share:
13,062
Oleg
Author by

Oleg

Updated on June 06, 2022

Comments

  • Oleg
    Oleg almost 2 years

    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
      }
    }
    
  • CorreyL
    CorreyL over 3 years
    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