前几天有同学问我:
"你 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」。
如果你还有私藏神器,评论区反向安利,一起把生产力拉满!