vscode

# 基础知识

Visual Studio Code (VSCode) 是微软开发的一款轻量级但功能强大的代码编辑器，支持多种编程语言和框架，具有丰富的扩展生态系统。

# 核心概念

工作区 (Workspace): 包含项目文件和配置的文件夹
扩展 (Extensions): 增强编辑器功能的插件
设置 (Settings): 用户和工作区级别的配置
任务 (Tasks): 自动化构建和部署流程
调试 (Debugging): 代码调试和断点管理

# 界面布局

┌─────────────────────────────────────────────────────────────┐
│ 菜单栏 (Menu Bar)                                           │
├─────────────────────────────────────────────────────────────┤
│ 活动栏 (Activity Bar) │ 侧边栏 (Side Bar) │ 编辑器 (Editor) │
│ • 资源管理器          │                   │                 │
│ • 搜索               │                   │                 │
│ • 源代码管理         │                   │                 │
│ • 运行和调试         │                   │                 │
│ • 扩展               │                   │                 │
├─────────────────────────────────────────────────────────────┤
│ 面板 (Panel) - 终端、问题、输出、调试控制台                │
├─────────────────────────────────────────────────────────────┤
│ 状态栏 (Status Bar)                                         │
└─────────────────────────────────────────────────────────────┘

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 快捷键系统

# 基础快捷键

文件操作:
- Ctrl+N          : 新建文件
- Ctrl+O          : 打开文件
- Ctrl+S          : 保存文件
- Ctrl+Shift+S    : 另存为
- Ctrl+W          : 关闭文件
- Ctrl+Shift+T    : 重新打开关闭的文件

编辑操作:
- Ctrl+Z          : 撤销
- Ctrl+Y          : 重做
- Ctrl+X          : 剪切
- Ctrl+C          : 复制
- Ctrl+V          : 粘贴
- Ctrl+A          : 全选
- Ctrl+D          : 选择下一个相同内容
- Alt+Shift+I     : 在每行末尾插入光标

导航操作:
- Ctrl+P          : 快速打开文件
- Ctrl+Shift+P    : 命令面板
- Ctrl+G          : 跳转到行
- Ctrl+Shift+O    : 跳转到符号
- F12             : 跳转到定义
- Alt+F12         : 查看定义
- Shift+F12       : 查看引用

视图操作:
- Ctrl+B          : 切换侧边栏
- Ctrl+J          : 切换面板
- Ctrl+Shift+E    : 显示资源管理器
- Ctrl+Shift+F    : 显示搜索
- Ctrl+Shift+G    : 显示源代码管理
- Ctrl+Shift+X    : 显示扩展
- Ctrl+Shift+D    : 显示调试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 高级快捷键

多光标编辑:
- Alt+Click       : 添加光标
- Ctrl+Alt+↑/↓    : 向上/向下添加光标
- Ctrl+U          : 撤销上一个光标操作
- Ctrl+Shift+L    : 选择所有匹配项

代码折叠:
- Ctrl+Shift+[    : 折叠代码块
- Ctrl+Shift+]    : 展开代码块
- Ctrl+K Ctrl+0   : 折叠所有
- Ctrl+K Ctrl+J   : 展开所有

窗口管理:
- Ctrl+\          : 分割编辑器
- Ctrl+1/2/3      : 聚焦到编辑器组
- Ctrl+W          : 关闭编辑器
- Ctrl+Shift+T    : 重新打开关闭的编辑器

集成终端:
- Ctrl+`          : 切换集成终端
- Ctrl+Shift+`    : 新建终端
- Ctrl+Shift+5    : 分割终端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 自定义快捷键

