VSCode 常用插件

_Tough_Girl

已于 2025-03-18 09:47:54 修改

阅读量3.7k

点赞数

分类专栏：常用工具文章标签： vscode

于 2023-08-21 15:37:38 首次发布

本文链接：https://blog.youkuaiyun.com/icemwj/article/details/132402711

版权

常用工具专栏收录该内容

3 篇文章

订阅专栏

20款VS Code实用插件推荐

VS Code相关链接地址

VS Code官网地址：https://code.visualstudio.com/

VS Code插件市场地址： https://marketplace.visualstudio.com/vscode

VS Code常用插件

（1）Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

在这里插入图片描述

插件描述： 此中文（简体）语言包为 VS Code 提供本地化界面。

（2）ESLint

在这里插入图片描述
插件描述：

ESLint 是一个代码规范和错误检查工具，有以下几个特性：

所有东西都是可以插拔的。你可以调用任意的rule api或者formatter api 去打包或者定义rule or formatter。
任意的 rule 都是独立的。
没有特定的coding style，你可以自己配置。

ESLint配置详解： ESLint配置详解

（3） GitLens：VS Code中好用的Git源代码管理插件

在这里插入图片描述
插件描述： GitLens 内置到 Visual Studio 代码 Git 的能力。它可以帮助您通过 Git 责任注释和代码镜头一目了然地看到代码作者的身份，无缝地导航和浏览 Git 存储库，通过功能强大的比较命令获得有价值的见解，等等。

VS Code 源代码管理插件GitLens使用指南：
vsCode 源代码管理插件GitLens使用指南你值得收藏

（4）Git History：Git 历史记录查看

在这里插入图片描述
插件描述： Git 历史记录，搜索和更多内容（包括 git log）。

在这里插入图片描述

（5）Drawio Preview：流程图神器

在这里插入图片描述
插件描述： 在VS Code中预览绘图图文件。

（6）Path Intellisense：Import、Require 模块路径自动补全

在这里插入图片描述
插件描述： Visual Studio Code插件，自动补全文件名。在编辑器中输入对应文件的路径，会自动补全（在Import、Require导入/引入模块时非常便捷好用）。

（7）Vetur（VS Code的Vue工具）：Vue2开发必备

在这里插入图片描述
插件描述： Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

（8）vscode-element-helper：帮助Vue开发者编写更高效的Element-UI代码

在这里插入图片描述
插件描述： vscode-element-helper 是 Element-UI 的 VSCode 扩展。Element-UI 是一个很棒的库。越来越多的项目使用它。因此，为了帮助开发者更高效地编写 Element-UI, VSCode-Element-Helper 诞生了。

（9）ES7 React/Redux/GraphQL/React-Native snippets

在这里插入图片描述

插件描述： 在 VS Code 中支持 React Native，React，Redux 常见代码片段的插件。

（10）HTML CSS Support

在这里插入图片描述
插件描述： 在编写样式表的时候，自动补全功能大大缩减了编写时间。

（13）px to rem & rpx & vw (cssrem)

在这里插入图片描述
插件描述： 在VS Code中支持 px 和 rem 单位相互转换，并支持 WXSS。

（14）JavaScript (ES6) code snippets

在这里插入图片描述
插件描述： 支持 ES6 语法描述。

（15）VueHelper

在这里插入图片描述

插件描述： vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码提示.(此插件作者已转行做影视，可以使用Vue 3 Snippets，如果不使用本插件)。

（16）Vue 3 Snippets

在这里插入图片描述
插件描述： 这个插件基于最新的 Vue 2 及 Vue 3 的 API 添加了 Code Snippets。

（17）Codelf：变量命名神器

在这里插入图片描述

（18）Easy Sass

在这里插入图片描述
插件描述： 自动将SASS/SCSS文件编译为.css或者.min.css。可以快速编译项目中的所有scss/sass文件。

（19） Time Master：

在这里插入图片描述
插件描述： 时间管理大师是通过自动跟踪您编码活动从而度量您编码效率的插件，它能够帮助您回顾您的编码活动，生成您的编码效率报告并提供相关建议。

时间管理大师插件不依赖网络环境，安全轻量，代码开源。

