https://github.com/kartiklabhshetwar/quotick
Automatically convert quotes to backticks when typing template literals
https://github.com/kartiklabhshetwar/quotick
auto autocorrect javascript string template typescript
Last synced: 2 months ago
JSON representation
Automatically convert quotes to backticks when typing template literals
- Host: GitHub
- URL: https://github.com/kartiklabhshetwar/quotick
- Owner: KartikLabhshetwar
- License: apache-2.0
- Created: 2025-10-20T03:03:00.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-12-07T09:21:41.000Z (6 months ago)
- Last Synced: 2026-02-15T07:19:27.145Z (4 months ago)
- Topics: auto, autocorrect, javascript, string, template, typescript
- Language: TypeScript
- Homepage: https://quotick.vercel.app/
- Size: 12.8 MB
- Stars: 42
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Quotick
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:
```javascript
const message = "Hello ${name}";
const greeting = 'Welcome ${user}!';
```
Quotick automatically converts it to:
```javascript
const message = `Hello ${name}`;
const greeting = `Welcome ${user}!`;
```
**Smart Revert Feature** - When you remove `$` or `{` from template literals, Quotick automatically reverts back to quotes:
```javascript
// 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 `` tags:
```svelte
<script lang="ts">
let name: string = "world";
const message = "Hello ${name}!"; // ← Converts to backticks
Hello {name}!
```
**JSX/TSX Attribute Support** - Automatically converts backtick-wrapped JSX attributes with interpolation to proper JSX format:
```tsx
// Before
// After (automatic conversion)
```
**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
1. Open VS Code
2. Go to Extensions (`Ctrl+Shift+X` / `Cmd+Shift+X`)
3. Search for "Quotick"
4. Click Install
## Supported Languages
- JavaScript (`.js`)
- TypeScript (`.ts`)
- JavaScript React (`.jsx`)
- TypeScript React (`.tsx`)
- **Svelte (`.svelte`)** - Only triggers within `` tags, not in HTML template parts
## Commands
- `Quotick: Toggle Auto-Convert` - Enable/disable automatic conversion
- `Quotick: Test Conversion` - Manually test conversion on current document
- `Quotick: Toggle Revert Feature` - Enable/disable smart revert functionality
- `Quotick: Wrap JSX Attributes` - Manually wrap JSX attributes with braces when interpolation is detected
- `Quotick: Debug JSX Detection` - Debug JSX attribute detection at current cursor position
- `Quotick: Test JSX Backtick Conversion` - Test JSX backtick-to-brace conversion at current position
## Configuration
```json
{
"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:**
```bash
git clone https://github.com/KartikLabhshetwar/quotick.git
cd quotick
```
2. **Install dependencies:**
```bash
npm install
```
3. **Compile TypeScript:**
```bash
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
```bash
npm test # Run all tests
npm run lint # Run linting
```
## License
[Apache 2.0](LICENSE)