Expanding emmet abbreviations inside JSX inline functions not working

[ArturKp]

Issue Type: Bug

Expanding emmet abbreviations inside inline functions is not working. Given the example React component below I am unable to expand any abbreviations inside the render function. Expanding works in rest of the file.

import React from 'react';
import { Form } from 'react-final-form';

const SomeComponent = () => (
  <Form render={() => (
    <pre>Expanding Emmet abbreviations inside this function is not working</pre>
  )}
  />
);

export default SomeComponent;

What bothers me the most is that it is not even working when explicitly selecting from the menu "Emmet: Expand Abbreviation". If it was up to me I would make the explicit choice from the menu expand whatever and in whatever syntax. Additionally would like to note that "Emmet: Wrap with Abbreviation" seems to already work like that. Shouldn't the "Emmet: Expand Abbreviation" work the same way?

---

VS Code version: Code 1.28.2 (7f3ce96, 2018-10-17T00:18:43.347Z)
OS version: Darwin x64 18.0.0

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz (8 x 2200)
GPU Status	2d_canvas: enabled checker_imaging: disabled_off flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: enabled rasterization: enabled video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled
Load (avg)	2, 2, 2
Memory (System)	16.00GB (2.19GB free)
Process Argv
Screen Reader	no
VM	0%

Extensions (4)

Extension	Author (truncated)	Version
vscode-eslint	dba	1.6.1
EditorConfig	Edi	0.12.5
vscode-styled-components	jpo	0.0.22
material-icon-theme	PKi	3.6.0

[ramya-rao-a]

What is the type of file you are working with? js or jsx?

If js, then you need to add the below in your settings

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
}

See https://code.visualstudio.com/docs/editor/emmet#_emmet-abbreviations-in-other-file-types

[ArturKp]

I have tried all the variations of *.js and *.jsx together with (and without) includeLanguages setting. Expanding doesn't work inside a function like provided above in neither of the variations.

Just to be sure just now tried again with the setting you provided with both *.js and *.jsx. And tried the same in the Insiders version of VSCode without success.

But again, wouldn't it make more sense, if the "Emmet: Expand Abbreviation" from the menu works regardless of the filetype and the chosen syntax. I mean in that case it is explicitly selected from the menu or assigned a keybinding to anyway.

[ramya-rao-a]

I see that Emmet works after the pre line but not before. Can you confirm you see the same?

Working after the pre line

Not working before the pre line

[ramya-rao-a]

@octref The problem must be in the isValidLocationForEmmetAbbreviation function

[ArturKp]

@ramya-rao-a Seems to be that there are multiple sides to consider for this issue:

1. Autocomplete suggestions show up like you described
2. "Expand abbreviation" (menu / shortcut) still doesn't work even if it shows up as a suggestion

In the example above, I get a suggestion for "div" where you described and can expand it from the suggestions menu. But at the same time the "expand abbreviation" (or the shortcut assigned to it) doesn't do anything.

---

I still think it would be better and more correct if the "Expand abbreviation" (Menu & shortcut) works always regardless of the the file or location it's used. On the other hand for suggestions it's important to check the validness. But in case it's not that easy to differentiate between different use cases, may I suggest creating a new configuration option which would disable the check altogether:

"emmet.validateAbbreviationLocation": false

I'm guessing that there are other developers like me who have disabled all emmet suggestions but would like to evoke expanding with a keyboard shortcut. By disabling the validness check it would always work. Would be better of course if the check would automatically be ignored if the command is ran by a shortcut or from the menu.

[ramya-rao-a]

Thanks for the clarification @ArturKp

I can confirm your findings of Emmet: Expand Abbreviation not working inside the inline render function, regardless of whether we are on the line above or below the pre tag.

This is definitely a bug.

@octref Can we include this issue for the current milestone?

[octref]

Don't think this is easily fixable:

• This returns false
• We seem to support emmet inside tags, but not inside tag attribute values

[ramya-rao-a]

We seem to support emmet inside tags, but not inside tag attribute values

Yes, that is intentional. Otherwise we end up with emmet suggestions when typing tag attributes which in the proper HTML scenario is not what we want.

This goes back to the fact that an extension that better understands jsx, is better equipped to provide emmet suggestions than the built in emmet which is only familar and parses html

[kylegillen]

So has there been any progress, or a workaround for this?