16个不容错过的VScode插件

VS Code 是我最常用的代码编辑器之一,接下来我为大家推荐一些VSCode 插件,希望可以帮助到你,如有错误,敬请指出!

怎么安装插件?

打开VScode后,点击下方图片或者使用 ctrl+shift+x 快捷键打开,在搜索框输入,然后安装即可。

1.Better Comments(代码注释)

使用 Better Comments 插件,你可以通过在注释前添加特定的标记来给注释分类和着色。这些标记包括:

*:用于强调或标记注释中的关键信息;

!:用于突出显示重要的注释或需要特别关注的部分;

?:用于表示疑问或需要进一步解释的注释;

TODO:用于标记需要完成的任务或待办事项;

//:用于普通的注释。

 2.chinese(汉化编译器)

chinese插件适用于 VS Code 的中文(简体)语言包,此中文(简体)语言包为 VS Code 提供本地化界面。

3.vetur(vue 2开发必备)volar(vue 3开发必备)

vetur 或 volar插件是一个专门用于开发 Vue.js 项目。它提供了许多有用的功能,包括语法高亮、代码补全、错误检查、格式化、调试等。

4.Prettier - Code formatter(格式化代码)

Prettier - Code formatter 插件会自动格式化您的代码,从而简化维护一致代码库的过程。无论团队内的个人偏好如何,Prettier 都会确保每个人的代码格式都是统一的。

5.Auto Close Tag(自动闭合标签)

Auto Close Tag 插件可以自动闭合 HTMLXML 和其他类似标记语言的标签。当你输入一个开始标签时,它会自动插入相应的结束标签,并将光标定位在两个标签之间,方便你继续编写内容。

6.Import Cost(显示引入包的大小)

Import Cost插件在导入 JavaScript 包时,会立即显示它们的大小,从而深入了解它们对项目性能的影响。它无缝支持 npm 和 Yarn 等包管理器,简化了优化项目速度的过程。支持多种语言和模块系统,包括 JavaScriptTypeScriptReactVue 等,并且可以与其他插件和工具集成,如 WebpackRollup 等。

7.Live Server(浏览器与代码更改同步刷新)

Live Server插件作用,创建本地开发服务器使Web项目进行预览,使浏览器与代码更改保持同步。不再需要手动刷新。当您存 HTML、CSS 或 JavaScript 文件时,它会自动更新您的浏览器,即时查看所做的更改。

8.open in browser(打开文件)

Open in Browser 插件允许你在编辑器中的 HTML、CSS、JavaScript 等文件上右键点击,并通过默认浏览器打开这些文件。你可以在 VS Code 中打开一个 HTML 文件,并在编辑器中右键点击该文件。在右键菜单中,你会看到一个 Open in Default Browser 的选项。选择该选项后,插件会自动使用你的默认浏览器打开该HTML文件,并在浏览器中显示其内容。

9.Eslint(错误标注)

Eslint插件可以发现代码中的错误和错误,从而使编码变得更好。它通过显示可能出现错误或警告的位置来帮助您避免错误。另外,它甚至可以自动修复这些问题。

10.Tabnine AI Autocomplete

作为代码编辑器的宝贵的人工智能工具,它利用深度学习来建议代码补全。凭借对 Python、JavaScript、Typescript、PHP、Rust、Go 和 Java 等多种编程语言的支持,TabNine 被证明是不可或缺的资产。
从代码生成和单元测试编写到文档创建和遗留代码解释,TabNine 提供全面的支持。

11.Github Codespaces

GitHub Codespaces 是云端的开发环境 , 它允许开发人员通过浏览器或从本地的 Visual Studio Code IDE 直接进行调试、维护、更改、部署 GitHub 上的代码。现阶段 GitHub Codespaces 只提供给团队和企业版本 。

12.Path Intellisense(路径补全)

Path Intellisense 插件提供了路径智能感知的功能,帮助你更轻松地输入和补全文件路径。当你在编辑器中输入文件路径时,它会自动为你提供路径的建议和补全。

13.any-rule

any-rule插件允许你在编辑器中的 HTML、CSS、JavaScript 等文件上右键点击,查找你需要的正则,或者按下 F1,输入 zz,然后查找并选中你需要的正则,就可以把正则表达式插入到光标所在的位置。

14.npm Intellisense

npm Intellisense插件可以简化使用 JavaScript 和 Node.js 项目时的编码体验。它会在键入时自动建议并完成 npm 包导入,节省时间并减少代码中的错误。借助 npm Intellisense,向项目添加依赖项变得更加顺畅和高效。

15.vscode-icons(文件图标)

vscode-icons 插件,它为文件和文件夹提供了丰富的图标,以增强编辑器的可视化效果。vscode-icons 插件提供了大量的图标,覆盖了各种常见的文件类型和扩展名,这些图标可以帮助你更快速地识别和区分不同类型的文件,提高你在项目中的导航和查找效率。

16.GitLens(浏览 git 相关信息)

GitLens 插件可以为你的 Git 体验增添许多强大的功能。通过 GitLens 插件,你可以在编辑器中直接查看和浏览 Git 版本控制的相关信息。

Tips:以上插件根据需求安装,个人觉得不需要装太多,会导致VScode很卡