Dot Anything

中文文档

Highlights

⭐ Type what you think, the moment you think it.

            ╭──────────────────────────╮
            │ 💭 Want to output name?  │
            ╰──────────┬───────────────╯
                       ○
                      ○
                  {\_/}
                  ( •.•)
                  / >

   😫 Traditional Snippet               😊 Dot Anything
      {\_/}                                {\_/}
      ( -_-)  name → clg → name            ( ^.^)  name.log
      / >     🔄 Context switch ×2         / >     ✨ Zero interruption

⭐ Not just template substitution — programmable snippets.

            ╭───────────────────────────────────────╮
            │ 💭 What if snippets had functions?    │
            ╰──────────┬────────────────────────────╯
                       ○
                      ○
                  {\_/}
                  ( •.•)
                  / >

   📦 VS Code Snippets                   🚀 Dot Anything
      {\_/}                                {\_/}
      ( -_-)  key → template → code        ( ^.^)  key → fn(env):template → code
      / >     📋 Static                    / >     🧩 Programmable = ∞

Press . to transform text into anything. Not just template substitution — supports JavaScript functions for programmable snippets.

Table of Contents

• Quick Start
• Configuration — Rule properties, text mode, function mode
• Template Syntax — Environment variables, format functions
• Advanced Features — Cursor placeholders, replace mode, pattern matching, file type filter
• Custom Functions
• Debug & Development

Quick Start

{
    "dot-anything.rules": [
        {
            "trigger": "log",
            "description": "Insert console.log (with file location)",
            "snippet": "console.log('🖨️ #filePath#[#lineNumber#:#column#] #word^toKebabCase#:', #word#);"
        }
    ]
}

console.log('🖨️ /home/demo.js[15:12] hello-world:', HelloWorld);

→ More common configurations

Configuration

Configure dot-anything.rules in VS Code settings. Each rule has the following properties:

⚠️ Setting this will override the default rules. See Default Rules to copy them back.

text Mode (Default)

Use #variable^formatFunction# placeholder syntax:

{
    "trigger": "log",
    "description": "Insert console.log",
    "fileType": ["javascript", "typescript"],
    "snippet": "console.log('#word^toUpperCase#', #word#)"
}

function Mode

Use JavaScript arrow functions for complex transformations:

{
    "trigger": "log",
    "description": "Insert console.log with file info",
    "type": "function",
    "snippet": "(env, { fns }) => `console.log('[${env.fileName}:${env.lineNumber}] ${fns.toUpperCase(env.word)}:', ${env.word})`"
}

console.log('[demo:23] ABC:', abc)

{
    "trigger": "getter",
    "description": "Generate getter/setter methods",
    "type": "function",
    "snippet": [
        "(env, { fns }) => `\\",
        "{",
        "    _${env.word}: 1,",
        "    get ${fns.toPascalCase(env.word)}() {",
        "        return this._${env.word};",
        "    },",
        "    set ${fns.toPascalCase(env.word)}(v) {",
        "        this._${env.word} = v;",
        "    }",
        "}`"
    ]
}

{
    _abc: 1,
    get Abc() {
        return this._abc;
    },
    set Abc(v) {
        this._abc = v;
    }
}

Template Syntax

Environment Variables

Referenced via #variableName# in text mode, or env.variableName in function mode.

(Built-in) Format Functions

Used via ^functionName suffix in text mode (e.g., #word^toUpperCase#), or fns.functionName() in function mode.

Advanced Features

Cursor Placeholder (Tab Jump)

Use #✏️# syntax in snippets to define editable positions with Tab navigation and automatic format conversion.

Syntax: #✏️<index>^<modifier>-<comment>#

{
    "trigger": "const",
    "description": "Generate const declaration",
    "snippet": "const #✏️1^toUpperCase-name# = #✏️2-value#;"
}

{
    "dot-anything.rules": [
        {
            "trigger": "cases",
            "description": "Show multiple naming styles",
            "snippet": "camel: #✏️1^toCamelCase#, hook: #✏️1^reactHook#"
        }
    ],
    "dot-anything.fns": [
        {
            "name": "reactHook",
            "fn": "(s = '', { fns }) => `use${fns.toUpperCaseFirst(s)}`"
        }
    ]
}

camel: helloWorld
hook: useHello world

Note: Placeholders with the same index share the same default value (VS Code limitation), but each position can have a different modifier, applied separately when leaving.

Replace Mode (replaceMode)

Control the scope of text replaced when a completion is accepted:

{
    "trigger": "//",
    "description": "Comment out the whole line",
    "pattern": "",
    "replaceMode": "line",
    "snippet": "// #lineText#"
}

// abc def

The formatted result is unchanged regardless of replaceMode. Only the replacement range changes. Default is word, fully backwards-compatible.

Pattern Matching (pattern)

By default, rules match non-whitespace text before . ((\S+)$). Use pattern to customize the trigger regex per rule.

Empty pattern — trigger without input: Set "pattern": "" to trigger by just typing ..

{
    "trigger": "px",
    "description": "Convert number to px",
    "pattern": "(\\d+)$",
    "snippet": "#word#px"
}

{
    "trigger": "swap",
    "description": "Swap two words",
    "pattern": "(\\w+)\\s+(\\w+)$",
    "snippet": "#match.2# #match.1#"
}

Access capture groups via match:

File Type Filter (fileType)

Limit rules to specific languages:

{
    "trigger": "print",
    "description": "Insert print",
    "fileType": ["python"],
    "snippet": "print('#word#', #word#)"
}

Common identifiers: * (all), javascript, typescript, python, java, go, rust, html, css, json, markdown — Full list

Custom Functions

Configure custom formatting functions via dot-anything.fns, available in both text and function modes:

{
    "dot-anything.fns": [
        {
            "name": "prefix",
            "fn": "(s) => 'prefix_' + s"
        },
        {
            "name": "wrap",
            "fn": "(s, { fns }) => `{{${fns.toUpperCase(s)}}}`"
        }
    ]
}

{
    "trigger": "prefix",
    "description": "Add prefix",
    "snippet": "#word^prefix#"
}

{
    "dot-anything.rules": [
        {
            "trigger": "hook",
            "type": "function",
            "description": "Generate React Hook name",
            "snippet": "(env, o) => o.fns.reactHook(env.word, o)"
        }
    ],
    "dot-anything.fns": [
        {
            "name": "reactHook",
            "fn": "(s, { fns }) => `use${fns.toUpperCaseFirst(s)}`"
        }
    ]
}

Note: When calling custom functions in function mode, you must pass through the second parameter o (containing fns), otherwise the custom function cannot access built-in functions internally. Custom functions override built-in functions with the same name.

Debug & Development

Debug mode:

{ "dot-anything.debug": true }

Requirements: Node.js 22.x, VS Code 1.103.0+

npm run compile    # Development build
npm run watch      # Watch mode
npm run package    # Production build
npm test           # Run tests

Press F5 to launch Extension Development Host for debugging.

License

See LICENSE.txt.

Feedback & Contributing

• Issues: GitHub Issues
• Sponsor: GitHub Sponsors