VSCode 是咱们前端开发的一个强壮的IDE，所以选择趁手好用的插件是提高开发功率，然后剩余的时刻用来摸鱼是很有必要滴。

功率篇（33）

Auto Rename Tag

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

Auto Rename Tag : 主动重命名成对的 HTML/XML 符号，与 Visual Studio IDE 相同。

  • 插件名：Auto Rename Tag
  • 官方地址： marketplace.visualstudio.com/items?itemN…
  • 特征： 当您重命名一个 HTML/XML 标签时，会主动重命名配对的 HTML/XML 标签
  • 用法： 当您重命名一个 HTML/XML 的开端或完毕标签时，会主动重命名配对的 HTML/XML 标签。

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

Auto Close Tag

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

Auto Close Tag : 主动增加 HTML/XML 封闭符号，与 Visual Studio IDE 或 Sublime Text 相同。

  • 插件名：Auto Close Tag
  • 官方地址： marketplace.visualstudio.com/items?itemN…
  • 特征：
    • 键入开端标签的右括号时主动增加完毕标签
    • 插入完毕标签后，光标在开端和完毕标签之间
    • 设置不主动封闭的标签列表
    • 主动封闭自 闭合 标签
    • 支撑 Sublime Text 3 的主动封闭标签
    • 运用键盘快捷键或命令面板手动增加封闭标签
  • 用法： 输入开端标签的右括号后，将主动插入完毕标签

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

也能够装置Auto Complete Tag 插件，它现已结合了主动封闭标签和主动重命名标签插件的功用。

Auto Complete Tag

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

Auto Complete Tag : 结合主动封闭标签和主动重命名标签的功用 。

  • 插件名： Auto Complete Tag
  • 官方地址： marketplace.visualstudio.com/items?itemN…
  • 特征：拥有 Auto Close Tag 和 Auto Rename Tag 的功用

Trailing Spaces

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

Trailing Spaces : 突出显现尾随空格并立即删除它们！****

  • 插件名： Trailing Spaces
  • 官方地址： marketplace.visualstudio.com/items?itemN…

IntelliCode

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

IntelliCode :此扩展通过在完结列表顶部显现代码上下文的引荐完结项来供给 AI 辅助 IntelliSense。

  • 插件名： IntelliCode
  • 官方地址： marketplace.visualstudio.com/items?itemN…

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

Tabnine

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

Tabnine : 运用AI更快的完结编写代码，而且支撑多种开发言语。

  • 插件名：Tabnine
  • 官方地址： marketplace.visualstudio.com/items?itemN…

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

GitHub Copilot

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

GitHub Copilot 是 GitHub 出品的人工智能写代码的神插件，它通过运用 github 上的代码库的代码进行大量的训练后，能够函数名、注释等方式协助你主动完结代码的编写。需求在官网注册方可运用，官网地址能够检查更多内容：copilot.github.com/

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

GitHub Copilot : GitHub Copilot 运用 OpenAI Codex 从您的修改器中实时主张代码和整个功用。经过数十亿行公共代码的训练，GitHub Copilot 将包含注释和办法称号在内的自然言语提示转化为数十种言语的编码主张 。

  • 插件名：GitHub Copilot
  • 官方地址： marketplace.visualstudio.com/items?itemN…

Template String Converter

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

Template String Converter : “${“此扩展在键入时将字符串转换为模板字符串 。

  • 插件名：Template String Converter
  • 官方地址： marketplace.visualstudio.com/items?itemN…
  • 特征： 键入美元符号然后在字符串中翻开花括号会将引号转换为反引号

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

此插件装置后假如没有作用，需求在 settings.json 文件中配置需求支撑的言语：

"template-string-converter.validLanguages": [
  "html",
  "vue",
  "svelte",
  "typescript",
  "javascript",
  "typescriptreact",
  "javascriptreact"
]

CSS Peek

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

CSS Peek : ****快速跳到CSS的界说处预览 。

  • 插件名：CSS Peek
  • 官方地址： marketplace.visualstudio.com/items?itemN…
  • 特征： 该扩展支撑符号界说跟踪的一切正常功用，但它适用于 css 选择器（类、ID 和 HTML 符号）。这包含：
    • Peek：内联加载 css 文件并在此处进行快速修改。( Ctrl+Shift+F12)
    • 转到：直接跳转到 css 文件或在新修改器中翻开它 ( F12)
    • 悬停：悬停在符号 ( Ctrl+hover)上显现界说

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

CSS Initial Value

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

CSS Initital Value : ****显现每个 CSS 特点初始值的 VS Code 扩展 。

  • 插件名：CSS Initital Value
  • 官方地址： https://marketplace.visualstudio.com/items?itemName=dzhavat.css-initial-value

VSCode中值得推荐的常用的33个高效前端插件「效率篇」（一）

后续如有发现更多更好的插件将继续分享。装置太多的插件恐会影响 VSCode 的启动速度，同时增加内存的占用，或许影响开发功率，终究适得其反，所以主张只装置自己喜欢的、常用的即可。