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}"
Features
| Feature |
Description |
| Auto-conversion |
Converts quotes to backticks when typing ${} |
| Smart Revert |
Automatically reverts backticks to quotes when $ or { is removed |
| 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 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)
Commands
Quotick: Toggle Auto-Convert - Enable/disable automatic conversionQuotick: Test Conversion - Manually test conversion on current documentQuotick: Toggle Revert Feature - Enable/disable smart revert functionality
Configuration
{
"quotick.enableAutoConvert": true,
"quotick.showNotifications": true,
"quotick.autoRemoveTemplateString": true,
"quotick.supportedLanguages": [
"javascript",
"typescript",
"javascriptreact",
"typescriptreact"
]
}
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
