Personalizing ThinkCode

ThinkCode is designed to be highly customizable, allowing you to adapt the editor to your personal preferences and workflow. This guide covers the essential customization options to help you create your ideal development environment.

Accessing Settings

There are several ways to access ThinkCode's settings:

Command Palette: Press Ctrl+Shift+P (Cmd+Shift+P on macOS) and type "Preferences: Open Settings"
Menu: Click on File > Preferences > Settings
Keyboard Shortcut: Press Ctrl+, (Cmd+, on macOS)

The settings interface has two main views:

UI View: A user-friendly interface with searchable settings organized by category
JSON View: Direct editing of the settings JSON file for advanced users

Visual Customization

Themes

ThinkCode includes several built-in themes and supports custom themes from extensions.

Changing Color Theme

Open Settings
Navigate to Appearance > Color Theme
Select from available options:
- Dark+ (default dark theme)
- Light+ (default light theme)
- High Contrast
- Monokai
- Solarized Dark
- Solarized Light
- And many others

You can also change the theme through the Command Palette:

Press Ctrl+Shift+P (Cmd+Shift+P on macOS)
Type "Color Theme"
Select "Preferences: Color Theme"
Choose from the list of available themes

Installing Additional Themes

Open the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
Search for "theme"
Browse and install themes from the marketplace
Apply the new theme as described above

File Icon Themes

Customize how file icons appear in the explorer:

Open Settings
Navigate to Appearance > File Icon Theme
Select from available options:
- ThinkIcons (default)
- Minimal
- VS Code Icons
- Material Icon Theme (if installed)
- And others from extensions

Product Icon Themes

Change the appearance of UI icons:

Open Settings
Navigate to Appearance > Product Icon Theme
Select from available options

Editor Appearance

Customize the text editor's appearance:

Font Settings

{
  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.fontWeight": "normal",
  "editor.fontLigatures": true,
  "editor.lineHeight": 24
}

Editor Layout

{
  "editor.minimap.enabled": true,
  "editor.minimap.side": "right",
  "editor.renderLineHighlight": "all",
  "editor.rulers": [80, 120],
  "editor.scrollBeyondLastLine": true,
  "editor.cursorBlinking": "smooth",
  "editor.renderWhitespace": "boundary"
}

Workspace Layout

Panel Positions

Change where panels appear in the interface:

Open Settings
Navigate to Appearance > Panel Position
Choose from:
- Bottom (default)
- Right
- Left

Move the side bar to the right side of the window:

{
  "workbench.sideBar.location": "right"
}

Activity Bar

Hide or show the activity bar:

{
  "workbench.activityBar.visible": true
}

Editor Groups

Configure how multiple editors are arranged:

Open Settings
Navigate to Workbench > Editor: Group Layout
Choose from:
- Grid (default)
- Horizontal
- Vertical

Editor Behavior

Tab Settings

Customize how tabs work:

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": true,
  "editor.renderFinalNewline": true,
  "editor.wordWrap": "off"
}

Auto Save

Configure auto-saving behavior:

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000
}

Options include:

"off": No auto save
"afterDelay": Save after a delay
"onFocusChange": Save when focus leaves the editor
"onWindowChange": Save when the window loses focus

Format On Save

Enable automatic formatting when saving:

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true
  }
}

Line Numbers

Customize line number display:

{
  "editor.lineNumbers": "on"
}

Options include:

"on": Show line numbers (default)
"off": Hide line numbers
"relative": Show line numbers relative to cursor position
"interval": Show line numbers at intervals

Keyboard Shortcuts

Viewing Keyboard Shortcuts

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Type "Keyboard Shortcuts"
Select "Preferences: Open Keyboard Shortcuts"

Customizing Shortcuts

To change a shortcut:

Find the command you want to modify
Click on the pencil icon or click directly on the keybinding
Press the new key combination
Press Enter to save

Creating Custom Keybindings

For advanced customization, edit the keybindings.json file directly:

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Type "Open Keyboard Shortcuts (JSON)"
Add custom keybindings in JSON format:

[
  {
    "key": "ctrl+shift+a",
    "command": "think.explainSelection",
    "when": "editorHasSelection"
  },
  {
    "key": "ctrl+shift+d",
    "command": "think.documentSelection",
    "when": "editorHasSelection"
  }
]

AI Customization

ThinkCode offers extensive customization for its AI features:

AI Model Selection

Choose between different AI models:

Open Settings
Navigate to Think > AI > Model
Select from available models:
- Think Standard (default)
- Think Small (faster, less powerful)
- Think Advanced (more capabilities, slower)
- Local Models (if supported on your system)

Code Suggestion Behavior

Configure how code suggestions appear:

{
  "think.suggestions.enabled": true,
  "think.suggestions.mode": "inline",
  "think.suggestions.frequency": "medium",
  "think.suggestions.delay": 300,
  "think.suggestions.languages": {
    "typescript": true,
    "javascript": true,
    "python": true
    // other languages...
  }
}

Options for think.suggestions.mode:

"inline": Show suggestions directly in the editor
"ghost": Show suggestions as ghost text
"panel": Show suggestions only in the Think Panel

