VSCode ESLint plugin does not work with dts-cli project

[iammathew]

Current Behavior

After creating a new react library using dts-cli, the ESLint Plugin of VSCode won't work out-of-the-box.

Expected behavior

ESLint Plugin of VSCode should work without any additional tinkering

Suggested solution(s)

Not sure how one could fix it, but it seems like the extension cant find the right config to pick.

Additional context

[Info  - 11:19:28 AM] ESLint server is starting
[Info  - 11:19:28 AM] ESLint server running in node v16.13.0
[Info  - 11:19:28 AM] ESLint server is running.
[Info  - 11:19:29 AM] ESLint library loaded from: /Users/dummy/react-libs/dts-test/node_modules/eslint/lib/api.js
[Warn  - 11:19:29 AM] 
No ESLint configuration (e.g .eslintrc) found for file: /Users/dummy/react-libs/dts-test/src/index.tsx
File will not be validated. Consider running 'eslint --init' in the workspace folder dts-test
Alternatively you can disable ESLint by executing the 'Disable ESLint' command.

Your environment

System:
    OS: macOS 12.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 701.05 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.19.1 - ~/.yarn/bin/yarn
    npm: 8.5.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 98.1.35.100
    Chrome: 100.0.4896.127
    Firefox: 98.0.2
    Safari: 15.2
  npmPackages:
    dts-cli: ^1.5.0 => 1.5.0 
    typescript: ^4.6.3 => 4.6.3 

[aladdin-add]

yes, it's a known issue. But you can run yarn lint --write-file to make vscode-eslint happy.

[iammathew]

@aladdin-add Thanks for the fast response!
After running the command, it fails using this error though 🤔

[Error - 11:35:57 AM] Error: Failed to load config "node_modules/dts-cli/conf/eslint-config-react-app/index.js" to extend from.
Referenced from: /Users/dummy/react-libs/dts-test/.eslintrc.js
    at configInvalidError (/Users/dummy/react-libs/dts-test/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2624:9)
    at ConfigArrayFactory._loadExtendedShareableConfig (/Users/dummy/react-libs/dts-test/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3242:23)
    at ConfigArrayFactory._loadExtends (/Users/dummy/react-libs/dts-test/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3119:25)
    at ConfigArrayFactory._normalizeObjectConfigDataBody (/Users/dummy/react-libs/dts-test/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3058:25)
    at _normalizeObjectConfigDataBody.next (<anonymous>)
    at ConfigArrayFactory._normalizeObjectConfigData (/Users/dummy/react-libs/dts-test/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3003:20)
    at _normalizeObjectConfigData.next (<anonymous>)
    at ConfigArrayFactory.loadInDirectory (/Users/dummy/react-libs/dts-test/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2849:28)
    at CascadingConfigArrayFactory._loadConfigInAncestors (/Users/dummy/react-libs/dts-test/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3833:46)
    at CascadingConfigArrayFactory.getConfigArrayForFile (/Users/dummy/react-libs/dts-test/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3754:18)

Any clue what is wrong?

This is the generated file:

module.exports = {
  "extends": [
    "node_modules/dts-cli/conf/eslint-config-react-app/index.js",
    "prettier",
    "plugin:prettier/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

[aladdin-add]

what if changing to ./node_modules/dts-cli/conf/eslint-config-react-app/index.js ?

[iammathew]

@aladdin-add That seems to fix it, thanks :)

[aladdin-add]

great, I'll make a fix later, thanks for the report!

[iammathew]

@aladdin-add
Adding a paragraph to the README, regarding needing to run yarn lint --write-file in order for VSCode ESLint to work might also be helpful for future users. If you like I can open a pull request for that?

[aladdin-add]

sure, PRs are welcome! 👍

[aladdin-add]

closing as fixed.