I've spent the last hour trying to get this working and I can't find a solution. I have a ponent at ./ponents/layout/Layout.js.

I'm using this ponent in ./pages/_app.js. However, while eslint sees that I haven't imported it, it doesn't offer a suggestion to autoimport it (in the quick fix menu). I would like to be able to click quick fix and see the suggested import, as I get in Typescript projects (if this is even possible with JS.)

Here is my jsconfig.json:

 {
  "pilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "jsx": "react",
    "noImplicitAny": false,
    "paths": {
      "ponents/*": ["./ponents/*"]
    }
  },
  "exclude": ["node_modules"]
}

and this is my eslintrc.js:

module.exports = {
  env: {
    monjs: true,
    node: true,
    browser: true,
    es6: true,
    jest: true
  },
  extends: ['eslint:remended', 'plugin:react/remended'],
  globals: {},
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['react', 'import', 'react-hooks'],
  ignorePatterns: ['node_modules/'],
  rules: {
    'react/react-in-jsx-scope': 0,
    'react/prop-types': 0
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [['ponents', './ponents']]
      }
    },
    react: {
      version: 'latest' // "detect" automatically picks the version you have installed.
    }
  }
};

It would be really great if someone could offer some suggestions for the configs here. As I've said, I've trawled through Google for a long time and haven't been able to get it working.

Many thanks

I've spent the last hour trying to get this working and I can't find a solution. I have a ponent at ./ponents/layout/Layout.js.

I'm using this ponent in ./pages/_app.js. However, while eslint sees that I haven't imported it, it doesn't offer a suggestion to autoimport it (in the quick fix menu). I would like to be able to click quick fix and see the suggested import, as I get in Typescript projects (if this is even possible with JS.)

Here is my jsconfig.json:

 {
  "pilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "jsx": "react",
    "noImplicitAny": false,
    "paths": {
      "ponents/*": ["./ponents/*"]
    }
  },
  "exclude": ["node_modules"]
}

and this is my eslintrc.js:

module.exports = {
  env: {
    monjs: true,
    node: true,
    browser: true,
    es6: true,
    jest: true
  },
  extends: ['eslint:remended', 'plugin:react/remended'],
  globals: {},
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['react', 'import', 'react-hooks'],
  ignorePatterns: ['node_modules/'],
  rules: {
    'react/react-in-jsx-scope': 0,
    'react/prop-types': 0
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [['ponents', './ponents']]
      }
    },
    react: {
      version: 'latest' // "detect" automatically picks the version you have installed.
    }
  }
};

It would be really great if someone could offer some suggestions for the configs here. As I've said, I've trawled through Google for a long time and haven't been able to get it working.

Many thanks

• javascript
• next.js
• eslint

Share Improve this question Follow asked Apr 26, 2021 at 16:02 Raph117Raph117 3,84188 gold badges3737 silver badges5757 bronze badges 6

• 1 Only my guess. Two things to try out. (1) try use the include or files option in jsconfig.json (2) add // @ts-check at the beginning of both files. – hackape Commented Apr 26, 2021 at 16:13
• @hackape thanks, I'll try – Raph117 Commented Apr 26, 2021 at 16:14
• On top of that, there’s also another idea worth trying. Use tsconfig.json instead and turn on allowJs: true to fool the editor to believe this is a TS project. – hackape Commented Apr 26, 2021 at 16:16
• 1 I spend most of the time dealing with TS projects. Some facts that back up my educated guess. vscode uses TS engine under the hood to support pure JS project. TS by design will crunch all named symbols in the project and store them inside an internal lookup table, this is how the “suggested import” quick fix work. So you need to tell the engine what files to look into. – hackape Commented Apr 26, 2021 at 16:23
• 1 That is extremely helpful to know, thank you – Raph117 Commented Apr 26, 2021 at 16:27

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 6

Update tsconfig.json

add either

"checkJs": true

or

"allowJs": true

under pilerOption in tsconfig.json to get the suggetions in.

post update just reload the vs code

To enable VSCode auto imports you need the following setting inside piler options:

"checkJs": true

Just remove this, it work at 2023

"exclude": ["node_modules"]