Options for think.suggestions.frequency:

"high": More frequent suggestions
"medium": Balanced approach (default)
"low": Fewer suggestions
"manual": Only when explicitly requested

Think Panel Customization

Customize the Think Panel:

{
  "think.panel.defaultLocation": "right",
  "think.panel.width": 400,
  "think.panel.defaultOpen": false,
  "think.panel.showLineReferences": true
}

Context Size Configuration

Control how much code the AI considers:

{
  "think.context.scope": "workspace",
  "think.context.maxFiles": 10,
  "think.context.includeComments": true
}

Options for think.context.scope:

"file": Only consider the current file
"directory": Consider files in the same directory
"workspace": Consider relevant files across the workspace (default)

AI Roles Customization

Configure and create AI roles:

{
  "think.roles.default": "assistant",
  "think.roles.custom": [
    {
      "name": "Security Reviewer",
      "description": "Focuses on identifying security vulnerabilities",
      "instructions": "Analyze code for security issues such as injection vulnerabilities, improper authentication, and data exposure risks.",
      "icon": "shield"
    }
  ]
}

Language-Specific Settings

ThinkCode allows you to configure settings for specific languages:

Per-Language Editor Settings

{
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.tabSize": 4,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "ms-python.python"
  },
  "[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": {
      "comments": false,
      "strings": false,
      "other": false
    }
  }
}

Per-Language AI Settings

Configure AI behavior for specific languages:

{
  "think.languages": {
    "javascript": {
      "suggestions.enabled": true,
      "suggestions.frequency": "high",
      "context.includeNodeModules": false
    },
    "python": {
      "suggestions.enabled": true,
      "suggestions.frequency": "medium",
      "context.includeVenv": false
    }
  }
}

Project-Specific Settings

ThinkCode supports project-specific settings through the .thinkcode folder:

Creating Project Settings

Create a .thinkcode folder in your project root
Add a settings.json file inside this folder
Add project-specific settings:

{
  "think.context.ignorePatterns": ["**/build/**", "**/node_modules/**"],
  "think.suggestions.frequency": "high",
  "editor.formatOnSave": true
}

Think Configuration Files

Add specialized files to control AI behavior:

context.json

Control which files are included in the AI context:

{
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["**/*.test.ts", "**/mocks/**"],
  "important": ["src/core/types.ts", "src/components/Button.tsx"]
}

prompts.json

Create reusable prompts for common tasks:

{
  "prompts": [
    {
      "name": "Component",
      "description": "Create a new React component",
      "prompt": "Create a React component named {{name}} that {{description}}",
      "output": "typescript"
    },
    {
      "name": "APIEndpoint",
      "description": "Create a new API endpoint",
      "prompt": "Create an API endpoint that {{action}} with the following parameters: {{parameters}}",
      "output": "typescript"
    }
  ]
}

Extensions and Marketplace

Extend ThinkCode's functionality with extensions:

Installing Extensions

Open the Extensions view (Ctrl+Shift+X / Cmd+Shift+X)
Search for extensions by name or category
Click "Install" on extensions you want to add

Recommended Extensions

ThinkCode can recommend extensions based on your files:

{
  "extensions.ignoreRecommendations": false
}

Extension Settings

Most extensions provide their own settings that you can customize:

Open Settings
Search for the extension name
Adjust the available settings

Settings Sync

Keep your settings consistent across devices:

Enabling Settings Sync

Click on the account icon in the Activity Bar
Click "Turn on Settings Sync..."
Select what to sync:
- Settings
- Keyboard Shortcuts
- Extensions
- UI State
- Snippets

Configuring Sync

Control what gets synchronized:

{
  "sync.keybindingsPerPlatform": true,
  "sync.ignoredSettings": [
    "window.zoomLevel",
    "workbench.colorTheme"
  ]
}

Advanced Customization

Custom CSS and JS

For advanced visual customization, you can use the Custom CSS and JS extension:

Install the "Custom CSS and JS Loader" extension
Create a CSS file with your customizations
Point the extension to your CSS file in settings

User Snippets

Create custom code snippets:

Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Type "Snippets" and select "Preferences: Configure User Snippets"
Choose a language or create a global snippet file
Add your snippets:

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "interface ${1:ComponentName}Props {",
      "  $2",
      "}",
      "",
      "export const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({ $3 }) => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "};",
      ""
    ],
    "description": "Create a React Functional Component with TypeScript"
  }
}

Troubleshooting Customization Issues

If you encounter issues with customizations:

Settings Not Applied: Try reloading ThinkCode with Ctrl+R / Cmd+R
Conflicting Settings: Check for conflicts between user and workspace settings
Extension Conflicts: Disable extensions one by one to identify conflicts
Reset to Default: Use "Reset Settings" in the Command Palette

Next Steps

Now that you've learned how to customize ThinkCode:

Explore AI Code Assistance to make the most of AI features
Check out Performance Optimization for tuning ThinkCode's performance
Learn about Session Management to save and restore your working context

Pro Tip

Export your settings to a GitHub gist for backup and sharing. Click on the account icon in the Activity Bar and select "Export Profile" to save your customizations.

Pro Tip

On this page