🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件

前几天有同学问我:

"你 VSCode 里都装了哪些插件?为什么写代码那么快?"

我把正在用的 12 款全部扒出来,分 3 类、附「前后对比」代码片段,

让你 5 分钟看懂它们到底解决了什么痛点。

(⭐=几乎必装,△=按需取用)

一、代码质量 & 格式化

插件 市场关键词 对比片段
Prettier -- Code formatter esbenp.prettier-vscode 一键把"能跑"变"能看」
ESLint dbaeumer.vscode-eslint 实时红线+自动修复
Code Spell Checker streetsidesoftware.code-spell-checker 拒绝 getUesrInfo typo

演示 1:Prettier + ESLint 双剑合璧

js 复制代码
// 保存前(手写随意)
function getUserInfo(   id,token){
    const url='/api/user/'+id+'?token='+token
    return fetch(url).then(res=>res.json()).then(data=>{
    console.log('数据',data)
        return data
    })
}

// 保存后(Prettier 自动)
function getUserInfo(id, token) {
  const url = `/api/user/${id}?token=${token}`;
  return fetch(url)
    .then((res) => res.json())
    .then((data) => {
      console.log('数据', data);
      return data;
    });
}

ESLint 同时把「未使用变量」「缺少分号」全部修好,0 条红线。

演示 2:Code Spell Checker

当你手滑打出 getUesrInfo,波浪线立刻出现,鼠标悬停提示
"Uesr" is a misspelling of "User",一键修正。

二、前端框架 & 智能提示

插件 市场关键词 对比片段
Vue - Official vue.volar <template> 高亮+类型提示
ES7+ React/Redux/React-Native snippets dsznajder.es7-react-js-snippets 3 秒生成组件骨架
Icon Fonts idleberg.icon-fonts 图标类名自动补全

演示 3:Vue - Official

输入 <scr 立即提示 <script setup lang="ts">,跳转定义直达 defineProps<{}> 类型声明。

演示 4:ES7 Snippets

新建 Header.jsx → 敲 rafceTab

jsx 复制代码
import React from 'react';

const Header = () => {
  return <div>Header</div>;
};

export default Header;

全程 1.5 秒,格式直接按 .prettierrc 来。

演示 5:Icon Fonts

输入 bi-alarm 自动补全 <i class="bi bi-alarm"></i>,并给出图标预览,少翻 80% 文档。

三、效率 & 可视化小工具

插件 市场关键词 对比片段
GitLens eamodio.gitlens 行级 blame+分支图谱
Tabnine tabnine.tabnine-vscode AI 整行补全
Turbo Console Log chakrounanas.turbo-console-log 调试日志"带 GPS"
Live Server ritwickdey.liveserver 右键 HTML 秒起服务
Draw.io Integration hediet.vscode-drawio 在编辑器里画架构图
CodeSnap adpyke.codesnap 代码一键变高清图

演示 6:GitLens

在任意行 hover,即刻出现
张三, 2 天前 · feat: 增加用户接口 ------ 代码历史一目了然。

演示 7:Tabnine

const [sortOrder, set → 10 ms 内补全
const [sortOrder, setSortOrder] = useState('asc');

本地+云端模型,断网也能用。

演示 8:Turbo Console Log

选中变量 userListCtrl+Alt+L

js 复制代码
console.log('🚀 ~ file: Home.jsx:42 ~ useEffect ~ userList:', userList);

文件名、行号、函数名一次性带齐,定位 BUG 直接跳转。

演示 9:Live Server

右键 index.htmlOpen with Live Server → 浏览器自动打开 localhost:5500,保存即刷新。

演示 10:Draw.io Integration

新建 architecture.drawio → 拖拽画微前端架构 → 导出 .drawio.svg,直接贴 README,放大不失真。

演示 11:CodeSnap

选中一段 TypeScript → 一键生成 4K 圆角截图,13 种主题可选,复制即可贴 Keynote/博客。

一键配置小抄(给读者的福利)

.vscode/settings.json

json 复制代码
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": ["source.fixAll.eslint"],
  "turboConsoleLog.addSemicolonInTheEnd": true,
  "liveServer.settings.port": 5500,
  "gitlens.currentLine.enabled": true
}

把上面文件扔进仓库根目录,新人 Clone 后重启 VSCode,即刻拥有同款体验。

12 款全在这,一个都没少

类别 插件
格式化 Prettier、ESLint、Code Spell Checker
框架提示 Vue - Official、ES7 Snippets、Icon Fonts
效率工具 GitLens、Tabnine、Turbo Console Log、Live Server、Draw.io、CodeSnap

装好它们,VSCode 直接从「记事本」升级成「前端旗舰 IDE」。

如果你还有私藏神器,评论区反向安利,一起把生产力拉满!

相关推荐
珍宝商店3 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown3 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
YAY_tyy3 小时前
【JavaScript 性能优化实战】第六篇:性能监控与自动化优化
javascript·性能优化·自动化
gnip4 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿5 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
闭着眼睛学算法5 小时前
【华为OD机考正在更新】2025年双机位A卷真题【完全原创题解 | 详细考点分类 | 不断更新题目 | 六种主流语言Py+Java+Cpp+C+Js+Go】
java·c语言·javascript·c++·python·算法·华为od
烛阴5 小时前
【TS 设计模式完全指南】构建你的专属“通知中心”:深入观察者模式
javascript·设计模式·typescript
lumi.6 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰6 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息6 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js