EVC Language Support

VS Code extension providing syntax highlighting for EVC (Embedded View Components) files.

Features

• Syntax highlighting for ERB tags (<% %>, <%= %>, <%# %>)
• JSX-like attribute syntax support (prop={value})
• Nested bracket matching for arrays and hashes
• HTML tag completion via Emmet
• Auto-closing pairs for brackets and ERB tags
• Proper folding for ERB blocks

Installation

From VSIX

1. Download the latest evc-language-x.x.x.vsix from releases
2. Open VS Code
3. Press Cmd+Shift+P (macOS) or Ctrl+Shift+P (Windows/Linux)
4. Type "Extensions: Install from VSIX..."
5. Select the downloaded .vsix file
6. Reload VS Code when prompted

From Source

git clone https://github.com/[username]/evc-language-support.git
cd evc-language-support
npm install -g vsce
vsce package
code --install-extension evc-language-*.vsix

Usage

Open any .evc file and you'll see "EVC" in the language selector (bottom right of VS Code). The extension provides proper syntax highlighting for the hybrid ERB/JSX syntax used in EVC files.

Example EVC File

<Table as="table"
  turbo_frame_name="users"
  column_widths={[30, 20, 20, 30]}
  pagy={pagy}>
  
  <% table.with_headers([
    { text: "Name", sort_by: "name", default: true },
    { text: "Status" }
  ]) %>

  <% users.each do |user| %>
    <% table.with_row do |row| %>
      <% row.with_columns([
        { text: user.name, path: user_path(user) },
        { text: user.status }
      ]) %>
    <% end %>
  <% end %>
</Table>

Supported Syntax

• ERB tags: <% %>, <%= %>, <%# %>
• JSX attributes: prop={value}, data={array}
• Nested structures: {[1, 2, {key: value}]}
• Ruby expressions: Method calls, symbols, operators
• HTML attributes: class="value", id="element"

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test the extension
5. Submit a pull request

Development

git clone https://github.com/[username]/evc-language-support.git
cd evc-language-support
# Make changes to syntaxes/evc.tmLanguage.json
vsce package
# Test the generated .vsix file

License

MIT License - see LICENSE file for details.