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"
  }
}

Can you post your package.json file please. Then message me when you do. — JAYD3V
– JAYD3V, Commented Jun 14, 2022 at 19:34
@Matt How do you name your components? do they end with .js or .jsx extension? — M.A Shahbazi
– M.A Shahbazi, Commented Jun 15, 2022 at 8:33
So you get type information with Check JS, because that is what Check JS does. Its sort of odd that your enabling JS, it looks like your not using any JS in your source (maybe you are, IDK). Unless your using '.js' or '.jsx' files in your source code, you shouldn't include JS, idk if you knew that, but I thought I would throw it out there. Also I wrote an answer below. Lemme know what happens after install your types. — JAYD3V
– JAYD3V, Commented Jun 15, 2022 at 9:19
@M.AShahbazi with .js extension. I tried to rename some of them to .jsx, but it didn't help. — Matt
– Matt, Commented Jun 15, 2022 at 16:55

krishnaacharyaa · Accepted Answer · 2022-06-15 18:15:02Z

1

+50

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

The following links may be helpful:

answered Jun 15, 2022 at 18:15

krishnaacharyaa

26.1k9 gold badges102 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Over a year ago

I am working on another project and I have the same issue again :D

Ritik Banger · Accepted Answer · 2022-06-12 06:20:15Z

0

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

answered Jun 12, 2022 at 6:20

Ritik Banger

2,8688 silver badges31 bronze badges

1 Comment

Matt Over a year ago

Unfortunately "importHelpers": true, "allowSyntheticDefaultImports": true and "javascript.preferences.importModuleSpecifier": "relative" didn't help. It's really strange that autocomplete feature doesn't work without typescript checking or without additional extension.

Kirill Kushpel · Accepted Answer · 2022-06-12 06:24:11Z

0

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

answered Jun 12, 2022 at 6:24

Kirill Kushpel

1119 bronze badges

3 Comments

Matt Over a year ago

If I exclude folders by "exclude": ["."] the imports autocomplete feature doesn't work.

Kirill Kushpel Over a year ago

I've searched a bit, and found a possible duplicate

Matt Over a year ago

Yes you can disable typescript checking by "checkJs": false but it disables autocomplete feature and I don't want that. That's the whole point of my question.

JAYD3V · Accepted Answer · 2022-06-15 08:27:10Z

0

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.

edited Jun 15, 2022 at 8:27

answered Jun 15, 2022 at 8:21

JAYD3V

12.6k8 gold badges67 silver badges108 bronze badges

2 Comments

JAYD3V Over a year ago

Adding the types should work, because TSC doesn't provide suggestions, or type information with out them, it can't, it has to have them to provide the additional features that you get from ts.

Matt Over a year ago

I installed the types and then changed include setting to "include": ["src"], and added "exclude": ["node_modules"], then restarted VS Code, but nothing changed.

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

1 Comment

3 Comments

The "TypeScript Reference Manual" says this:

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

3 Comments

The "TypeScript Reference Manual" says this:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related