VS Code效率提升完全指南
VS Code效率提升完全指南
Visual Studio Code是目前最流行的代码编辑器之一。本文将分享提升VS Code使用效率的各种技巧。
高效快捷键
1. 基础快捷键
通用操作：
Ctrl+Shift+P / Cmd+Shift+P 命令面板
Ctrl+P / Cmd+P 快速打开文件
Ctrl+Shift+N / Cmd+Shift+N 新建窗口
Ctrl+W / Cmd+W 关闭当前标签
Ctrl+Shift+T / Cmd+Shift+T 重新打开关闭的标签
编辑操作：
Ctrl+C / Cmd+C 复制当前行（无选中时）
Ctrl+X / Cmd+X 剪切当前行（无选中时）
Alt+↑ / Alt+↓ 移动当前行
Shift+Alt+↑ / Shift+Alt+↓ 复制当前行到上方/下方
Ctrl+Shift+K / Cmd+Shift+K 删除当前行
Ctrl+/ / Cmd+/ 注释/取消注释
Ctrl+Shift+/ / Cmd+Shift+/ 块注释
光标操作：
Ctrl+D / Cmd+D 选中下一个相同内容
Ctrl+Shift+L / Cmd+Shift+L 选中所有相同内容
Alt+Click 多光标编辑
Ctrl+Alt+↑ / ↓ 向上/下添加光标
Ctrl+U / Cmd+U 撤销上一个光标操作
导航操作：
Ctrl+G / Cmd+G 跳转到指定行
Ctrl+Shift+O / Cmd+Shift+O 跳转到符号
Ctrl+T / Cmd+T 显示所有符号
Ctrl+Shift+M / Cmd+Shift+M 显示问题面板
F8 跳转到下一个错误或警告
2. 进阶快捷键
窗口管理：
Ctrl+\ / Cmd+\ 拆分编辑器
Ctrl+1/2/3 / Cmd+1/2/3 切换到第1/2/3个编辑器组
Ctrl+K Ctrl+←/→ 切换到上一个/下一个编辑器组
Ctrl+K Z 禅模式
搜索替换：
Ctrl+F / Cmd+F 当前文件查找
Ctrl+H / Cmd+H 当前文件替换
Ctrl+Shift+F / Cmd+Shift+F 全局查找
Ctrl+Shift+H / Cmd+Shift+H 全局替换
Ctrl+Shift+J / Cmd+Shift+J 切换搜索细节
终端操作：
Ctrl+` / Cmd+` 显示/隐藏终端
Ctrl+Shift+` / Cmd+Shift+` 新建终端
Ctrl+Shift+C / Cmd+Shift+C 复制终端选中内容
Ctrl+Shift+V / Cmd+Shift+V 粘贴到终端
必备插件推荐
1. 代码增强
IntelliSense和代码补全
{
"recommendations": [
"VisualStudioExptTeam.vscodeintellicode", // AI辅助代码补全
"christian-kohler.path-intellisense", // 路径智能提示
"formulahendry.auto-rename-tag", // 自动重命名标签
"streetsidesoftware.code-spell-checker", // 拼写检查
"usernamehw.errorlens" // 错误提示增强
]
}
代码格式化
{
"recommendations": [
"esbenp.prettier-vscode", // Prettier格式化
"dbaeumer.vscode-eslint", // ESLint
"stylelint.vscode-stylelint", // Stylelint
"ms-python.black-formatter", // Python Black
"golang.go" // Go格式化
]
}
2. 版本控制
{
"recommendations": [
"eamodio.gitlens", // Git增强
"donjayamanne.githistory", // Git历史
"mhutchie.git-graph", // Git图形化
"github.vscode-pull-request-github" // GitHub PR
]
}
3. 调试工具
{
"recommendations": [
"ms-vscode.vscode-js-debug", // JavaScript调试
"ms-python.debugpy", // Python调试
"golang.go", // Go调试
"vadimcn.vscode-lldb", // C/C++调试
"ms-vscode.hexeditor" // 十六进制编辑器
]
}
4. 主题和界面
{
"recommendations": [
"pkief.material-icon-theme", // Material图标
"dracula-theme.theme-dracula", // Dracula主题
"github.github-vscode-theme", // GitHub主题
"zhuangtongfa.material-theme", // One Dark Pro
"johnpapa.vscode-peacock" // 工作区颜色标识
]
}
自定义配置
1. 用户设置
// settings.json
{
// 编辑器设置
"editor.fontSize": 14,
"editor.fontFamily": "'Fira Code', 'Consolas', monospace",
"editor.fontLigatures": true,
"editor.lineHeight": 1.6,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"editor.wordWrap": "on",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"editor.formatOnSave": true,
"editor.formatOnPaste": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "explicit"
},
// 文件设置
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/node_modules": true,
"**/dist": true,
"**/.next": true
},
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/node_modules/**": true
},
// 搜索设置
"search.exclude": {
"**/node_modules": true,
"**/dist": true,
"**/.git": true
},
// 终端设置
"terminal.integrated.shell.linux": "/bin/zsh",
"terminal.integrated.fontSize": 13,
"terminal.integrated.cursorStyle": "line",
// Git设置
"git.enableSmartCommit": true,
"git.confirmSync": false,
"git.autofetch": true,
// 扩展设置
"extensions.autoUpdate": true,
// 工作台设置
"workbench.colorTheme": "Dracula",
"workbench.iconTheme": "material-icon-theme",
"workbench.startupEditor": "welcomePage",
"workbench.tree.indent": 20
}
2. 工作区设置
// .vscode/settings.json
{
// Python项目
"python.defaultInterpreterPath": "./venv/bin/python",
"python.linting.enabled": true,
"python.linting.pylintEnabled": true,
"python.formatting.provider": "black",
"python.testing.pytestEnabled": true,
// JavaScript/TypeScript项目
"typescript.preferences.importModuleSpecifier": "relative",
"javascript.preferences.importModuleSpecifier": "relative",
"eslint.workingDirectories": ["./src"],
// 项目特定的文件排除
"files.exclude": {
"**/coverage": true,
"**/.nyc_output": true
}
}
调试配置
1. Node.js调试
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Program",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/src/index.js",
"env": {
"NODE_ENV": "development"
},
"console": "integratedTerminal"
},
{
"name": "Attach to Process",
"type": "node",
"request": "attach",
"processId": "${command:PickProcess}"
},
{
"name": "Debug Jest Tests",
"type": "node",
"request": "launch",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run",
"test",
"--",
"--runInBand",
"--no-cache"
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen"
}
]
}
2. Python调试
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Python: Current File",
"type": "debugpy",
"request": "launch",
"program": "${file}",
"console": "integratedTerminal"
},
{
"name": "Python: Django",
"type": "debugpy",
"request": "launch",
"program": "${workspaceFolder}/manage.py",
"args": [
"runserver"
],
"django": true,
"console": "integratedTerminal"
},
{
"name": "Python: Flask",
"type": "debugpy",
"request": "launch",
"module": "flask",
"env": {
"FLASK_APP": "app.py",
"FLASK_ENV": "development"
},
"args": [
"run",
"--no-debugger"
],
"jinja": true,
"console": "integratedTerminal"
},
{
"name": "Python: Remote Attach",
"type": "debugpy",
"request": "attach",
"connect": {
"host": "localhost",
"port": 5678
}
}
]
}
3. Docker调试
// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Docker: Attach to Node",
"type": "node",
"request": "attach",
"port": 9229,
"address": "localhost",
"localRoot": "${workspaceFolder}",
"remoteRoot": "/app",
"skipFiles": ["<node_internals>/**"]
},
{
"name": "Docker: Python",
"type": "debugpy",
"request": "attach",
"connect": {
"host": "localhost",
"port": 5678
},
"pathMappings": [
{
"localRoot": "${workspaceFolder}",
"remoteRoot": "/app"
}
]
}
]
}
代码片段
1. 自定义代码片段
// .vscode/snippets/javascript.json
{
"Console Log": {
"prefix": "clg",
"body": [
"console.log(${1:message});"
],
"description": "Console log statement"
},
"Arrow Function": {
"prefix": "afn",
"body": [
"const ${1:functionName} = (${2:params}) => {",
" ${3:// body}",
"};"
],
"description": "Arrow function"
},
"React Component": {
"prefix": "rfc",
"body": [
"import React from 'react';",
"",
"const ${1:ComponentName} = () => {",
" return (",
" <div>",
" ${2:// content}",
" </div>",
" );",
"};",
"",
"export default ${1:ComponentName};"
],
"description": "React functional component"
},
"Jest Test": {
"prefix": "jest",
"body": [
"describe('${1:description}', () => {",
" it('should ${2:behavior}', () => {",
" ${3:// test}",
" });",
"});"
],
"description": "Jest test suite"
}
}
2. 多光标编辑技巧
Alt+Click 在多个位置添加光标
Ctrl+Alt+↑/↓ 向上/下添加光标
Ctrl+D 选中下一个相同单词
Ctrl+Shift+L 选中所有相同单词
Ctrl+F2 选中所有出现
Ctrl+Shift+Alt+鼠标拖动 列选择模式
任务配置
1. 构建任务
// .vscode/tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "npm: build",
"type": "npm",
"script": "build",
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": ["$tsc"]
},
{
"label": "npm: test",
"type": "npm",
"script": "test",
"group": "test",
"presentation": {
"echo": true,
"reveal": "always",
"focus": false,
"panel": "shared"
}
},
{
"label": "Docker: Build",
"type": "shell",
"command": "docker",
"args": [
"build",
"-t",
"myapp:latest",
"."
],
"group": "build"
},
{
"label": "Run All Tests",
"dependsOn": ["npm: test", "npm: lint"],
"dependsOrder": "sequence"
}
]
}
2. 复合任务
{
"version": "2.0.0",
"tasks": [
{
"label": "Build and Test",
"dependsOrder": "sequence",
"dependsOn": ["npm: build", "npm: test"],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
扩展开发
1. 扩展清单
// package.json
{
"name": "my-extension",
"displayName": "My Extension",
"description": "My awesome VS Code extension",
"version": "0.0.1",
"engines": {
"vscode": "^1.74.0"
},
"categories": ["Other"],
"activationEvents": [
"onCommand:myExtension.helloWorld"
],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "myExtension.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./"
},
"devDependencies": {
"@types/vscode": "^1.74.0",
"@types/node": "18.x",
"typescript": "^4.9.4"
}
}
2. 扩展代码
// src/extension.ts
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
console.log('Congratulations, your extension "my-extension" is now active!');
let disposable = vscode.commands.registerCommand(
'myExtension.helloWorld',
() => {
vscode.window.showInformationMessage('Hello World from My Extension!');
}
);
context.subscriptions.push(disposable);
}
export function deactivate() {}
性能优化
1. 启动优化
{
// 延迟加载扩展
"extensions.autoUpdate": false,
// 禁用不用的扩展
"extensions.ignoreRecommendations": true,
// 优化文件监视
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/node_modules/**": true,
"**/.next/**": true,
"**/dist/**": true
}
}
2. 内存优化
{
// 限制搜索结果数量
"search.maxResults": 1000,
// 禁用 minimap（如不需要）
"editor.minimap.enabled": false,
// 限制同时打开的标签数
"workbench.editor.limit.enabled": true,
"workbench.editor.limit.value": 10
}
总结
提升VS Code效率的关键点：
- 掌握快捷键：熟练使用快捷键可以大幅提升编码速度
- 合理配置：根据个人习惯和工作需求定制编辑器
- 精选插件：安装必要的插件，避免过度安装
- 代码片段：创建常用代码片段，提高编码效率
- 调试配置：配置好调试环境，快速定位问题
- 任务自动化：使用tasks.json自动化重复工作
通过持续优化配置和工作流程，可以让VS Code成为真正高效的开发工具。