（20）Auto Rename Tag

在这里插入图片描述
插件描述： 自动重命名配对的 HTML/XML 标记，与 Visual Studio IDE 的做法相同。

（21）element-ui-helper

在这里插入图片描述
插件描述：

Element-UI-Helper 是 Element-UI 的 VS Code 扩展。
Element-UI 是一个很棒的库。越来越多的项目使用它。因此，为了帮助开发人员更高效地使用 Element-UI 编写代码，Element-UI-Helper 应运而生。这不是一个官方项目，但所有文档都来自官方网站。

（22）Ionic Snippets

在这里插入图片描述
插件描述：

Ionic Snippets for VS Code

使用 VS Code 的代码片段提升您的 Ionic 开发

✅ 使用 ~100 Ionic 组件片段快速制作模板
✅ 使用 CSS 属性轻松定制主题
✅ 框架支持 angular、stenciljs 和 vuejs

所有代码片段均基于并遵循 Ionic 5 Api 和 Ionic 4 Api

可在 Ionic Snippets 的 VSCodium 上获取。

（23）JavaScript Comment Snippet

在这里插入图片描述
插件描述： 根据 JSDoc、ESDoc 和 TSDoc 规则快速生成 JavaScript/TypeScript 注释，并使用 @ 来触发，以减轻内存负担。

静态生成注释，而非响应式。对于现有类型的参数函数或变量，建议使用内置的 /** 来触发。

（24）TONGYI Lingma

在这里插入图片描述
插件描述：

通义灵码-灵动指间，快码加编，你的智能编码助手
TONGYI Lingma-Your AI Coding Assistant. Type less, Code more.

通义灵码，是一款基于通义大模型的智能编码辅助工具，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力，并针对阿里云 SDK/API 的使用场景调优，为开发者带来高效、流畅的编码体验。

兼容 Visual Studio Code、Visual Studio、JetBrains IDEs 等主流 IDE；
支持 Java、Python、Go、C/C++、C#、JavaScript、TypeScript、PHP、Ruby、Rust、Scala
等主流编程语言。

通义灵码除了面向个人开发者的提供了个人版之外，还提供了企业标准版、企业专属版，满足企业客户智能编码的诉求，可前往了解更多企业版信息。

（25）Vue 3 Support - All In One

在这里插入图片描述

插件描述： Vue3 Snippets，包含 vue2 和 vue3 中常用的代码高亮、代码片段和格式化。

您可以打开 vscode 底部的状态栏自动格式化 Vue 开关，这样就可以在编写 vue 文件时自动格式化该文件。

或者右键单击显示下拉菜单面板，单击 "格式化文件 "菜单项进行格式化。

你可以使用文件夹中的 Vue Generator Component 命令来创建新的模板组件。

（26）Vue VSCode Snippets

在这里插入图片描述

插件描述： Vue VSCode 代码片段

说明：这些代码片段旨在以尽可能无缝的方式为工作流程增效。

此版本库是专为实际使用而构建的。它不对 API 定义进行编目，而是从 Vue 在现实世界中的使用出发，重点关注开发人员的人体工程学。其中包括我个人不喜欢键入的部分，以及有助于快速删除的模板。

支持的版本： Vue 2 和 Vue 3

插件描述：
Sonar 的 SonarQube for IDE 是一个免费的 IDE 扩展，使您能够在编码问题出现之前就加以修复。SonarQube for IDE 不仅仅是一个衬垫，它还能在您创建代码时检测并突出显示可能导致错误、漏洞和代码气味的问题。它提供明确的修复指导和教育帮助，让你在提交代码之前就能解决问题。开箱即用，SonarQube for IDE： Visual Studio Code 支持在 IDE 本地分析 JS/TS、Python、PHP、Java、C、C++、C#、Go 和 IaC 代码。

默认情况下，SonarQube for IDE 分析在 IDE 中打开的文件。在连接模式下与 SonarQube（服务器、云）配对时，SonarQube for IDE 形成一个强大的端到端代码质量平台，丰富 CI/CD 管道，确保整个项目中的任何代码编辑或添加都是干净的。在连接模式下，您的团队可以共享通用语言规则集、项目分析设置等。