react-emmet icon indicating copy to clipboard operation
react-emmet copied to clipboard

Add support for nesting operators

Open BrunnerLivio opened this issue 2 years ago • 1 comments

## Description

This is a follow-up for #3. Emmet supports different kinds of Nesting operators. It would be a match made in heaven to have this supported in this vs code extension as well!

Read more

Specification

Child: >

fc.MyComponent>useState.firstName

would produce:

const MyComponent = () => {
  const [firstName, setFirstName] = useState();

  return (
    <></>
  );
}

Sibling: +

fc.MyComponent>useState.firstName+useState.lastName

would produce:

const MyComponent = () => {
  const [firstName, setFirstName] = useState();
  const [lastName, setLastName] = useState();

  return (
    <></>
  );
}

Climb-up: ^

fc.MyComponent>useState.firstName^fc.AnotherComponent

would produce:

const MyComponent = () => {
  const [firstName, setFirstName] = useState();

  return (
    <></>
  );
}

const AnotherComponent = () => {
  return (
    <></>
  );
}

BrunnerLivio avatar Jan 28 '24 21:01 BrunnerLivio

Also note, looking through the code base the approach would certainly need to be different. I think this feature would require to move away from using Regex as a parser and move to an actual language parser.

BrunnerLivio avatar Jan 28 '24 21:01 BrunnerLivio