User Snippets

Code snippets are reusable pieces of code that can be quickly inserted into your files. ThinkCode's user snippets feature allows you to create custom snippets to accelerate your coding workflow and maintain consistency in your projects.

Understanding Snippets

Snippets in ThinkCode provide a powerful way to:

• Insert common code patterns quickly
• Standardize code structure across a team
• Reduce repetitive typing
• Enforce best practices
• Document code templates

Accessing Snippets

ThinkCode offers multiple ways to access and manage snippets:

1. Command Palette:

   • Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS)
   • Search for "Snippets: Configure User Snippets"

2. Settings Menu:

   • Navigate to Settings (gear icon) → User Snippets

3. Keyboard Shortcut:

   • Default: Ctrl+Shift+S (Windows/Linux) or Cmd+Shift+S (macOS)
   • This can be customized in keyboard settings

Snippet Scope

ThinkCode supports several scope levels for snippets:

• Global snippets: Available in all file types
• Language-specific snippets: Only available for specific languages
• Project snippets: Limited to a specific workspace
• Extension snippets: Provided by installed extensions

Creating Snippets

Using the Snippet Editor

1. Open the Command Palette and search for "Snippets: Configure User Snippets"
2. Choose a language or "New Global Snippets file"
3. Use the snippet editor to create your snippet:

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "interface ${1:ComponentName}Props {",
      "  ${2:propName}: ${3:propType};",
      "}",
      "",
      "export function ${1:ComponentName}({ ${2:propName} }: ${1:ComponentName}Props) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}",
      ""
    ],
    "description": "Creates a React functional component with TypeScript props"
  }
}

Snippet Syntax

• Name: A descriptive name for your snippet (e.g., "React Functional Component")
• Prefix: The text you type to trigger the snippet (e.g., "rfc")
• Body: An array of strings representing each line of the snippet
• Description: A helpful explanation of what the snippet does

Snippet Variables

ThinkCode supports dynamic variables in snippets:

Using AI to Generate Snippets

ThinkCode integrates AI capabilities to help you create snippets:

1. Select code you want to convert to a snippet
2. Right-click and select "AI: Create Snippet from Selection"
3. The AI will generate a snippet with appropriate tabstops and descriptions
4. Review and customize the generated snippet

Using Snippets

Once defined, snippets can be used in several ways:

1. Type the prefix and press Tab to expand the snippet
2. IntelliSense: Start typing and select the snippet from the suggestion list
3. Command Palette: Search for "Insert Snippet"
4. Right-click menu: Select "Insert Snippet" from the context menu

After insertion, you can navigate through tabstops using the Tab key.

Advanced Snippet Techniques

Multi-line Snippets

For multi-line snippets, use the array format:

"Console Log Object": {
  "prefix": "clo",
  "body": [
    "console.log('${1:object}:', {",
    "  ${1:object},",
    "  ${2:additionalProperties}",
    "});$0"
  ],
  "description": "Console log an object with its variable name"
}

Nested Snippets

Combine snippets for complex patterns:

"API Service Class": {
  "prefix": "apiservice",
  "body": [
    "class ${1:ResourceName}Service {",
    "  ${2:// Base URL}",
    "  private baseUrl = '${3:api/v1}/${4:resource}';",
    "",
    "  async getAll() {",
    "    ${5:// Get all resources}",
    "    const response = await fetch(this.baseUrl);",
    "    return response.json();",
    "  }",
    "",
    "  async getById(id: string) {",
    "    ${6:// Get resource by ID}",
    "    const response = await fetch(`${this.baseUrl}/${id}`);",
    "    return response.json();",
    "  }",
    "",
    "  async create(data: ${7:I$1}) {",
    "    ${8:// Create new resource}",
    "    const response = await fetch(this.baseUrl, {",
    "      method: 'POST',",
    "      headers: {",
    "        'Content-Type': 'application/json',",
    "      },",
    "      body: JSON.stringify(data),",
    "    });",
    "    return response.json();",
    "  }",
    "",
    "  $0",
    "}",
    ""
  ],
  "description": "Creates a complete API service class with CRUD methods"
}

Transformations

Apply transformations to variables:

"Export Function": {
  "prefix": "expfn",
  "body": [
    "export function ${1:functionName}($2) {",
    "  ${0:// Implementation}",
    "}",
    "",
    "export function ${1/(.*)/${1:/pascalcase}/}Container($2) {",
    "  return <${1/(.*)/${1:/pascalcase}/} />;",
    "}"
  ],
  "description": "Export a function with related container component"
}

Available transformations:

• /upcase: Convert to uppercase
• /downcase: Convert to lowercase
• /capitalize: Capitalize first letter
• /pascalcase: Convert to PascalCase
• /camelcase: Convert to camelCase
• /kebabcase: Convert to kebab-case
• /snakecase: Convert to snake_case

Sharing Snippets

Exporting Snippets

To share snippets with others:

1. Manual Export:

   • Locate snippet files in ~/.thinkcode/snippets/
   • Share the JSON files directly

2. Using ThinkCode Profiles:

   • Include snippets in your Settings Profile
   • Export and share the profile

Importing Snippets

To use snippets from others:

1. Save the received snippet file to ~/.thinkcode/snippets/
2. Restart ThinkCode or reload window
3. Alternatively, copy-paste into your existing snippet file

Team Snippets

For team-wide snippets:

1. Create a .thinkcode/snippets/ folder in your project root
2. Add snippet files there
3. These snippets will be available to anyone who opens the project

Snippet Management

As your collection of snippets grows, consider these management practices:

1. Organize by Category: Create separate files for different types of snippets

2. Use Clear Naming Conventions:

   • Use consistent prefixes for related snippets
   • Include the type in the name (e.g., "Component - Basic")

3. Document Usage: Add detailed descriptions to all snippets

4. Regular Cleanup: Periodically review and remove outdated snippets

5. Version Control: Store important snippets in your dotfiles repository

AI-Enhanced Snippets

ThinkCode offers unique AI capabilities to enhance your snippets:

1. Dynamic Context-Aware Snippets:

   • Snippets that adapt based on the surrounding code
   • AI-powered parameter suggestions

2. Natural Language Snippet Activation:

   • Describe what you need in a comment
   • AI generates appropriate code

3. Snippet Learning:

   • ThinkCode learns from your coding patterns
   • Suggests new snippets based on repeated code

To enable these features, configure AI snippets in settings:

{
  "ai.snippets.enabled": true,
  "ai.snippets.learning": "active",
  "ai.snippets.contextAwareness": "high"
}

Best Practices

1. Start Small: Create snippets for your most frequently typed code patterns
2. Be Consistent: Use naming conventions that make snippets easy to remember
3. Add Placeholders: Use tabstops for customizable parts
4. Update Regularly: Refine snippets as your coding style evolves
5. Include Comments: Add explanatory comments in your snippets
6. Keep It Simple: Focus on smaller, composable snippets rather than very complex ones

Troubleshooting

If you encounter issues with snippets:

1. Snippets Not Appearing:

   • Check file type/language association
   • Verify snippet syntax in the JSON file
   • Restart ThinkCode

2. Snippet Format Issues:

   • Ensure JSON is valid (no trailing commas)
   • Check that escape sequences are correct
   • Verify that arrays are properly formatted

3. Conflicts:

   • Look for duplicate prefixes across files
   • Check for extension conflicts
   • Adjust snippet scope as needed

For more snippet features and advanced techniques, refer to the ThinkCode API documentation.