🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 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」。

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

相关推荐
Mo_jon3 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible3 小时前
终止异步操作
前端·javascript·vue.js
Stringzhua3 小时前
setup函数相关【3】
前端·javascript·vue.js
neon12043 小时前
解决Vue Canvas组件在高DPR屏幕上的绘制偏移和区域缩放问题
前端·javascript·vue.js·canva可画
Sammyyyyy4 小时前
Node.js 做 Web 后端优势为什么这么大?
开发语言·前端·javascript·后端·node.js·servbay
妮妮喔妮4 小时前
Webpack 有哪些特性?构建速度?如何优化?
前端·webpack·node.js
ST.J4 小时前
webpack笔记
前端·笔记·webpack
Baklib梅梅4 小时前
2025 年 8 个最佳网站内容管理系统(CMS)
前端·ruby on rails·前端框架·ruby
IT_陈寒4 小时前
🔥5个必学的JavaScript性能黑科技:让你的网页速度提升300%!
前端·人工智能·后端