Featured image of post vscode实用技巧

vscode实用技巧

🇨🇳每日一言:

历史的发展是不以人的意志为转移的—— 毛泽东


💯 核心快捷键:

掌握快捷键是进阶的第一步:

功能快捷键 (Windows/Linux)快捷键 (macOS)描述
万能命令面板Ctrl + Shift + PCmd + Shift + P查找执行
快速打开文件Ctrl + PCmd + P输入文件名
多光标编辑Alt + 点击Opt + 点击在多个位置同时输入
批量选中相同词Ctrl + DCmd + D依次选中下一个相同的单词
快速跳转行Ctrl + GCtrl + G输入行号直接定位
拆分编辑器Ctrl + \Cmd + \垂直/水平分屏对比代码
打开内置终端Ctrl + `Ctrl + `无需切换窗口直接跑脚本

💯 深度进阶技巧

👽符号与结构搜索

文件内符号查找:按 Ctrl + Shift + O,输入 @ 可以列出当前文件的所有函数、类和变量。

全局符号查找:按 Ctrl + T,可以跨文件搜索整个项目中的类或方法名。

👽Emmet 高效编写 HTML/CSS

在 HTML 文件中输入 ul>li*5 然后按 Tab,会自动生成包含 5 个列表项的结构。VS Code 原生支持 Emmet,几乎所有前端布局都能通过“缩写”快速生成。

👽自定义代码片段 (User Snippets)

如果你经常写重复的代码块(如 React 组件模版),可以通过 File > Preferences > User Snippets 创建自定义触发词。例如输入 clg 自动补全为 console.log()。

👽禅模式 (Zen Mode)

通过 Ctrl + K, Z 进入禅模式。它会隐藏侧边栏、状态栏等所有视觉干扰,让你百分之百专注于代码逻辑。

💯 必装插件推荐

🤖 AI 增强类

  • GitHub Copilot / Codeium:目前的标配 AI 助手,能够根据上下文自动补全整行甚至整段代码。

  • Tabnine:另一款强大的 AI 补全工具,尤其擅长处理私有化代码库。

🛠 生产力增强类

  • GitLens:将 Git 功能发挥到极致,直接在代码行末显示“谁在什么时候改了这行”。

  • Prettier:代码格式化神器,保证团队代码风格统一。

  • Live Server:一键开启本地开发服务器,修改 HTML/CSS 后浏览器实时刷新。

  • Error Lens:将报错信息直接显示在代码行中,不再需要鼠标悬停查看。

热爱生活 学无止境
使用 Hugo 构建
主题 StackJimmy 设计