前端开发必备的 VSCode 插件推荐（第一期）

目录

• 前言
• 插件推荐
• Live Server(Five Server)
  • Tencent Cloud AI Code Assistant
  • WakaTime
• 总结

前言

Visual Studio Code (VSCode) 是一款轻量级且强大的代码编辑器，以其丰富的插件生态系统深受开发者喜爱。对于前端开发者而言，选择合适的插件可以显著提升开发效率和代码质量。本篇文章我将为大家推荐几款前端开发必备的 VSCode 插件，这些插件可以帮助你在日常工作中获得更好的开发体验。

插件推荐

Live Server(Five Server)

这是一款十分轻量的本地服务器插件，你可以用这个插件，很轻松的在当前目录下，启动一个本地 ip + 特定端口号的服务器，方便用于网页预览和调试。

安装完成后，最好重启下 VSCode，这样确保插件生效。

打开一个 html 编辑窗口，然后点击下方的 Go Live按钮，即可启动本地服务器，并且用默认浏览器打开预览。

当你修改了 html 页面后，浏览器对应的预览效果也会实时更新，这点非常棒！这样就不需要你反复刷新浏览器了。

插件默认的端口号是 5500，如果你担心会跟你本地前端项目或服务的端口号冲突，你可以在设置中修改特定的端口号，也可以设置随机端口号（0 就是随机）。

需要注意的是，这款插件之前有个旧版本，作者不一样，也可以用，只是新版本更新更频繁一点，看个人喜好了。

Tencent Cloud AI Code Assistant

这款插件的中文名是《腾讯云 AI 代码助手》，最近开始公测的。它可以辅助你更好的编程，在你编写代码的时候，会时不时给你提示，按下 Tab 键就可以补全代码。

你还可以在左侧点击对话图标，与它进行对话。对话的用法很简单，跟使用 AI 助手是一样的，你问它回答。

除此之外，你还可以选中你需要解释的代码，问它这段代码怎么优化，给这段代码生成注释等等。

与其他 AI 编码助手不同的是，腾讯云AI 代码助手提供了快捷键的功能，方便你快速操作，下面是官方提供的快捷键映射表，可以看一下：

mac
⌥ + \ 触发内联建议
⌥ + I 开始内联聊天 -⌥ + ⇧ + X 进行代码解释
⌥ + ⇧ + Y 进行代码修复
⌥ + ⇧ + M 进行代码注释
⌥ + ⇧ + T 进生测试单元
⌘ + ⌃ + I 询问 AI 问题
⌘ + ⌃ + N 在代码区域打开技术对话
windows
ALT + \ 触发内联建议
Ctrl + I 开始内联聊天
Shift + Alt + X 进行代码解释
Shift + Alt + Y 进行代码修复
Shift + Alt + M 进行代码注释
Shift + Alt + T 进生测试单元
Ctrl + Windows + I 询问 AI 问题
Ctrl + Windows + N 在代码区域打开技术对话

WakaTime

这款插件可以记录你编程的时间，可以用仪表盘的方式，统计你在不同项目、不同语言上编码的时间。通过这个网站的统计，你可以很方便的了解你近段时间的编程情况。

总结

由于时间关系，这次只推荐了3款我个人日常使用的优秀 VSCode 插件。每一款都在提升开发效率和改善编码体验方面表现出色，希望能为您的前端开发工作带来帮助。当然，VSCode 上还有许多其他值得一试的插件，下一期我将为你介绍更多有趣和实用的工具，敬请期待哦。

欢迎各位在本文下方评论区，分享自己喜欢的插件和使用心得，让我们一起交流学习，共同提升开发效率。

我正在参与2024腾讯技术创作特训营最新征文，快来和我瓜分大奖！