I've spent the last hour trying to get this working and I can't find a solution. I have a component at ./components/layout/Layout.js.
I'm using this component 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:
{
"compilerOptions": {
"target": "es2020",
"module": "esnext",
"allowSyntheticDefaultImports": true,
"baseUrl": "src",
"jsx": "react",
"noImplicitAny": false,
"paths": {
"components/*": ["./components/*"]
}
},
"exclude": ["node_modules"]
}
and this is my eslintrc.js:
module.exports = {
env: {
commonjs: true,
node: true,
browser: true,
es6: true,
jest: true
},
extends: ['eslint:recommended', 'plugin:react/recommended'],
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: [['components', './components']]
}
},
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
add either
"checkJs": true
or
"allowJs": true
under compilerOption in tsconfig.json to get the suggetions in.
post update just reload the vs code