我用这 5 款 VS Code 插件，开发效率直接提升 3 倍
最近给新电脑装 VS Code，顺手把插件库从头捋了一遍。这几年踩过不少坑，最后留在列表里的，全是真正能让手速飞起来的东西。今天就来聊聊我这 5 款生产力担当，每一个都配了详细代码和说明，你可以直接复制去试试。
第一款叫 Turbo Console Log，专门治那种写完变量名还要手动敲 console.log 的强迫症。选中你要打印的变量，按 Ctrl + Alt + L，它就在下面自动给你生成一句带文件名和行号的调试语句。更狠的是，它还支持一次性给多个变量批量插入。
最常用的是这种场景——你正在调一个接口返回的数据，选中 data 按快捷键，直接出来：
// 选中 data 后自动生成
console.log('🚀 ~ file: user.js:12 ~ data:', data)
如果你项目里习惯用 debugger 或者 console.table，也可以在设置里改，文件是 .vscode/settings.json：
{"turboConsoleLog.logMessagePrefix": "🔥","turboConsoleLog.logFunction": "console.table","turboConsoleLog.insertEnclosingClass": false,"turboConsoleLog.delimiterInsideMessage": "->"
}
这样一来生成的内容就变成 console.table('🔥 ~ user.js:12 -> data:', data)，调试信息一目了然，再也不会在控制台大海捞针了。
第二款是 Snippet Generator，一个自己造代码片段的工具。VS Code 自带的 Snippet 够用，但这个插件的妙处在于它能直接选中一段你写好的代码，右键“生成 Snippet”，就弹出一个面板让你填触发词和描述。
我平时写 React 组件，每个文件开头都要写一堆重复的 import 和函数结构，用这个 30 秒就绑定了自定义片段。比如我定义一个 rfc（React functional component）的片段，内容是这样的：
import React from 'react'interface ${1:Props} {// ${2:propName}: ${3:propType}
}const ${TM_FILENAME_BASE}: React.FC<${1:Props}> = (props) => {return (<div>$0</div>)
}export default ${TM_FILENAME_BASE}
${1:Props} 这些是占位符和跳转点，TM_FILENAME_BASE 则自动取文件名。现在新建一个组件文件，敲 rfc 然后按 Tab，整个模板直接出来了，光标自动落在 Props 上让你修改——属于那种用一次就戒不掉的爽感。
第三个要说的插件比较冷门，叫 Clear Console，功能就一个：清除文件中所有的 console.log。你可能觉得这不算个事，但项目快上线前你要手删几十个调试语句，就知道有多崩溃了。用法也简单，Ctrl + Shift + P 打开命令面板，输 Clear Console 然后回车，当前文件里所有 console.* 全部消失，不管是 log、warn 还是 error。
它还配了一个配置项，可以精确控制要清除的方法，比如我只想保留 console.error，那就在 settings.json 里写：
{"clearConsole.exclude": ["error"]
}
这样清除时就会自动跳过 console.error，业务出错日志不受影响。我一般配合 Git 的提交前检查使用，手动执行一下，干净得很。
开发效率翻倍的第四款插件是 Live Server 的进阶替代品——Live Preview。这个东西直接在 VS Code 里用内嵌浏览器打开网页，关键它跟你的编辑器实时联动，文件一保存页面就自动刷新，而且支持移动端视图模拟。以前我用 Live Server，要切浏览器再 F5，现在直接在同一窗口里看效果，省掉无数次 Alt + Tab。
代码层面，你只需要在一个 HTML 文件上右键“Open with Live Preview”，它就启动一个本地服务器，地址栏显示 http://127.0.0.1:3000。如果你改了 CSS 文件，页面会毫秒级替换样式，不会整页重刷，这得益于它内部的 WebSocket 通信。开发单页面应用或者静态页面时，我直接把浏览器面板放在右边分屏，边写边看：
这种沉浸式开发，比来回切窗口舒服太多了。尤其对于刚调试动画或者微调样式的情况，肉眼可见的省时间。
最后一款压轴的叫 Error Lens，这插件直接把代码错误和警告怼到你脸上——就在出问题的那一行末尾高亮显示，而不是去底部状态栏看。比如你写 TypeScript，变量未定义，那一行末尾就会冒出一串红色的提示文字 Cannot find name 'xxx'，连鼠标悬停都不用，扫一眼就知道错在哪。
它提供的配置自由度也很高。我习惯让错误的背景变成淡红色，方便快速定位：
{"errorLens.enabledDiagnosticLevels": ["error", "warning"],"errorLens.errorBackground": "rgba(255,0,0,0.1)","errorLens.errorMessageBackground": "rgba(255,0,0,0.2)","errorLens.gutterIconsEnabled": true
}
这样整行都会被浅红底色标记，侧边还带个醒目的图标，团队里新来的同事看到都说“原来代码可以这么直观”。尤其是你一边重构一边看着那些红色提示一个个消失，那感觉就跟玩消除游戏似的，爽。
这些插件单个看都不大，但组合到日常开发流里，真的能省出一大截时间。如果你也在用类似的提效工具，欢迎在评论区留言互相安利，我会持续更新这个清单。