ReactJS JSX Auto Complete No Longer Working

Question

I used to be able to type div and then press tab and sublime would autocomplete and output <div></div>. The same thing with components. I would type MyComponent and press tab and sublime would autocomplete <MyComponent></MyComponent>. Since today this no longer works for me. Any ideas why?

I tried finding a solution, but have been unsuccessful. Below is a keybinding that I have tried, but it does not work.

{ "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context":
        [
            { "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" },
            { "match_all": true, "key": "selection_empty" },
            { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" },
            { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" },
            { "match_all": true, "key": "is_abbreviation" }
        ]
    }

What is different between today and the last time it worked? Something must have changed, been [un]installed, or otherwise altered. Things happen for a reason. Did you install or uninstall any plugins? Change any config files? Upgrade anything? — MattDMo, Aug 23 '20 at 01:19

score 2 · Answer 1 · edited Aug 31 '20 at 13:21

Turns out the Emmet package was updated to Emmet2 today and the above key bind needs to be adjusted slightly. The command property should be emmet_expand_abbreviation instead of expand_abbreviation_by_tab and Emmet2 now displays a popup while you type so the last 2 lines need to be commented out. Here what works for me:

{ "keys": ["tab"], "command": "emmet_expand_abbreviation", "context":
    [
      { "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" },
      { "match_all": true, "key": "selection_empty" },
      { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" },
      // { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" },
      // { "match_all": true, "key": "is_abbreviation" }
    ]
  }

ReactJS JSX Auto Complete No Longer Working

1 Answers1