docs(frontend-tools): add vscode quick start for command palette and settings json

2026-03-30 00:41:49 +08:00
parent 9b37932b46
commit 2068733f0d
1 changed files with 180 additions and 0 deletions
--- 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
@@ -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`
+
+<!-- more -->
+
+## 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 入门阶段。