How to enable import autocomplete without typescript checking in a React project in VS Code

Question

I am working on a React project without typescript where imports autocomplete feature doesn't work. What I mean by this is that I don't get an option to import a component:

this is the jsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "esnext",
    "module": "esnext",
    "types": ["node", "jest"],
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "checkJs": false
  },
  "include": [".", "src"]
}

If I enable "checkJs": true, the imports autocomplete is working:

The problem is that now I am getting typescript errors in my project, but I don't want typescript checking in my project:

I tried to disable typescript in .vscode/settings.json in the root project's folder like this:

  "tslint.enable":false,
  "typescript.validate.enable": false,
  "javascript.validate.enable": false

but it didn't help.

package.json

{
  "name": "name",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^4.7.0",
    "@fullcalendar/daygrid": "^5.11.0",
    "@fullcalendar/interaction": "^5.11.0",
    "@fullcalendar/react": "^5.11.1",
    "@stripe/react-stripe-js": "^1.7.0",
    "@stripe/stripe-js": "^1.24.0",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "antd": "^4.19.1",
    "axios": "^0.26.1",
    "card-validator": "^8.1.1",
    "clsx": "^1.1.1",
    "env-cmd": "^10.1.0",
    "formik": "^2.2.9",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
    "moment-timezone": "0.5.34",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-calendly": "^4.0.1",
    "react-dom": "^17.0.2",
    "react-dropzone": "^14.2.1",
    "react-lines-ellipsis": "0.15.0",
    "react-lottie": "^1.2.3",
    "react-phone-number-input": "3.2.2",
    "react-player": "^2.10.0",
    "react-responsive": "9.0.0-beta.8",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "react-spinners": "^0.12.0",
    "rooks": "5.11.2",
    "sass": "^1.49.9",
    "web-vitals": "^2.1.0",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts --max_old_space_size=4096 start",
    "build": "react-scripts --max_old_space_size=4096 build",
    "build:development": "env-cmd -f .env.development react-scripts --max_old_space_size=4096 build",
    "build:qa": "env-cmd -f .env.qa react-scripts --max_old_space_size=4096 build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint -c .eslintrc.cjs --ext .js,.jsx .",
    "lint:fix": "npm run lint -- --fix"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "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": "8.17.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-prettier": "4.0.0",
    "prettier": "2.6.2"
  }
}

Answer 1

The issue is raised already and seems to have no any active fixes

The following links may be helpful:

• Quick Fix popup stopped suggesting "Add missing import" for JS #1326

• vscode-eslint not working with eslint-import-resolver-typescript@2.0.0 #944

Answer 2

You're including types in the "types": [] field, but you don't have those types installed as dependencies. You need to install the types as devDependencies via the commands:

$ npm i -D @types/node @types/jest @types/react @types/react-dom @types/react-responsive`

Using "types": ["foo", "bar", etc...] will not add those types, fetch them from a URL, or Generate them. You still have to manually add them to your project. Even then the "type":[...] field is more for excluding types than it is for including them. Think of it as an "includes" field, but for types. Like the "includes" field, the "types" field, excludes everything, except for what you have included in the "types": [...] array.

The "TypeScript Reference Manual" says this:

---

If types is specified, only type-packages listed will be included in the global scope. For instance:

 {
   "compilerOptions": {
     "types": ["node", "jest", "express"]
   }
 }

This tsconfig.json file will only include ./node_modules/@types/node, ./node_modules/@types/jest and ./node_modules/@types/express. Other packages under node_modules/@types/* will not be included.

---

TypeScript needs types to provide type information. The odd thing that gets me confused is why when you play with the JavaScript settings your able to get type information, even w/o the proper types being installed. Some of your packages already come typed. If I had to guess, I think when you add "allowJS", and "checkJS" you get type information, because VS Code provides types for JavaScript, using TypeScript's tsc compiler to do it, which means VS Code must provide types for tsc. So tsc is getting type information from VS Code when you enable the JS settings (but this is only a theory).

Also, typically, the "includes" field doesn't use "." as what to include. That is basically saying, "include all of my project when compiling", which doesn't make sense because usually no one wants to include everything. the entire project. If anything, at the very least, you would want to use the "exclude" field instead if you truly want to "include": ["."] there is no reason to also include "src", because "." covers source. My suggestion is to remove ".", but if you leave it for what ever reason, at least exclude your node_modules directory & your build directory so tsc knows not to recursively run checks through your dependencies, and the files that it generated.

Answer 3

Have you tried excluding directories in tsconfig? If you exlude one, TS won't check it.

Answer 4

In your TSconfig, add this "importHelpers": true, "allowSyntheticDefaultImports": true,

and in your settings.json add this (specify the type of path to use for imports): "javascript.preferences.importModuleSpecifier": "relative"

Alternatively you can also add this extension in your VSCode for auto imports: Name: Auto Import Steps: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install steoates.autoimport