整理了一份前端开发常用的VSCode插件清单,涵盖标签自动更名、代码运行、CSS跳转、ESLint规范、Git增强、代码片段、Vue官方工具(Volar已合并为Vue-Official)、主题美化等类别,并说明了部分插件的当前状态,如GitLens部分收费、废弃插件已被取代。


错误直接显示在行末,不用悬停看弹窗,改起来方便不少。
代码规范靠它了,配合团队配置,提交前心里有底。

现在部分功能收费了,但个人仓库免费功能还在——每行代码谁改的、什么时候改的一清二楚,够我用了。

输入 /** 自动补全函数注释,写文档轻松一点。

Ctrl + B 在默认浏览器打开当前文件,看静态页面很方便。

引入文件时自动提示路径,少打很多字。

保存时自动格式化代码,风格统一了才能专心写逻辑。

双击标签直接选中里面包裹的内容,复制删除都快。

AI 补全,效率确实提了不少,但得自己判断生成的代码合不合适。

选中变量一键生成 console.log,调试快很多。

写 ECharts 配置时补全 options,不用一直对着文档。

国际化神器,直接在编辑器里预览翻译。记得在 settings.json 加上这段:
{
"i18n-ally.localesPaths": "locales",
"i18n-ally.keystyle": "nested",
"i18n-ally.sortKeys": true,
"i18n-ally.namespace": true,
"i18n-ally.enabledParsers": ["yaml", "js"],
"i18n-ally.sourceLanguage": "en",
"i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.enabledFrameworks": ["vue"]
}


写 Tailwind 时自动补全类名,还能预览颜色,记忆负担小多了。

后端给的 JSON 粘进去一键生成 TS 类型,手写 types 的功夫省了。

Volar 已经升级更名成 Vue - Official,装这一个就够了,旧的 Volar 和 TypeScript Vue Plugin 可以卸了。

被 Vue - Official 取代。以前 Vue 3 项目必装,现在直接移除了吧。

同样被 Vue - Official 取代,留在这里只是供参考旧项目记载。

提供 Vue 2 和 Vue 3 的代码片段,输入前缀回车就出来模板,新建组件特别快。

另一套 Vue 代码片段,跟上面那个选一个就行。

在 Vue 2 项目里能直接跳转组件源码(Element-UI、vux 等),输入 el-table 还能生成骨架代码。

解决自定义组件无法跳转的问题,另外有些提升开发体验的小功能,具体可以看文档。

智能引入自己写的 Vue 组件并一键跳转,详情看官方说明。

文件图标清晰了很多,一眼区分文件类型。

我偏爱暗色系,Vitesse Dark Soft 看着不刺眼,代码结构也容易辨认。
效果展示



微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online
基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online
随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online