diff --git a/src/programming/frontend/tools/vscode-quick-start-command-palette-settings-json.md b/src/programming/frontend/tools/vscode-quick-start-command-palette-settings-json.md new file mode 100644 index 0000000..d88a56a --- /dev/null +++ b/src/programming/frontend/tools/vscode-quick-start-command-palette-settings-json.md @@ -0,0 +1,180 @@ +--- +title: VSCode 使用入门:命令面板与 settings.json +icon: simple-icons:visualstudiocode +date: 2026-03-30 +category: + - 开发工具 + - 前端 +tag: + - VSCode + - 命令面板 + - settings.json + - Windows + - Linux +--- + +# VSCode 使用入门:命令面板与 settings.json + +这是一篇极速 15 分钟上手指南,重点只讲三件事: + +1. VSCode 的基本概念 +2. 命令面板怎么高频使用 +3. 不进图形化设置,直接改 `settings.json` + + + +## 1. 先认识 4 个核心概念 + +### 1.1 编辑器 vs 工作区 + +- **编辑器**:你看到和编辑代码的窗口。 +- **工作区(Workspace)**:当前打开的项目(一个或多个文件夹)。 + +### 1.2 配置分层(最重要) + +VSCode 的设置是分层生效的: + +1. **默认设置(Default)**:VSCode 内置。 +2. **用户设置(User)**:你机器上的全局偏好。 +3. **工作区设置(Workspace)**:只对当前项目生效。 + +如果同一个键同时存在,通常是 `Workspace` 覆盖 `User`。 + +### 1.3 命令面板(Command Palette) + +命令面板是 VSCode 的“统一入口”。 + +- Windows/Linux:`Ctrl + Shift + P` +- 也可按 `F1` + +你可以在这里执行几乎所有操作,包括打开 JSON 配置。 + +### 1.4 扩展不是“额外功能”,而是能力层 + +VSCode 本体很轻,很多语言能力来自扩展。 +但本篇先不讲扩展安装,先把命令面板和配置体系打通。 + +## 2. 命令面板:先会这 6 条命令 + +按 `Ctrl + Shift + P` 后直接输入: + +1. `>` + `Reload Window`:重载窗口,配置变更后常用。 +2. `>Developer: Reload Window`:同上,完整命令名。 +3. `>Preferences: Open User Settings (JSON)`:打开全局配置。 +4. `>Preferences: Open Workspace Settings (JSON)`:打开项目配置。 +5. `>Preferences: Open Default Settings (JSON)`:查看默认值(只读参考)。 +6. `>Files: Auto Save`:快速切自动保存策略。 + +技巧:命令面板支持模糊搜索,你记不全命令名也能找到。 + +## 3. settings.json 到底放哪 + +### 3.1 用户配置(全局) + +- Windows: `%APPDATA%\\Code\\User\\settings.json` +- Linux: `~/.config/Code/User/settings.json` + +建议:全局偏好(字体、自动保存、格式化默认行为)放这里。 + +### 3.2 工作区配置(项目级) + +- 项目根目录:`.vscode/settings.json` + +建议:和项目强相关的配置放这里(例如某项目缩进、格式化器、排除目录)。 + +## 4. 用命令面板打开 JSON 配置(不进图形设置) + +### 4.1 打开用户配置 + +1. `Ctrl + Shift + P` +2. 输入 `Open User Settings (JSON)` +3. 回车 + +### 4.2 打开工作区配置 + +1. `Ctrl + Shift + P` +2. 输入 `Open Workspace Settings (JSON)` +3. 回车 + +如果项目里没有 `.vscode/settings.json`,VSCode 会帮你创建。 + +## 5. 可直接粘贴的入门模板 + +下面这份建议先放在 **User settings.json**,适用于 Windows + Linux。 + +```json +{ + "editor.fontSize": 14, + "editor.tabSize": 2, + "editor.wordWrap": "on", + "editor.minimap.enabled": false, + + "files.autoSave": "onFocusChange", + "files.trimTrailingWhitespace": true, + "files.insertFinalNewline": true, + + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll": "explicit" + }, + + "terminal.integrated.defaultProfile.windows": "PowerShell", + "terminal.integrated.defaultProfile.linux": "bash", + + "files.exclude": { + "**/.DS_Store": true, + "**/node_modules": true, + "**/.git": false + } +} +``` + +说明: + +- `formatOnSave` 依赖你安装并启用对应语言的格式化扩展。 +- `source.fixAll` 设为 `explicit` 更稳,避免每次保存都触发过多修复。 +- `terminal.integrated.defaultProfile.*` 按你的本机实际 shell 调整。 + +## 6. User 与 Workspace 怎么分 + +推荐这套规则: + +- 放 `User`:你个人习惯,跨项目都想保留。 +- 放 `Workspace`:只在当前项目生效的规则。 + +示例:某项目要求 4 空格缩进,就写到该项目 `.vscode/settings.json`: + +```json +{ + "editor.tabSize": 4, + "editor.insertSpaces": true +} +``` + +## 7. 常见问题(JSON 配置方式) + +### 7.1 配置不生效 + +按 `Ctrl + Shift + P` 执行 `Developer: Reload Window`,再验证。 + +### 7.2 JSON 报错(逗号、引号) + +`settings.json` 必须是合法 JSON。重点检查: + +- 最后一项后面不要多逗号 +- 键名和字符串值要用双引号 + +### 7.3 不确定某个键该写什么 + +用命令面板打开 `Default Settings (JSON)` 搜索对应键,按默认文档写。 + +## 8. 15 分钟上手清单 + +- [ ] 会用 `Ctrl + Shift + P` 打开命令面板 +- [ ] 会打开 `User Settings (JSON)` +- [ ] 会打开 `Workspace Settings (JSON)` +- [ ] 能区分 User 与 Workspace 的生效范围 +- [ ] 粘贴并调整一份可用的 `settings.json` +- [ ] 配置不生效时会执行 `Reload Window` + +完成以上 6 项,你已经跨过 VSCode 入门阶段。