Roo-Code/cline_docs/settings.md

For All Settings

1. Add the setting to ExtensionMessage.ts:

   • Add the setting to the ExtensionState interface
   • Make it required if it has a default value, optional if it can be undefined
   • Example: preferredLanguage: string

2. Add test coverage:

   • Add the setting to mockState in ClineProvider.test.ts
   • Add test cases for setting persistence and state updates
   • Ensure all tests pass before submitting changes

For Checkbox Settings

1. Add the message type to WebviewMessage.ts:

   • Add the setting name to the WebviewMessage type's type union
   • Example: | "multisearchDiffEnabled"

2. Add the setting to ExtensionStateContext.tsx:

   • Add the setting to the ExtensionStateContextType interface
   • Add the setter function to the interface
   • Add the setting to the initial state in useState
   • Add the setting to the contextValue object

   • Example:

     interface ExtensionStateContextType {
     multisearchDiffEnabled: boolean;
     setMultisearchDiffEnabled: (value: boolean) => void;
     }
     

3. Add the setting to ClineProvider.ts:

   • Add the setting name to the GlobalStateKey type union
   • Add the setting to the Promise.all array in getState
   • Add the setting to the return value in getState with a default value
   • Add the setting to the destructured variables in getStateToPostToWebview
   • Add the setting to the return value in getStateToPostToWebview
   • Add a case in setWebviewMessageListener to handle the setting's message type

   • Example:

     case "multisearchDiffEnabled":
     await this.updateGlobalState("multisearchDiffEnabled", message.bool)
     await this.postStateToWebview()
     break
     

4. Add the checkbox UI to SettingsView.tsx:

   • Import the setting and its setter from ExtensionStateContext
   • Add the VSCodeCheckbox component with the setting's state and onChange handler
   • Add appropriate labels and description text

   • Example:

     <VSCodeCheckbox 
     checked={multisearchDiffEnabled} 
     onChange={(e: any) => setMultisearchDiffEnabled(e.target.checked)}
     >
     <span style={{ fontWeight: "500" }}>Enable multi-search diff matching</span>
     </VSCodeCheckbox>
     

5. Add the setting to handleSubmit in SettingsView.tsx:

   • Add a vscode.postMessage call to send the setting's value when clicking Done

   • Example:

     vscode.postMessage({ type: "multisearchDiffEnabled", bool: multisearchDiffEnabled })
     

For Select/Dropdown Settings

1. Add the message type to WebviewMessage.ts:

   • Add the setting name to the WebviewMessage type's type union
   • Example: | "preferredLanguage"

2. Add the setting to ExtensionStateContext.tsx:

   • Add the setting to the ExtensionStateContextType interface
   • Add the setter function to the interface
   • Add the setting to the initial state in useState with a default value
   • Add the setting to the contextValue object

   • Example:

     interface ExtensionStateContextType {
     preferredLanguage: string;
     setPreferredLanguage: (value: string) => void;
     }
     

3. Add the setting to ClineProvider.ts:

   • Add the setting name to the GlobalStateKey type union
   • Add the setting to the Promise.all array in getState
   • Add the setting to the return value in getState with a default value
   • Add the setting to the destructured variables in getStateToPostToWebview
   • Add the setting to the return value in getStateToPostToWebview
   • Add a case in setWebviewMessageListener to handle the setting's message type

   • Example:

     case "preferredLanguage":
     await this.updateGlobalState("preferredLanguage", message.text)
     await this.postStateToWebview()
     break
     

4. Add the select UI to SettingsView.tsx:

   • Import the setting and its setter from ExtensionStateContext
   • Add the select element with appropriate styling to match VSCode's theme
   • Add options for the dropdown
   • Add appropriate labels and description text

   • Example:

     <select
     value={preferredLanguage}
     onChange={(e) => setPreferredLanguage(e.target.value)}
     style={{
      width: "100%",
      padding: "4px 8px",
      backgroundColor: "var(--vscode-input-background)",
      color: "var(--vscode-input-foreground)",
      border: "1px solid var(--vscode-input-border)",
      borderRadius: "2px"
     }}>
     <option value="English">English</option>
     <option value="Spanish">Spanish</option>
     ...
     </select>
     

5. Add the setting to handleSubmit in SettingsView.tsx:

   • Add a vscode.postMessage call to send the setting's value when clicking Done

   • Example:

     vscode.postMessage({ type: "preferredLanguage", text: preferredLanguage })
     

These steps ensure that:

• The setting's state is properly typed throughout the application
• The setting persists between sessions
• The setting's value is properly synchronized between the webview and extension
• The setting has a proper UI representation in the settings view
• Test coverage is maintained for the new setting