VSCode - Intellisense not working in (.jsx React)

Question

I have problem when using JSX the autocomplete didn't show on VSCode when I want to produce event.preventDefault() but didn't show any javascript autocompletion

I already enabled the JavaScript and TypeScript Nightly extension, but still not working

This is my vscode settings, is there something I need to change to make the autocomplete work?

"html.autoClosingTags": true,
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    }
  },
  "emmet.includeLanguages": {
    "django-html": "html",
    "javascript": "javascriptreact",
    "edge": "html",
    "vue-html": "html",
    "vue": "html",
  },
  "[css][scss][less]": {
    "editor.defaultFormatter": "vscode.css-language-features"
  },
  "javascript.suggest.paths": false,
  "javascript.format.semicolons": "remove",
  "typescript.suggest.paths": false,
  "typescript.format.semicolons": "remove",
  "[javascript][javascriptreact][typescript][typescriptreact]": {
    "editor.tabSize": 2,
    "javascript.suggest.enabled": true,
    "javascript.preferences.quoteStyle": "single",
    "typescript.preferences.quoteStyle": "single",
    "typescript.suggest.enabled": true,
    "editor.hover.enabled": true,
    "editor.hover.above": false,
    "editor.defaultFormatter": "vscode.typescript-language-features",
    "editor.codeActionsOnSave": {
      "source.fixAll": "explicit"
    }
  },
  "[json][jsonc]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar",
    "editor.hover.enabled": true,
    "editor.hover.above": false
  },
  "php.stubs": [
    "*",
    "pgsql"
  ],
  "eslint.useFlatConfig": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "svelte"
  ],
  "javascript.referencesCodeLens.showOnAllFunctions": true`

Answer 1

This is because intellisense doesn't know what the variable "event" is. If you define your function where the variable is instantiated (in the case of a button, the onClick), javascript will have the typing and know what it can autocomplete.

That said, your jsx would get kind of cluttered. To get around that, you have 2 options:

1. Convert your project to Typescript. By doing this, you would define your function parameter to be a click event, and then intellisense knows how it can autocomplete
2. JsDoc. If converting your code/project to typescript is out of scope, you can get around that with a JsDoc comment that indicates the parameter's type (follow the images below). By typing /** you will be prompted to auto-generate a JsDoc comment. Press tab. Then, you need to define your parameter's type. To figure out your type, you can start to declare an inline function in your jsx, then copy and past the type into your JsDoc comment. From there, intellisense knows what's what! As an added benefit, you can then also see your comments in places where your function is implemented! There are all sorts of other neat tags you can use with jsdocs to make your comments more helpful. Take a look at this website!