1- - Before attempting completion, always make sure that any code changes have test coverage and that the tests pass.
1+ # Code Quality Rules
2+
3+ 1. Test Coverage:
4+ - Before attempting completion, always make sure that any code changes have test coverage
5+ - Ensure all tests pass before submitting changes
6+
7+ 2. Git Commits:
8+ - When finishing a task, always output a git commit command
9+ - Include a descriptive commit message that follows conventional commit format
10+
11+ 3. Documentation:
12+ - Update README.md when making significant changes, such as:
13+ * Adding new features or settings
14+ * Changing existing functionality
15+ * Updating system requirements
16+ * Adding new dependencies
17+ - Include clear descriptions of new features and how to use them
18+ - Keep the documentation in sync with the codebase
19+ - Add examples where appropriate
20+
21+ # Adding a New Setting
22+
23+ To add a new setting that persists its state, follow these steps:
24+
25+ ## For All Settings
26+
27+ 1. Add the setting to ExtensionMessage.ts:
28+ - Add the setting to the ExtensionState interface
29+ - Make it required if it has a default value, optional if it can be undefined
30+ - Example: `preferredLanguage: string`
31+
32+ 2. Add test coverage:
33+ - Add the setting to mockState in ClineProvider.test.ts
34+ - Add test cases for setting persistence and state updates
35+ - Ensure all tests pass before submitting changes
36+
37+ ## For Checkbox Settings
38+
39+ 1. Add the message type to WebviewMessage.ts:
40+ - Add the setting name to the WebviewMessage type's type union
41+ - Example: `| "multisearchDiffEnabled"`
42+
43+ 2. Add the setting to ExtensionStateContext.tsx:
44+ - Add the setting to the ExtensionStateContextType interface
45+ - Add the setter function to the interface
46+ - Add the setting to the initial state in useState
47+ - Add the setting to the contextValue object
48+ - Example:
49+ ```typescript
50+ interface ExtensionStateContextType {
51+ multisearchDiffEnabled: boolean;
52+ setMultisearchDiffEnabled: (value: boolean) => void;
53+ }
54+ ```
55+
56+ 3. Add the setting to ClineProvider.ts:
57+ - Add the setting name to the GlobalStateKey type union
58+ - Add the setting to the Promise.all array in getState
59+ - Add the setting to the return value in getState with a default value
60+ - Add the setting to the destructured variables in getStateToPostToWebview
61+ - Add the setting to the return value in getStateToPostToWebview
62+ - Add a case in setWebviewMessageListener to handle the setting's message type
63+ - Example:
64+ ```typescript
65+ case "multisearchDiffEnabled":
66+ await this.updateGlobalState("multisearchDiffEnabled", message.bool)
67+ await this.postStateToWebview()
68+ break
69+ ```
70+
71+ 4. Add the checkbox UI to SettingsView.tsx:
72+ - Import the setting and its setter from ExtensionStateContext
73+ - Add the VSCodeCheckbox component with the setting's state and onChange handler
74+ - Add appropriate labels and description text
75+ - Example:
76+ ```typescript
77+ <VSCodeCheckbox
78+ checked={multisearchDiffEnabled}
79+ onChange={(e: any) => setMultisearchDiffEnabled(e.target.checked)}
80+ >
81+ <span style={{ fontWeight: "500" }}>Enable multi-search diff matching</span>
82+ </VSCodeCheckbox>
83+ ```
84+
85+ 5. Add the setting to handleSubmit in SettingsView.tsx:
86+ - Add a vscode.postMessage call to send the setting's value when clicking Done
87+ - Example:
88+ ```typescript
89+ vscode.postMessage({ type: "multisearchDiffEnabled", bool: multisearchDiffEnabled })
90+ ```
91+
92+ ## For Select/Dropdown Settings
93+
94+ 1. Add the message type to WebviewMessage.ts:
95+ - Add the setting name to the WebviewMessage type's type union
96+ - Example: `| "preferredLanguage"`
97+
98+ 2. Add the setting to ExtensionStateContext.tsx:
99+ - Add the setting to the ExtensionStateContextType interface
100+ - Add the setter function to the interface
101+ - Add the setting to the initial state in useState with a default value
102+ - Add the setting to the contextValue object
103+ - Example:
104+ ```typescript
105+ interface ExtensionStateContextType {
106+ preferredLanguage: string;
107+ setPreferredLanguage: (value: string) => void;
108+ }
109+ ```
110+
111+ 3. Add the setting to ClineProvider.ts:
112+ - Add the setting name to the GlobalStateKey type union
113+ - Add the setting to the Promise.all array in getState
114+ - Add the setting to the return value in getState with a default value
115+ - Add the setting to the destructured variables in getStateToPostToWebview
116+ - Add the setting to the return value in getStateToPostToWebview
117+ - Add a case in setWebviewMessageListener to handle the setting's message type
118+ - Example:
119+ ```typescript
120+ case "preferredLanguage":
121+ await this.updateGlobalState("preferredLanguage", message.text)
122+ await this.postStateToWebview()
123+ break
124+ ```
125+
126+ 4. Add the select UI to SettingsView.tsx:
127+ - Import the setting and its setter from ExtensionStateContext
128+ - Add the select element with appropriate styling to match VSCode's theme
129+ - Add options for the dropdown
130+ - Add appropriate labels and description text
131+ - Example:
132+ ```typescript
133+ <select
134+ value={preferredLanguage}
135+ onChange={(e) => setPreferredLanguage(e.target.value)}
136+ style={{
137+ width: "100%",
138+ padding: "4px 8px",
139+ backgroundColor: "var(--vscode-input-background)",
140+ color: "var(--vscode-input-foreground)",
141+ border: "1px solid var(--vscode-input-border)",
142+ borderRadius: "2px"
143+ }}>
144+ <option value="English">English</option>
145+ <option value="Spanish">Spanish</option>
146+ ...
147+ </select>
148+ ```
149+
150+ 5. Add the setting to handleSubmit in SettingsView.tsx:
151+ - Add a vscode.postMessage call to send the setting's value when clicking Done
152+ - Example:
153+ ```typescript
154+ vscode.postMessage({ type: "preferredLanguage", text: preferredLanguage })
155+ ```
156+
157+ These steps ensure that:
158+ - The setting's state is properly typed throughout the application
159+ - The setting persists between sessions
160+ - The setting's value is properly synchronized between the webview and extension
161+ - The setting has a proper UI representation in the settings view
162+ - Test coverage is maintained for the new setting
0 commit comments