VS Code高效开发:必装插件与配置技巧
Visual Studio Code是当今最流行的代码编辑器,它轻量、免费、插件丰富。但是要让VS Code真正发挥威力,需要正确的插件配置和使用技巧。本文将分享我个人多年使用VS Code积累的经验,包括必装插件推荐、效率配置和实用快捷键,帮助你将开发效率提升到新的高度。
一、必装插件推荐
1. 代码质量与格式化
- ESLint - JavaScript/TypeScript代码检查,实时标记代码问题
- Prettier - 代码自动格式化,统一团队代码风格
- PHP Intelephense - PHP语言服务器,提供智能补全和跳转
- Python - Microsoft官方Python扩展
// settings.json - 格式化配置
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
"[php]": {
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
},
"intelephense.format.braces": "k&r",
"intelephense.diagnostics.enable": true
}
2. 开发效率
- GitLens - 查看每一行的Git历史和作者
- Auto Rename Tag - 自动重命名HTML/XML配对标签
- Path Intellisense - 文件路径自动补全
- Thunder Client - 轻量级API测试工具(替代Postman)
二、工作区配置
// .vscode/settings.json - 项目级配置
{
// 搜索排除
"search.exclude": {
"**/node_modules": true,
"**/vendor": true,
"**/runtime": true
},
// 文件排除
"files.exclude": {
"**/.git": true,
"**/runtime": true,
"**/.DS_Store": true
},
// 编辑器配置
"editor.fontSize": 14,
"editor.tabSize": 4,
"editor.wordWrap": "on",
"editor.minimap.enabled": false,
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs": "active",
// 文件配置
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000,
"files.eol": "
",
// 终端配置
"terminal.integrated.fontSize": 13,
"terminal.integrated.scrollback": 5000
}
三、实用快捷键
掌握以下快捷键可以让你的编码速度翻倍:
// 编辑
Ctrl + D # 选中下一个相同文本
Ctrl + Shift + L # 选中所有相同文本
Alt + 上/下 # 当前行上移/下移
Ctrl + Shift + K # 删除当前行
Ctrl + / # 切换注释
Alt + Shift + F # 格式化代码
// 多光标
Alt + 点击 # 添加多光标
Ctrl + Alt + 上/下 # 上下添加光标
Ctrl + Shift + Alt # 列选择模式
// 导航
Ctrl + P # 快速打开文件
Ctrl + Shift + F # 全局搜索
Ctrl + T # 按符号搜索
Ctrl + G # 跳转到指定行
Alt + 左/右 # 前进/后退导航
// 面板
Ctrl + ` # 切换终端
Ctrl + B # 切换侧边栏
Ctrl + J # 切换面板
Ctrl + Shift + E # 文件浏览器
四、代码片段
// .vscode/php.code-snippets
{
"ThinkPHP Controller": {
"scope": "php",
"prefix": "tp-controller",
"body": [
"<?php",
"",
"namespace app\${1:index}\controller;",
"",
"use app\index\controller\Base;",
"",
"class ${2:Name} extends Base",
"{",
" public function ${3:index}()",
" {",
" $4",
" return $this->fetch();",
" }",
"}"
]
}
}
VS Code的强大之处在于其高度的可定制性。花时间配置一个适合自己的开发环境,会在长期的工作中节省大量时间。建议将你的VS Code配置文件保存在GitHub Gist中,这样在任何电脑上都能快速恢复你的开发环境。