真正能省下每天1小时以上重复操作的插件仅十几个：prettier+eslint+typescript构成js/ts开发三件套，需按序协同——eslint查逻辑与风格、prettier专管格式、ts提供类型推导；vue3必须禁用vetur、启用volar并开启takeovermode；quokka.js替代console.log实现即时执行验证；path intellisense、vscode-icons、better comments等“隐形效率项”通过路径补全、文件图标识别和高亮注释显著提升日常手感。
VSCode 里真正能省下每天 1 小时以上重复操作的插件，其实就那么十几个。装太多反而拖慢启动速度、触发冲突，尤其 JS/TS 项目里，Prettier 和 ESLint 配错顺序、Volar 和 Vetur 同时启用、Tabnine 和 Copilot 共存，都会导致补全失效或格式化错乱。
JS/TS 开发绕不开的三件套：Prettier + ESLint + TypeScript
这三者不是“装了就行”，而是必须按顺序协同工作：
-
ESLint负责检查逻辑错误、潜在 bug（比如no-unused-vars）、代码风格（如quotes），但不负责格式； -
Prettier只管格式（缩进、换行、引号、分号），不管语义； -
TypeScript插件（含JavaScript and TypeScript Nightly）提供类型推导和跨文件跳转，是ESLint规则生效的前提。
常见错误：直接启用 "editor.formatOnSave": true 后发现保存时代码被反复重排——大概率是没装 eslint-config-prettier，或者没在 .eslintrc.js 的 extends 里把它放在最后。
实操建议：
- 在
.eslintrc.js中写：extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier']； - VSCode 设置里关掉
editor.formatOnSave，改用editor.codeActionsOnSave触发source.fixAll.eslint； - 不要手动运行
Prettier格式化命令，它只该作为 ESLint 的“后置清洗步骤”存在。
Vue 3 项目必须禁用 Vetur，只留 Volar
Vue 2 用 Vetur 没问题，但 Vue 3 + <script setup></script> 场景下，Vetur 会把 defineProps 当作未定义变量报错，且无法正确解析组合式 API 的类型。
典型现象：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- 鼠标悬停
props显示any，而非实际类型； -
ref或computed的返回值类型丢失； - 模板中
v-model绑定字段无自动补全。
解决方式很简单：
- 卸载
Vetur（不是禁用，是彻底删掉）； - 确保
Volar已安装，并在设置中开启"volar.takeOverMode": true； - 重启 VSCode —— 这一步不能跳，Volar 需要接管语言服务才能生效。
JS 实时调试别只靠 console.log，Quokka.js 更快
写一个工具函数，想验证输入输出是否符合预期？console.log + 手动调用 + 切页面 + 刷新 → 太慢。用 Quokka.js，代码写完立刻看到结果，连运行环境都不用配。
它不是 REPL，而是“嵌入式沙盒”：
- 支持
const result = add(2, 3)后面直接显示// => 5； - 支持异步代码，
await fetch(...)会真实发出请求并显示响应； - 可读取当前文件同目录下的
data.json，不用 mock 数据。
注意点：
- 默认用 Node.js 运行，若依赖浏览器 API（如
localStorage），需在文件顶部加注释// @ts-nocheck并手动切换运行环境； - 不要在大型项目根目录开 Quokka 文件，它会尝试解析整个
node_modules，卡顿明显； - 配合
Code Runner使用更灵活：右键菜单选 “Run Code” 适合单次执行，Quokka 适合持续迭代。
别忽略路径补全和图标识别这类“隐形效率项”
看似不关键，但每天多点 5 次路径、多扫 3 秒文件类型，一年就是几十小时。真正影响手感的是这些细节：
-
Path Intellisense：输入import { foo } from './，它会列出当前目录所有.ts和.js文件，支持子目录递归提示，比手动敲../utils/快得多； -
vscode-icons：一眼区分index.tsx（蓝色 React 入口）、types.ts（紫色类型定义）、config.js（灰色配置），不用 hover 看后缀； -
Better Comments：把// TODO渲染成橙色、// FIXME渲染成红色，比默认灰字醒目十倍，避免上线前漏掉待办。
它们体积小、无副作用，但一旦习惯，再换回裸 VSCode 会明显感觉“反应迟钝”。真正卡顿的从来不是插件本身，而是你被迫回归低效操作路径。
