YouTip

If you don't like using Claude Code's command line model, we can install Claude Code in the VS Code editor. Open VS Code, go to the extension marketplace, search for **Claude Code** and install: !(#) After installation, click the Claude Code icon in the top right corner to enter the Claude Code page: !(#) If you have an account, you can use /login to log in: !(#) You can also enter /config in the dialog box to access settings, and check the "Disable Login Prompt" option to disable the login page: !(#) We can select code in the file and let Claude Code help explain or modify it. After selection, it will show the number of code lines selected: !(#) When Claude needs to modify a file, it will automatically open a side-by-side comparison view, showing the original file content on the left and the suggested modifications on the right, then ask if you agree to the changes. !(#) ### Using the Prompt Box (Chat Input Box) The prompt box is where you chat with Claude. It's very powerful, and here are the common features - you'll understand them at a glance: **1、Permission Mode**: Click the mode indicator at the **bottom** of the prompt box to switch permission modes. * **Normal Mode (default)**: Claude will ask for your agreement before each operation. * **Plan Mode**: Claude will first tell you what it plans to do, and only proceed after you approve. * **Auto-accept Mode**: Claude edits directly without asking each time. You can also search for `claudeCode.initialPermissionMode` in VS Code settings to set the default mode. !(#) **2、Command Menu**: Enter `/` in the prompt box (or click the input box) to open the command menu. Common options include: Attach File, Switch Model, Enable Extended Thinking, View Usage (enter `/usage`). The "Custom" section below lets you manage MCP servers, hooks, memories, permissions, and plugins. Commands with a **terminal icon** will open directly in VS Code's integrated terminal. !(#) **3、Context Usage Indicator**: The bottom of the prompt box shows in real-time how much of Claude's context window you've used. Claude will automatically compress content for you; if you want to manually compress, just enter `/compact`. **4、Extended Thinking**: When facing complex problems, you can let Claude spend more time thinking deeply. Toggle it on/off through the command menu (enter `/`). **5、Multi-line Input**: Press **Shift + Enter** to add a new line without sending the message immediately. This also applies to the free text box in the pop-up "Others" dialog. ### Referencing Files and Folders (@ Mention Feature) Want Claude to understand your code? Just use `@` to mention the file or folder! Enter `@` followed by the file name or folder name, and Claude will automatically read the content to answer questions or make modifications directly. !(#) **Fuzzy matching** is supported, so you don't need to type the full name: Explain the logic of @auth (will automatically match auth.js, AuthService.ts, etc.) What's in @src/components/ ? (add a slash / for folders) **Super Useful Tips**: * **When selecting code**: Simply select a section of code in the editor, and Claude will automatically see what you've selected. The bottom of the prompt box will show "XX lines selected". * **Quick insert**: Press **Option + K** (Mac) or **Alt + K** (Windows/Linux) to insert an @ mention with file path and line numbers, e.g., `@app.ts#5-10`. * **Hide selected content**: Click the "selection indicator" (eye icon) at the bottom of the prompt box - a slashed eye means Claude cannot see your selected text. * **Drag attachments**: Hold **Shift** when dragging a file to the prompt box to add it as an attachment. Want to delete an attachment? Click the × in the top right corner of the attachment. **PDF Large File Special**: You can specify that Claude only read certain pages, e.g., "pages