skip to Main Content

Since the last Visual Studio Code update, I’ve got problems with IntelliSense autocompletion. Generally if I want to set a function as a prop (it’s the most common use case of this problem) then instead of inserting just function name VS Code is adding ={} brackets. So how to get rid of this:

const func = () => {}
...
<button
   onClick={func={}}
 />

and get something like this:

const func = () => {}
...
<button
   onClick={func}
 />

To clarify – no new add-ons were installed. It’s happening for js/ts files when writing in React.

2

Answers


  1. Chosen as BEST ANSWER

    As a workaround, we can set JSX Attribute Completion Style to none.

    https://github.com/microsoft/vscode/issues/171609#issuecomment-1387107873


  2. How to fix this

    1. Open VS code.
    2. Go to File > Preference > Settings then
    3. type: run code in the settings search bar
    4. Select Edit in settings.json to open the settings.json file
    5. Add the "javascript.preferences.jsxAttributeCompletionStyle": "none" line to your settings.json file

    Why we do this:

    In the defaultSettings.json file there is this code snippet:

    // Preferred style for JSX attribute completions.
    //  - auto: Insert `={}` or `=""` after attribute names based on the prop type. 
    //  - braces: Insert `={}` after attribute names.
    //  - none: Only insert attribute names.
    "javascript.preferences.jsxAttributeCompletionStyle": "auto",
    

    therefore, the default setting for jsxAttributeCompletionStyle is auto and by setting it to "none" in your settings.json file you overwrite that default setting.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search