Eslint in VS Code

[spifd]

Hi,

I don't have any error/warning appearing in VS Code (ESLint plugin) whereas it works perfectly in command line. I'm not sure the simplified .eslintrc.json is the cause or if there is a configuration to do. Is this supposed to work in VS Code too?

Cheers, Fabrice

[davidjbradshaw]

It's working for me, although I do sometime have to click this at the top, when creating a new project

[spifd]

Thanks for the confirmation. I've activated he ESLint debug mode in VS Code and here is the error.

[Info - 1:36:32 PM] Cannot read config file: <myprojectdir>/node_modules/eslint-config-auto/index.js Error: Cannot read property 'config' of null Referenced from: <myprojectdir>/.eslintrc.json

My .eslintrc.json just contains:

{
  "extends": ["auto"]
}

I'm going to review my package.json and do a simpler project. Any hint regarding the error?

[davidjbradshaw]

Does it work when you run it from the command line?

[davidjbradshaw]

Also are you sure npm fully installed it?

[spifd]

Yes.

I've tried to start from zero. Creating a fresh React project from scratch with npx create-react-app my-app, adding .eslintrc.json extending "auto", added scripts to run ESLint, and run from command-line : OK, reporting 25 problems by default. Then in VS Code, no error or warning and still the same "Cannot read config file" error. I'm going to review my global VS configuration but I don't think there's anything special.

[Info  - 6:29:20 PM] ESLint server is starting
[Info  - 6:29:20 PM] ESLint server running in node v12.18.3
[Info  - 6:29:20 PM] ESLint server is running.
[Info  - 6:29:20 PM] ESLint library loaded from: <dir>/my-app/node_modules/eslint/lib/api.js
[Info  - 6:29:21 PM] Cannot read config file: <dir>/my-app/node_modules/eslint-config-auto/index.js Error: Cannot read property 'config' of null Referenced from: <dir>/my-app/.eslintrc.json

[davidjbradshaw]

Strange the project I tested it on earlier today was created in the same way, have you removed the eslint bit from package.json?

[spifd]

Here is my package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "eslint": "eslint --color --ext .html,.js,.json,.jsx,.md,.ts,.tsx *.* src",
    "eslint:fix": "npm run eslint -- --fix"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint-config-adjunct": "^4.9.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-auto": "^0.6.6",
    "eslint-plugin-array-func": "^3.1.7",
    "eslint-plugin-eslint-comments": "^3.2.0",
    "eslint-plugin-html": "^6.1.1",
    "eslint-plugin-jest-async": "^1.0.3",
    "eslint-plugin-jest-dom": "^3.6.5",
    "eslint-plugin-json": "^2.1.2",
    "eslint-plugin-markdown": "^2.0.0",
    "eslint-plugin-no-constructor-bind": "^2.0.4",
    "eslint-plugin-no-secrets": "^0.7.9",
    "eslint-plugin-no-unsanitized": "^3.1.4",
    "eslint-plugin-no-use-extend-native": "^0.5.0",
    "eslint-plugin-optimize-regex": "^1.2.0",
    "eslint-plugin-promise": "^4.3.1",
    "eslint-plugin-scanjs-rules": "^0.2.1",
    "eslint-plugin-security": "^1.4.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-sonarjs": "^0.6.0",
    "eslint-plugin-switch-case": "^1.1.2",
    "eslint-plugin-unicorn": "^28.0.2"
  }
}

I've tried a number of changes (overriding node version for ESLint) and even reinstalled VS Code. Same issue.

[davidjbradshaw]

It all looks good to me. Do you get the same problem if you just include eslint-config-airbnb?

[spifd]

Yes. For ex, if I switch from "auto"to "airbnb", ESLint works in VS Code and command-line.

{
  "extends": ["airbnb"]
}

[spifd]

I did another test:

{
  "extends": ["airbnb", "adjunct"]
}

It works fine with command line but it has a different behavior in the context of VS Code and fails:

[Info  - 2:48:58 PM] Failed to load plugin 'unicorn' declared in 'my-app/.eslintrc.json » eslint-config-adjunct » <dir>/my-app/node_modules/eslint-config-adjunct/rules/unicorn.js': unknown:
Support for the experimental syntax 'dynamicImport' isn't currently enabled (2:56):
    1 | async () => { > 2 |     var gensym6912e76dbc147,  gensym1893a1d039888 = await import(gensym0ffbdafcf549);     |                                                           ^   3 | }
Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
Referenced from: <dir>/my-app/node_modules/eslint-config-adjunct/rules/unicorn.js

Maybe it highlights some of the issue when using "auto".

Edit: it looks like it is something else - downgrading "eslint-plugin-unicorn" to previous 20.x version fixes this latest issue for VS Code when extending "airbnb" and "adjunct". With "auto", it still gives "Cannot read config file..." not working in VS Code.

[davidjbradshaw]

Sorry not to reply sooner, I had a bike crash and broke my elbow two weeks ago. Is it still a problem?