jnk

This VSCode extension is a tool for generating JSX using concise Emmet-style syntax. It's like Emmet, but for React.

Usage

Method 1: Autocomplete (IntelliSense)

1. Open a .js, .ts, .jsx or .tsx file
2. Type jnk syntax on a line (e.g., div.container>h1{Hello}+p{World})
3. Press Cmd+Shift+J (Mac) or Ctrl+Shift+J (Windows/Linux) or trigger IntelliSense to show autocomplete
4. Select "Compile with jnk" from the menu
5. The entire line will be replaced with compiled JSX

Method 2: Keyboard Shortcut (Recommended)

1. Open a .jsx or .tsx file
2. Type jnk syntax on a line (e.g., div.container>h1{Hello}+p{World})
3. Press Cmd+Shift+J (Mac) or Ctrl+Shift+J (Windows/Linux)
4. The entire line will be replaced with compiled JSX instantly

Example Transformations

// Input jnk syntax:
div.container>h1{Hello}+p{World}

// Output JSX:
<div className="container">
  <h1>Hello</h1>
  <p>World</p>
</div>

// Input jnk syntax:
Button.primary[onClick={handleClick}]{Save}

// Output JSX:
<Button className="primary" onClick={handleClick}>Save</Button>

Supported jnk Syntax

• div.class - Element with className
• div#id - Element with id
• div[prop=value] - Element with string props
• div[prop={expression}] - Element with JS expression props
• div{content} - Element with text content
• div>{expression} - Element with JS expression content
• div>child - Parent-child relationship
• div+sibling - Sibling elements
• div*3 - Multiply elements
• div*{expression} - Expression multiplication (like map)
• (div+p)*2 - Grouped elements
• div$ - Numbering placeholder (div1, div2, etc.)

Features

• Smart Detection: Automatically detects jnk syntax patterns in JSX/TSX files
• Keyboard Shortcut: Cmd+Shift+J (Mac) / Ctrl+Shift+J (Windows/Linux) for instant compilation
• Autocomplete Integration: Shows "Compile with jnk" option in IntelliSense menu
• Instant Compilation: Replaces jnk syntax with compiled JSX
• Error Handling: Shows helpful error messages if jnk compilation fails

Installation

For Development/Testing:

1. Clone or download this extension
2. Run npm install to install dependencies
3. Run npm run compile to build the extension
4. Press F5 in VSCode to launch Extension Development Host
5. Open a .jsx or .tsx file in the new window to test

For Production Use:

1. Install vsce globally: npm install -g vsce
2. Package the extension: vsce package
3. Install the generated .vsix file in VSCode: code --install-extension jnk-autocomplete-0.0.1.vsix

Development

npm install
npm run compile
npm run watch  # For continuous compilation during development

Requirements

• VSCode 1.74.0 or higher
• The jnk npm package is bundled with the extension

Known Issues

• The extension currently replaces the entire line. Future versions may support inline compilation.

Contributing

Contributions are welcome. Please keep code clean and follow best practices.

License

MIT © Janko Stanic