AutoBacktick

A VS Code extension that automatically converts quotes to backticks when typing template literals and reverts back when template syntax is removed.

What it does

Type this:

const message = "Hello ${name}";
const greeting = 'Welcome ${user}!';

AutoBacktick automatically converts it to:

const message = `Hello ${name}`;
const greeting = `Welcome ${user}!`;

Smart Revert Feature - When you remove $ or { from template literals, AutoBacktick automatically reverts back to quotes:

// Start with: `Hello ${name}`
// Delete $: `Hello {name}` → automatically becomes "Hello {name}"
// Delete {: `Hello $name}` → automatically becomes "Hello $name}"

Svelte Support - Works seamlessly with Svelte components, only triggering within <script> tags:

<script lang="ts">
  let name: string = "world";
  const message = "Hello ${name}!"; // ← Converts to backticks
</script>

<div>
  <h1>Hello {name}!</h1> <!-- ← Won't trigger here -->
</div>

JSX/TSX Attribute Support - Automatically converts backtick-wrapped JSX attributes with interpolation to proper JSX format:

// Before
<div className=`flex ${value}`></div>

// After (automatic conversion)
<div className={`flex ${value}`}></div>

Real-time JSX conversion:

• Type ${ inside backticks → automatically converts to {backticks}
• Type } to complete interpolation → triggers conversion
• Works for any JSX attribute: className, id, src, etc.

Features

• Auto-conversion: Converts quotes to backticks when typing ${}
• Smart Revert: Automatically reverts backticks to quotes when $ or { is removed
• JSX Attribute Support: Converts backtick-wrapped JSX attributes to {backticks} format
• Smart detection: Only converts strings with template literal syntax
• Context aware: Skips comments, imports, and invalid contexts
• Multi-language: Works with JS, TS, JSX, TSX, and Svelte files
• Real-time: Converts as you type
• Bidirectional: Works both ways - quotes ↔ backticks
• Configurable: Enable/disable and customize behavior

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "AutoBacktick"
4. Click Install

Supported Languages

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• Svelte (.svelte) - Only triggers within <script> tags, not in HTML template parts

Commands

• AutoBacktick: Toggle Auto-Convert - Enable/disable automatic conversion
• AutoBacktick: Test Conversion - Manually test conversion on current document
• AutoBacktick: Toggle Revert Feature - Enable/disable smart revert functionality
• AutoBacktick: Wrap JSX Attributes - Manually wrap JSX attributes with braces when interpolation is detected
• AutoBacktick: Debug JSX Detection - Debug JSX attribute detection at current cursor position
• AutoBacktick: Test JSX Backtick Conversion - Test JSX backtick-to-brace conversion at current position

Configuration

{
  "quotick.enableAutoConvert": true,
  "quotick.showNotifications": true,
  "quotick.autoRemoveTemplateString": true,
  "quotick.supportedLanguages": [
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact",
    "svelte"
  ]
}

Development

Prerequisites

• Node.js (v16 or higher)
• npm (v8 or higher)
• VS Code (v1.74 or higher)

Setup

1. Clone the repository:

   git clone https://github.com/btwit/autobacktick.git
   cd autobacktick
   

2. Install dependencies:

   npm install
   

3. Compile TypeScript:

   npm run compile
   

4. Run in development mode:

   • Press F5 in VS Code
   • A new Extension Development Host window will open
   • Test your changes in this window

Testing

npm test          # Run all tests
npm run lint      # Run linting

License

Apache 2.0