docs(frontend-tools): add advanced vscode workflow and config guide
This commit is contained in:
@@ -0,0 +1,210 @@
|
||||
---
|
||||
title: VSCode 进阶：命令面板工作流与配置治理
|
||||
icon: simple-icons:visualstudiocode
|
||||
date: 2026-03-30
|
||||
category:
|
||||
- 开发工具
|
||||
- 前端
|
||||
tag:
|
||||
- VSCode
|
||||
- 命令面板
|
||||
- settings.json
|
||||
- keybindings.json
|
||||
- Windows
|
||||
- Linux
|
||||
---
|
||||
|
||||
# VSCode 进阶：命令面板工作流与配置治理
|
||||
|
||||
这篇是入门篇的下一步，目标是把 VSCode 从“会用”升级到“高效、可维护”。
|
||||
|
||||
重点只讲三块：
|
||||
|
||||
1. 命令面板的进阶工作流
|
||||
2. 配置文件分层治理（User / Workspace / Profile）
|
||||
3. 可复用的进阶 JSON 模板
|
||||
|
||||
<!-- more -->
|
||||
|
||||
## 1. 命令面板进阶：把常用动作变成肌肉记忆
|
||||
|
||||
命令面板入口不变：`Ctrl + Shift + P`（Windows / Linux）。
|
||||
|
||||
建议只记住下面这组高频命令：
|
||||
|
||||
1. `>Preferences: Open User Settings (JSON)`
|
||||
2. `>Preferences: Open Workspace Settings (JSON)`
|
||||
3. `>Preferences: Open Keyboard Shortcuts (JSON)`
|
||||
4. `>Tasks: Configure Task`
|
||||
5. `>Developer: Reload Window`
|
||||
6. `>Profiles: Create Profile`
|
||||
7. `>Extensions: Show Installed Extensions`
|
||||
|
||||
实战思路：遇到任何需求，先用命令面板搜“动词 + 目标”，比如 `open settings json`、`create profile`。
|
||||
|
||||
## 2. 配置治理模型：谁该放在哪里
|
||||
|
||||
### 2.1 User settings（全局）
|
||||
|
||||
- Windows: `%APPDATA%\\Code\\User\\settings.json`
|
||||
- Linux: `~/.config/Code/User/settings.json`
|
||||
|
||||
放“个人偏好”：字体、自动保存、终端默认 shell、编辑体验。
|
||||
|
||||
### 2.2 Workspace settings（项目）
|
||||
|
||||
- 项目路径：`.vscode/settings.json`
|
||||
|
||||
放“项目约束”：缩进、格式化策略、特定语言规则、排除目录。
|
||||
|
||||
### 2.3 Profile（场景）
|
||||
|
||||
Profile 适合“多工作模式”用户，例如：
|
||||
|
||||
- `Frontend`：前端开发扩展 + 偏好
|
||||
- `Backend`：后端开发扩展 + 偏好
|
||||
- `Minimal`：低干扰写作/阅读模式
|
||||
|
||||
建议：
|
||||
|
||||
- 固定偏好放 User
|
||||
- 项目规范放 Workspace
|
||||
- 场景差异放 Profile
|
||||
|
||||
## 3. keybindings.json：给命令面板加速
|
||||
|
||||
打开方式：
|
||||
|
||||
- `Ctrl + Shift + P`
|
||||
- 输入 `Open Keyboard Shortcuts (JSON)`
|
||||
|
||||
示例（Windows / Linux 通用）：
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"key": "ctrl+alt+r",
|
||||
"command": "workbench.action.reloadWindow"
|
||||
},
|
||||
{
|
||||
"key": "ctrl+alt+,",
|
||||
"command": "workbench.action.openSettingsJson"
|
||||
},
|
||||
{
|
||||
"key": "ctrl+alt+t",
|
||||
"command": "workbench.action.tasks.runTask"
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
注意：如果快捷键冲突，VSCode 会以后定义或更具体 `when` 条件为准。
|
||||
|
||||
## 4. 进阶 settings.json 模板（Windows + Linux）
|
||||
|
||||
下面模板建议放在 User 级，并按你环境微调：
|
||||
|
||||
```json
|
||||
{
|
||||
"editor.fontSize": 14,
|
||||
"editor.lineHeight": 1.7,
|
||||
"editor.tabSize": 2,
|
||||
"editor.wordWrap": "on",
|
||||
"editor.minimap.enabled": false,
|
||||
"editor.bracketPairColorization.enabled": true,
|
||||
|
||||
"files.autoSave": "onFocusChange",
|
||||
"files.trimTrailingWhitespace": true,
|
||||
"files.insertFinalNewline": true,
|
||||
"files.watcherExclude": {
|
||||
"**/.git/objects/**": true,
|
||||
"**/node_modules/**": true,
|
||||
"**/dist/**": true
|
||||
},
|
||||
|
||||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll": "explicit",
|
||||
"source.organizeImports": "explicit"
|
||||
},
|
||||
|
||||
"terminal.integrated.defaultProfile.windows": "PowerShell",
|
||||
"terminal.integrated.defaultProfile.linux": "bash",
|
||||
|
||||
"workbench.startupEditor": "none",
|
||||
"workbench.editor.enablePreview": false,
|
||||
"workbench.tree.indent": 16
|
||||
}
|
||||
```
|
||||
|
||||
如果你不用 Prettier，把 `editor.defaultFormatter` 改成你实际使用的扩展 ID。
|
||||
|
||||
## 5. Workspace 模板：把项目规范写死
|
||||
|
||||
建议每个项目都放一个最小 `.vscode/settings.json`：
|
||||
|
||||
```json
|
||||
{
|
||||
"editor.tabSize": 2,
|
||||
"editor.insertSpaces": true,
|
||||
"editor.detectIndentation": false,
|
||||
"files.eol": "\n"
|
||||
}
|
||||
```
|
||||
|
||||
这样团队成员打开项目时，基础编辑行为就能统一。
|
||||
|
||||
## 6. 命令面板 + Task：一键执行项目动作
|
||||
|
||||
进阶建议：把常用命令（如构建、测试）写进 Task，再通过命令面板触发。
|
||||
|
||||
`.vscode/tasks.json` 示例：
|
||||
|
||||
```json
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"label": "docs:build",
|
||||
"type": "shell",
|
||||
"command": "npm run docs:build",
|
||||
"group": "build",
|
||||
"problemMatcher": []
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
触发方式：
|
||||
|
||||
1. `Ctrl + Shift + P`
|
||||
2. 输入 `Run Task`
|
||||
3. 选择 `docs:build`
|
||||
|
||||
## 7. 常见坑与排查
|
||||
|
||||
### 7.1 改了配置却没生效
|
||||
|
||||
先执行 `Developer: Reload Window`，再验证。
|
||||
|
||||
### 7.2 User 和 Workspace 打架
|
||||
|
||||
按“项目优先”原则，检查 `.vscode/settings.json` 是否覆盖了 User。
|
||||
|
||||
### 7.3 JSON 报错
|
||||
|
||||
确保：
|
||||
|
||||
- 不要尾逗号
|
||||
- 全部键名和字符串使用双引号
|
||||
- 文件是合法 JSON（不是 JSONC 风格时不要写注释）
|
||||
|
||||
## 8. 进阶完成标准
|
||||
|
||||
- [ ] 能通过命令面板完成设置、任务、重载
|
||||
- [ ] 能区分 User / Workspace / Profile 三层职责
|
||||
- [ ] 有自己的 `keybindings.json` 高频快捷键
|
||||
- [ ] 有项目级 `.vscode/settings.json` 规范
|
||||
- [ ] 能用 `tasks.json` 一键触发常用命令
|
||||
|
||||
做到这 5 点，VSCode 就从“编辑器”变成你的“稳定开发操作台”。
|
||||
Reference in New Issue
Block a user