akcodeworks / react-emmet Goto Github PK

Feature Request: Enhanced Cursor Placement for useState and useEffect Snippets

Description

When generating snippets for useState and useEffect using the Actual React Emmet extension, it would significantly enhance the developer experience if the cursor were automatically positioned within the snippet's editable area. Specifically, for useState, the cursor should be inside the parentheses to quickly set the initial value. For useEffect, it should be inside the code block to immediately write the effect's logic.

Expected Behavior

• useState: After triggering a useState snippet (e.g., usestate.counter), the cursor should be placed inside the parentheses of useState(), allowing the user to immediately type the initial state value.
• useEffect: For useEffect snippets, including both synchronous and asynchronous (e.g., useeffect.loadData or useeffect.loadData.async), the cursor should be placed inside the effect's function body, ready for the developer to start typing the logic.

This feature request aims to streamline the coding workflow, reducing the need for additional keystrokes or mouse clicks to navigate to the correct position in the snippet. It aligns with the goal of the Actual React Emmet extension to enhance productivity and ease of use.

PS I know I am opening an issue on my own codebase...i just don't want to forget about this.

## 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 (
    <></>
  );
}

## Description

I'd like to have a snippet where I can generate functional/class components.

Specification

cc.<ComponentName>[props]

class <ComponentName> extends React.Component {
  render() {
    return null;
  }
}

type <ComponentName>Props = {
  [...props]
}

class <ComponentName> extends React.Component<<ComponentName>Props> {
  render() {
    return null;
  }
}

fc.<ComponentName>[props]

const <ComponentName> = ({ [...props] }) => {
  return null;
}

type <ComponentName>Props = {
  [...props]
}

const <ComponentName> = ({ [...props] }: <ComponentName>Props) => {
  return null;
}

Configuration options

"actual-react-emmet.componentStyle": 'function' | 'const'

Whether the component should be written using const or function, e.g.

// using `function` as option
function MyComponent() {}

// using `const` as option
const MyComponent = () => {}

"actual-react-emmet.componentPropsStyle": 'interface' | 'type' | 'inline'

Whether it should use an interface or type for the component props, e.g.

// using `interface` as option
interface MyComponentProps { ... }
function MyComponent({...}: MyComponentProps) {}

// using `type` as option
type MyComponentProps = { ... }
const MyComponent = ({...}: MyComponentProps) => {}

// using `inline` as option
function MyComponent({ name }: {name: string}) {}

Examples

// Command
fc.MyComponent[name]

// Result
const <ComponentName> = ({ name }) => {
  return null;
}

// Command
fc.Person[name: string; id: number; address?: { zip: number; street: string }]

// Result
type PersonProps = {
  name: string;
  id: number;
  address?: {
    zip: number;
    street: string;
  }
}

const Person = ({ name: string; id: number; address }): PersonProps) => {
  return null;
}