🧙‍♂️ 老司机私藏清单：从“记事本”到“旗舰 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 → 敲 rafce → Tab：

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

选中变量 userList → Ctrl+Alt+L：

js 复制代码

console.log('🚀 ~ file: Home.jsx:42 ~ useEffect ~ userList:', userList);

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

演示 9：Live Server

右键 index.html → Open 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」。

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