// keybindings.json
[
    {
        "key": "ctrl+cmd+f",
        "command": "workbench.action.toggleFullScreen",
        "when": "!isFullscreen"
    },
    {
        "key": "ctrl+shift+r",
        "command": "workbench.action.reloadWindow"
    },
    {
        "key": "ctrl+shift+c",
        "command": "workbench.action.terminal.openNativeConsole"
    }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 扩展系统

# 扩展管理

扩展分类:
- 语言支持 (Language Support)
- 主题 (Themes)
- 代码片段 (Snippets)
- 调试器 (Debuggers)
- 格式化工具 (Formatters)
- 代码检查 (Linters)
- 版本控制 (Version Control)
- 生产力工具 (Productivity)

1
2
3
4
5
6
7
8
9

# 必备扩展推荐

# 1. 语言支持扩展

JavaScript/TypeScript:
- JavaScript (ES6) code snippets
- TypeScript Importer
- Auto Rename Tag
- Bracket Pair Colorizer

Python:
- Python
- Pylance
- Python Docstring Generator
- Python Test Explorer

Java:
- Extension Pack for Java
- Spring Boot Extension Pack
- Maven for Java

C/C++:
- C/C++
- C/C++ Themes
- CMake Tools

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 2. 主题和图标

主题扩展:
- One Dark Pro
- Dracula Official
- Material Theme
- Night Owl
- Monokai Pro

图标扩展:
- Material Icon Theme
- vscode-icons
- Seti Icons
- City Lights Icons

1
2
3
4
5
6
7
8
9
10
11
12

# 3. 代码质量工具

格式化工具:
- Prettier - Code formatter
- Beautify
- Black Formatter (Python)
- Java Code Generators

代码检查:
- ESLint
- Prettier - ESLint
- Python (Pylint)
- SonarLint

1
2
3
4
5
6
7
8
9
10
11

# 4. 版本控制

Git扩展:
- GitLens — Git supercharged
- Git History
- Git Graph
- Git Blame
- GitLab Workflow

1
2
3
4
5
6

# 5. 生产力工具

代码片段:
- Auto Rename Tag
- Bracket Pair Colorizer
- Indent Rainbow
- Path Intellisense

调试工具:
- Debugger for Chrome
- REST Client
- Thunder Client
- Postman

1
2
3
4
5
6
7
8
9
10
11

# 扩展配置示例

// settings.json - 扩展配置
{
    // Prettier 配置
    "prettier.singleQuote": true,
    "prettier.tabWidth": 2,
    "prettier.semi": false,
    "prettier.printWidth": 80,
    
    // ESLint 配置
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    
    // GitLens 配置
    "gitlens.codeLens.enabled": true,
    "gitlens.hovers.enabled": true,
    
    // Python 配置
    "python.defaultInterpreterPath": "/usr/bin/python3",
    "python.linting.enabled": true,
    "python.linting.pylintEnabled": true,
    
    // 主题配置
    "workbench.colorTheme": "One Dark Pro",
    "workbench.iconTheme": "material-icon-theme"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 设置和配置

# 设置系统

VSCode 有三种设置级别：

用户设置 (User Settings): 全局设置，影响所有工作区
工作区设置 (Workspace Settings): 仅影响当前工作区
文件夹设置 (Folder Settings): 仅影响特定文件夹

# 常用设置配置

// settings.json - 常用配置
{
    // 编辑器设置
    "editor.fontSize": 14,
    "editor.fontFamily": "'Fira Code', 'Consolas', 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": true,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": true,
    "editor.rulers": [80, 120],
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true,
    
    // 文件设置
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/node_modules": true,
        "**/dist": true,
        "**/build": true
    },
    "files.watcherExclude": {
        "**/node_modules/**": true,
        "**/dist/**": true
    },
    
    // 搜索设置
    "search.exclude": {
        "**/node_modules": true,
        "**/dist": true,
        "**/build": true
    },
    
    // 终端设置
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "'Fira Code', monospace",
    "terminal.integrated.shell.osx": "/bin/zsh",
    "terminal.integrated.shell.linux": "/bin/bash",
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
    
    // 工作台设置
    "workbench.startupEditor": "newUntitledFile",
    "workbench.editor.enablePreview": false,
    "workbench.editor.enablePreviewFromQuickOpen": false,
    
    // 语言特定设置
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 2
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.tabSize": 2
    },
    "[python]": {
        "editor.defaultFormatter": "ms-python.python",
        "editor.tabSize": 4
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

# 工作区配置

// .vscode/settings.json - 工作区特定设置
{
    "python.defaultInterpreterPath": "./venv/bin/python",
    "python.linting.pylintArgs": [
        "--disable=C0111",
        "--disable=C0103"
    ],
    "typescript.preferences.importModuleSpecifier": "relative",
    "javascript.preferences.importModuleSpecifier": "relative"
}

1
2
3
4
5
6
7
8
9
10

# 代码片段系统

# 代码片段基础

代码片段是预定义的代码模板，可以快速插入常用代码结构。

# 创建代码片段

# 1. 全局代码片段

// 全局代码片段文件
{
    "Console Log": {
        "prefix": "clg",
        "body": [
            "console.log($1);"
        ],
        "description": "Console log statement"
    },
    "Function Declaration": {
        "prefix": "func",
        "body": [
            "function ${1:functionName}(${2:parameters}) {",
            "\t$0",
            "}"
        ],
        "description": "Function declaration"
    },
    "Arrow Function": {
        "prefix": "arrow",
        "body": [
            "const ${1:functionName} = (${2:parameters}) => {",
            "\t$0",
            "};"
        ],
        "description": "Arrow function"
    },
    "React Component": {
        "prefix": "rfc",
        "body": [
            "import React from 'react';",
            "",
            "interface ${1:ComponentName}Props {",
            "\t$2",
            "}",
            "",
            "const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({ $3 }) => {",
            "\treturn (",
            "\t\t<div>",
            "\t\t\t$0",
            "\t\t</div>",
            "\t);",
            "};",
            "",
            "export default ${1:ComponentName};"
        ],
        "description": "React functional component with TypeScript"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# 2. 语言特定代码片段

// Python 代码片段
{
    "Class Definition": {
        "prefix": "class",
        "body": [
            "class ${1:ClassName}:",
            "\tdef __init__(self, ${2:parameters}):",
            "\t\t$0"
        ],
        "description": "Python class definition"
    },
    "Main Function": {
        "prefix": "main",
        "body": [
            "if __name__ == '__main__':",
            "\t$0"
        ],
        "description": "Python main function"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 代码片段变量

变量说明:
$1, $2, $3...    : 制表位，按Tab键跳转
$0               : 最终光标位置
$TM_FILENAME     : 当前文件名
$TM_FILENAME_BASE: 不带扩展名的文件名
$TM_DIRECTORY    : 当前文件目录
$TM_FILEPATH     : 当前文件完整路径
$CURRENT_YEAR    : 当前年份
$CURRENT_MONTH   : 当前月份
$CURRENT_DATE    : 当前日期
$CURRENT_HOUR    : 当前小时
$CURRENT_MINUTE  : 当前分钟
$CURRENT_SECOND  : 当前秒数
$RANDOM          : 随机数
$CLIPBOARD       : 剪贴板内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 高级代码片段示例

{
    "React Hook Component": {
        "prefix": "rhook",
        "body": [
            "import React, { useState, useEffect } from 'react';",
            "",
            "interface ${1:ComponentName}Props {",
            "\t$2",
            "}",
            "",
            "const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({ $3 }) => {",
            "\tconst [${4:state}, set${4/(.*)/${1:/capitalize}/}] = useState<${5:string}>(${6:''});",
            "",
            "\tuseEffect(() => {",
            "\t\t$7",
            "\t}, []);",
            "",
            "\treturn (",
            "\t\t<div>",
            "\t\t\t$0",
            "\t\t</div>",
            "\t);",
            "};",
            "",
            "export default ${1:ComponentName};"
        ],
        "description": "React functional component with hooks"
    },
    "Async Function": {
        "prefix": "async",
        "body": [
            "const ${1:functionName} = async (${2:parameters}) => {",
            "\ttry {",
            "\t\t$0",
            "\t} catch (error) {",
            "\t\tconsole.error('Error:', error);",
            "\t\tthrow error;",
            "\t}",
            "};"
        ],
        "description": "Async function with error handling"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 任务系统

# 任务基础

VSCode 任务系统允许你自动化构建、测试和部署流程。

# 任务配置

// .vscode/tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "npm install",
            "type": "shell",
            "command": "npm",
            "args": ["install"],
            "group": "build",
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared"
            },
            "problemMatcher": []
        },
        {
            "label": "npm start",
            "type": "shell",
            "command": "npm",
            "args": ["start"],
            "group": "build",
            "isBackground": true,
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared"
            },
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "^$",
                    "file": 1,
                    "location": 2,
                    "message": 3
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "^.*starting development server.*",
                    "endsPattern": "^.*ready in.*"
                }
            }
        },
        {
            "label": "Run Tests",
            "type": "shell",
            "command": "npm",
            "args": ["test"],
            "group": "test",
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared"
            },
            "problemMatcher": []
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

# 复合任务

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Build and Deploy",
            "dependsOrder": "sequence",
            "dependsOn": [
                "npm install",
                "npm run build",
                "deploy"
            ],
            "group": "build"
        },
        {
            "label": "deploy",
            "type": "shell",
            "command": "rsync",
            "args": [
                "-avz",
                "--delete",
                "dist/",
                "user@server:/var/www/app/"
            ],
            "group": "build"
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 自定义任务示例

# 1. Python 项目任务

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Python: Run Current File",
            "type": "shell",
            "command": "python",
            "args": ["${file}"],
            "group": "build",
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared"
            }
        },
        {
            "label": "Python: Install Dependencies",
            "type": "shell",
            "command": "pip",
            "args": ["install", "-r", "requirements.txt"],
            "group": "build"
        },
        {
            "label": "Python: Run Tests",
            "type": "shell",
            "command": "python",
            "args": ["-m", "pytest"],
            "group": "test"
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 2. 文件生成任务

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Create Component",
            "type": "shell",
            "command": "node",
            "args": [
                "${workspaceFolder}/scripts/createComponent.js",
                "${input:componentName}"
            ],
            "group": "build",
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared"
            }
        }
    ],
    "inputs": [
        {
            "id": "componentName",
            "type": "promptString",
            "description": "Enter component name"
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 调试系统

# 调试基础

VSCode 提供了强大的调试功能，支持多种编程语言和运行时环境。

# 调试配置

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Current File",
            "type": "python",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal",
            "pythonPath": "/usr/bin/python3"
        },
        {
            "name": "Python: Django",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/manage.py",
            "args": ["runserver"],
            "django": true,
            "console": "integratedTerminal"
        },
        {
            "name": "Node.js: Current File",
            "type": "node",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal"
        },
        {
            "name": "Chrome: Launch",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 语言特定调试配置

# 1. Python 调试

{
    "name": "Python: Flask",
    "type": "python",
    "request": "launch",
    "module": "flask",
    "env": {
        "FLASK_APP": "app.py",
        "FLASK_ENV": "development"
    },
    "args": [
        "run",
        "--no-debugger",
        "--no-reload"
    ],
    "jinja": true,
    "console": "integratedTerminal"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2. JavaScript/TypeScript 调试

{
    "name": "Launch Program",
    "type": "node",
    "request": "launch",
    "program": "${workspaceFolder}/src/index.js",
    "args": [],
    "env": {
        "NODE_ENV": "development"
    },
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen"
}

1
2
3
4
5
6
7
8
9
10
11
12

# 3. Java 调试

{
    "name": "Java: Launch Current File",
    "type": "java",
    "request": "launch",
    "mainClass": "${fileBasenameNoExtension}",
    "console": "internalConsole"
}

1
2
3
4
5
6
7

# 调试技巧

# 1. 条件断点

// 在断点处右键 -> Edit Breakpoint
// 添加条件表达式
i > 5  // 只有当 i 大于 5 时才触发断点

1
2
3

# 2. 日志断点

// 在断点处右键 -> Edit Breakpoint -> Log Message
// 添加日志消息
Current value: {i}  // 输出当前 i 的值

1
2
3

# 3. 表达式求值

// 在调试控制台中输入表达式
array.length
object.property
functionCall()

1
2
3
4

# 搜索和替换

# 基础搜索

搜索快捷键:
- Ctrl+F          : 在文件中搜索
- Ctrl+Shift+F    : 在文件夹中搜索
- Ctrl+H          : 替换
- Ctrl+Shift+H    : 在文件夹中替换

1
2
3
4
5

# 正则表达式搜索

# 常用正则表达式

基本模式:
^               : 行首
$               : 行尾
.               : 任意字符
*               : 零个或多个
+               : 一个或多个
?               : 零个或一个
\d              : 数字
\w              : 单词字符
\s              : 空白字符
[abc]           : 字符集
[^abc]          : 否定字符集
(a|b)           : 分组和或

1
2
3
4
5
6
7
8
9
10
11
12
13

# 实际应用示例

1. 查找所有 console.log 语句:
   console\.log\(.*\);

2. 查找未使用的导入:
   import.*from.*['"][^'"]*['"];

3. 查找 TODO 注释:
   //\s*TODO.*$

4. 查找重复的空行:
   \n\s*\n\s*\n

5. 查找函数定义:
   function\s+\w+\s*\([^)]*\)\s*\{

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 高级替换技巧

# 1. 捕获组替换

查找: ^(\w+):\s*(.+)$
替换: - **$1**: $2

示例:
name: John Doe
age: 30

替换为:
- **name**: John Doe
- **age**: 30

1
2
3
4
5
6
7
8
9
10

# 2. 格式化代码

查找: function\s+(\w+)\s*\([^)]*\)\s*\{
替换: function $1() {\n\t$0\n}

查找: const\s+(\w+)\s*=\s*require\(['"]([^'"]+)['"]\);
替换: import $1 from '$2';

1
2
3
4
5

# 3. 批量重命名

查找: oldFunctionName
替换: newFunctionName

使用 Ctrl+Shift+L 选择所有匹配项
然后进行批量编辑

1
2
3
4
5

# 版本控制集成

# Git 集成

VSCode 内置了强大的 Git 支持，无需额外扩展即可进行基本的版本控制操作。

# 基础 Git 操作

源代码管理面板操作:
- 暂存更改 (Stage Changes)
- 取消暂存 (Unstage Changes)
- 提交更改 (Commit Changes)
- 推送更改 (Push Changes)
- 拉取更改 (Pull Changes)
- 查看差异 (View Changes)
- 查看历史 (View History)

1
2
3
4
5
6
7
8

# Git 配置

// settings.json - Git 配置
{
    "git.enabled": true,
    "git.path": "git",
    "git.autorefresh": true,
    "git.confirmSync": false,
    "git.enableSmartCommit": true,
    "git.enableCommitSigning": true,
    "git.ignoreLimitWarning": true,
    "git.ignoreSubmodules": false,
    "git.showPushSuccessNotification": true,
    "git.autoStash": true
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# Git 扩展推荐

GitLens:
- 增强的 Git 功能
- 行内 Git 信息
- 文件历史记录
- 分支比较
- 提交搜索

Git History:
- 查看文件历史
- 比较文件版本
- 查看提交详情

Git Graph:
- 可视化 Git 历史
- 分支图显示
- 交互式操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 其他版本控制系统

SVN:
- SVN 扩展
- TortoiseSVN 集成

Mercurial:
- Mercurial 扩展
- 基本操作支持

1
2
3
4
5
6
7

# 性能优化

# 编辑器性能

# 1. 文件排除

// settings.json - 排除文件
{
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/node_modules": true,
        "**/dist": true,
        "**/build": true,
        "**/.vscode": true,
        "**/*.log": true,
        "**/coverage": true
    },
    "search.exclude": {
        "**/node_modules": true,
        "**/dist": true,
        "**/build": true
    },
    "files.watcherExclude": {
        "**/node_modules/**": true,
        "**/dist/**": true,
        "**/build/**": true
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 2. 扩展管理

性能优化建议:
- 禁用不必要的扩展
- 定期更新扩展
- 使用扩展推荐功能
- 监控扩展性能影响

1
2
3
4
5

# 3. 内存优化

// settings.json - 内存优化
{
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,
    "workbench.editor.enablePreview": false,
    "workbench.editor.enablePreviewFromQuickOpen": false,
    "editor.minimap.enabled": false,
    "editor.renderWhitespace": "none"
}

1
2
3
4
5
6
7
8
9

# 工作区优化

# 1. 多根工作区

// workspace.code-workspace
{
    "folders": [
        {
            "name": "Frontend",
            "path": "./frontend"
        },
        {
            "name": "Backend",
            "path": "./backend"
        },
        {
            "name": "Shared",
            "path": "./shared"
        }
    ],
    "settings": {
        "files.exclude": {
            "**/node_modules": true
        }
    },
    "extensions": {
        "recommendations": [
            "ms-vscode.vscode-typescript-next",
            "esbenp.prettier-vscode"
        ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 2. 任务优化

// 优化任务配置
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Optimized Build",
            "type": "shell",
            "command": "npm",
            "args": ["run", "build"],
            "group": "build",
            "presentation": {
                "echo": false,
                "reveal": "silent",
                "focus": false,
                "panel": "shared"
            },
            "problemMatcher": []
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 故障排除

# 常见问题解决

# 1. 扩展问题

扩展无法加载:
- 重新加载窗口 (Ctrl+Shift+P -> Reload Window)
- 禁用扩展后重新启用
- 检查扩展兼容性
- 清除扩展缓存

扩展冲突:
- 禁用冲突的扩展
- 检查扩展设置
- 查看扩展输出日志

1
2
3
4
5
6
7
8
9
10

# 2. 性能问题

编辑器卡顿:
- 检查文件大小
- 禁用语法高亮
- 减少打开的文件数量
- 清理工作区缓存

内存使用过高:
- 关闭不必要的文件
- 禁用大型扩展
- 重启 VSCode
- 检查系统资源

1
2
3
4
5
6
7
8
9
10
11

# 3. 配置问题

设置不生效:
- 检查设置作用域
- 重启 VSCode
- 清除用户设置
- 检查 JSON 语法

快捷键冲突:
- 检查系统快捷键
- 自定义快捷键绑定
- 重置键盘快捷键

1
2
3
4
5
6
7
8
9
10

# 调试技巧

# 1. 开发者工具

打开开发者工具:
- Ctrl+Shift+P -> Developer: Toggle Developer Tools
- 查看控制台错误
- 检查网络请求
- 分析性能问题

1
2
3
4
5

# 2. 日志查看

查看日志:
- Help -> Toggle Developer Tools
- 查看 Console 标签页
- 检查错误信息
- 分析性能数据

1
2
3
4
5

# 3. 扩展调试

扩展调试:
- 查看扩展输出
- 检查扩展设置
- 禁用问题扩展
- 报告扩展问题

1
2
3
4
5

# 最佳实践

# 1. 工作区组织

推荐的项目结构:
project/
├── .vscode/
│   ├── settings.json
│   ├── tasks.json
│   ├── launch.json
│   └── extensions.json
├── src/
├── dist/
├── tests/
├── docs/
└── README.md

1
2
3
4
5
6
7
8
9
10
11
12

# 2. 设置管理

设置优先级:
1. 工作区设置 (最高优先级)
2. 用户设置 (中等优先级)
3. 默认设置 (最低优先级)

设置最佳实践:
- 使用工作区设置管理项目特定配置
- 使用用户设置管理个人偏好
- 定期备份重要设置
- 使用设置同步功能

1
2
3
4
5
6
7
8
9
10

# 3. 扩展管理

扩展选择原则:
- 选择官方或知名扩展
- 检查扩展更新频率
- 查看用户评价和下载量
- 测试扩展兼容性

扩展维护:
- 定期更新扩展
- 清理未使用的扩展
- 监控扩展性能影响
- 备份扩展配置

1
2
3
4
5
6
7
8
9
10
11

# 4. 团队协作

团队配置:
- 使用工作区设置
- 推荐扩展列表
- 统一代码格式
- 共享调试配置

代码规范:
- 使用 Prettier 格式化
- 配置 ESLint 检查
- 设置 Git hooks
- 统一提交信息格式

1
2
3
4
5
6
7
8
9
10
11

# 实际应用案例

# 1. Web 开发工作流

# React 项目配置

// .vscode/settings.json
{
    "typescript.preferences.importModuleSpecifier": "relative",
    "javascript.preferences.importModuleSpecifier": "relative",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// .vscode/tasks.json
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Start Development Server",
            "type": "shell",
            "command": "npm",
            "args": ["start"],
            "group": "build",
            "isBackground": true,
            "problemMatcher": {
                "owner": "custom",
                "pattern": {
                    "regexp": "^$",
                    "file": 1,
                    "location": 2,
                    "message": 3
                },
                "background": {
                    "activeOnStart": true,
                    "beginsPattern": "^.*starting development server.*",
                    "endsPattern": "^.*ready in.*"
                }
            }
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 2. Python 开发工作流

// .vscode/settings.json
{
    "python.defaultInterpreterPath": "./venv/bin/python",
    "python.linting.enabled": true,
    "python.linting.pylintEnabled": true,
    "python.formatting.provider": "black",
    "python.formatting.blackArgs": ["--line-length", "88"],
    "editor.formatOnSave": true,
    "[python]": {
        "editor.defaultFormatter": "ms-python.python"
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: Current File",
            "type": "python",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal",
            "pythonPath": "./venv/bin/python"
        },
        {
            "name": "Python: Django",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/manage.py",
            "args": ["runserver"],
            "django": true,
            "console": "integratedTerminal"
        }
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 3. 多语言项目配置

// workspace.code-workspace
{
    "folders": [
        {
            "name": "Frontend (React)",
            "path": "./frontend"
        },
        {
            "name": "Backend (Python)",
            "path": "./backend"
        },
        {
            "name": "Mobile (React Native)",
            "path": "./mobile"
        }
    ],
    "settings": {
        "files.exclude": {
            "**/node_modules": true,
            "**/__pycache__": true,
            "**/*.pyc": true
        },
        "search.exclude": {
            "**/node_modules": true,
            "**/dist": true,
            "**/build": true
        }
    },
    "extensions": {
        "recommendations": [
            "ms-vscode.vscode-typescript-next",
            "esbenp.prettier-vscode",
            "ms-python.python",
            "ms-python.pylance"
        ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 扩展资源

# 1. 官方资源

VSCode 官网: https://code.visualstudio.com/
VSCode 文档: https://code.visualstudio.com/docs
VSCode API: https://code.visualstudio.com/api
扩展市场: https://marketplace.visualstudio.com/

# 2. 社区资源

VSCode 中文文档: https://code.visualstudio.com/docs/getstarted/locales
VSCode 扩展开发指南: https://code.visualstudio.com/api
VSCode 快捷键参考: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

# 3. 学习资源

VSCode 官方教程: https://code.visualstudio.com/learn
VSCode 最佳实践: https://code.visualstudio.com/docs/getstarted/tips-and-tricks
VSCode 扩展开发: https://code.visualstudio.com/api/get-started/your-first-extension

# link

#IDE

上次更新: 2025/10/19, 17:07:19

← IDEA Docker 使用指南→