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}!';
Quotick automatically converts it to:
const message = `Hello ${name}`;
const greeting = `Welcome ${user}!`;
Smart Revert Feature - When you remove $ or { from template literals, Quotick 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
| Feature |
Description |
| 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
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Search for "Quotick"
- 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
Quotick: Toggle Auto-Convert - Enable/disable automatic conversionQuotick: Test Conversion - Manually test conversion on current documentQuotick: Toggle Revert Feature - Enable/disable smart revert functionalityQuotick: Wrap JSX Attributes - Manually wrap JSX attributes with braces when interpolation is detectedQuotick: Debug JSX Detection - Debug JSX attribute detection at current cursor positionQuotick: 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
Clone the repository:
git clone https://github.com/KartikLabhshetwar/quotick.git
cd quotick
Install dependencies:
npm install
Compile TypeScript:
npm run compile
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
