【vsCode】VSCode好用的插件、简介及安装和使用

东方神剑2023

已于 2024-01-11 09:29:22 修改

阅读量988

点赞数 24

文章标签： vscode ide 编辑器

于 2023-12-08 23:40:34 首次发布

本文链接：https://blog.csdn.net/qq_41562897/article/details/134884405

版权

【vsCode】VSCode好用的插件、简介及安装和使用

GraphQL

GraphQL Visual Studio Code 扩展提供了一系列工具，帮助您编写、验证和测试 GraphQL 代码。GraphQL 扩展包括自动完成功能，建议您在输入时使用的字段和参数，使编写有效的 GraphQL 代码更加容易。这个功能可以节省时间，减少语法错误的可能性。

GraphQL扩展包括自动完成功能它会在您键入时建议在查询中使用的字段和参数，从而更容易编写有效的 GraphQL 代码。此功能可为您节省时间并降低出现语法错误的可能性。它安装了一个内置的 linter，可以检查您的代码是否有错误并提出修复建议。使用此扩展可防止 GraphQL 错误并提高效率。

该扩展还带有内置的linter，可以检查您的代码中的错误并建议修复方法。使用此扩展可以避免 GraphQL 错误，提高效率。
在这里插入图片描述

Tabnine

Tabnine 是一款 AI 代码补全插件，适用于 JavaScript、Python、Java、TypeScript 和其他所有编程语言。它通过自动补全代码来提高开发人员的工作效率。TabNine开箱即用。响应速度快：通常会在不到10毫秒的时间内生成建议列表。

它是一款人工智能代码助手，可以实时自动完成您的代码，加速您的开发过程。它支持所有流行的编码语言和IDE。

Tabnine具有类似于IntelliSense的AI辅助代码完成功能。该扩展可以通过上下文和语法预测和建议您的下一行代码，帮助您更快地编写代码。

在这里插入图片描述

CSS Peek

使用CSS Peek VS Code扩展，您只需将鼠标悬停在一个HTML元素上，即可显示一个窥视窗口，其中显示应用于该元素的CSS样式。然后，您可以通过单击窥视窗口跳转到CSS代码来轻松编辑样式。这个功能可以帮助您避免每次手动搜索CSS代码的麻烦。

CSS Peek还支持CSS预处理器，如SCSS、Less和Sass，因此无论预处理器是什么，您都可以将其用于所有项目。
在这里插入图片描述

Bracket Pair Colorizer （必备）

Bracket Pair Colorizer DLW是一款用于VS Code的扩展，可以自动给某些字符上色，帮助开发人员确定代码的嵌套深度。

它支持多种语言，并允许开发人员定义他们在代码中计划使用的不同括号的颜色。默认情况下，它会匹配 (), {} 和 []，但您可以使用其他括号字符，并定义它们的颜色。使用此扩展可以轻松地发现开放和关闭括号，并更清晰地了解代码结构。

在这里插入图片描述

Live Server

Live Server是一款VS Code扩展，可以自动重新加载您的网页。它消除了手动刷新页面的需要。

您还可以指定自定义端口或主机名，这在处理多个项目或团队环境中非常有用。Live Server的另一个有用功能是可以在工作环境内的任何HTML文件或项目上运行服务器。

在这里插入图片描述

Git History

Git History扩展可以在树形视图中显示提交历史记录，使开发人员可以轻松了解代码更改的进展。这种视图使得浏览不同的提交和找到您正在寻找的更改变得简单。

此VS Code扩展还包括强大的搜索功能，允许您快速按消息、作者或哈希值查找特定的提交。它还可以比较提交，使您可以轻松地查看代码不同版本之间的区别。

在这里插入图片描述

Prettier

Prettier是最流行的格式化和代码校验工具，可使您的代码符合业界最佳实践。它还确保您的团队生成视觉上无缝的代码，因此不再争论应使用多少制表符或空格，或括号应放在哪里。

使用Prettier Visual Studio Code扩展可以让您的代码看起来更好。

在这里插入图片描述

Beautify（必备）

Beautify是Prettier扩展的替代品，已安装了700万次。Beautify是另一个可靠的代码“美化器”，通过最小化对代码的干扰来对代码进行校验和格式化。您可以使用它来轻松地格式化任何语言编写的代码。

在这里插入图片描述

JavaScript Code Snippets（必备）

在JavaScript项目中，您经常需要通过复制和粘贴来重复使用各种代码块。这项任务可能需要很长时间，因此使用简单的键盘快捷键获得大量不同的JavaScript代码片段列表可以帮助您更加高效地工作。

JavaScript代码片段是预先构建的代码片段，您可以轻松地包含在您的代码中。它还支持特定的JavaScript库和框架，例如Angular、Vue.js和Node.js。

ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间。

在这里插入图片描述

jQuery Code Snippets (推荐)

在这里插入图片描述

Reactjs Code Snippets VS Code（React必备）

Reactjs Code Snippets VS Code扩展提供了整洁打包的预编写模板，帮助开发人员提高工作流程和代码速度。您只需要键入触发命令即可获取所需的代码片段。

您可以使用此工具来减少编写代码所需的时间，并专注于解决现实世界的问题。

在这里插入图片描述

补充两个

React-Native/React/Redux snippets for es6/es7

react代码片段，下载人数超多

react-beautify

格式化 javascript, JSX, typescript, TSX 文件

Debugger for Java

Debugger for Java：此扩展具有丰富的功能，使您能够设置断点、检查变量、逐步执行代码等等，使调试更加容易。

Language Support for Java by Red Hat：它有助于在Java开发中维护稳定和安全的平台，并提供构建、部署和管理Java应用程序的工具。

总体而言，Java Language Support包使您的Java环境更加高效，简化您的Java开发体验。

在这里插入图片描述

HTML Snippets (必备)

智能提示HTML标签，以及标签含义

在这里插入图片描述

HTML CSS Support（必备）

HTML CSS Support 是一款用于文本编辑器和集成开发环境（IDE）的扩展，提高了对 HTML 和 CSS 开发的支持。该扩展提供了以下附加功能：

HTML 和 CSS 的 IntelliSense：这是一种代码完成功能，可以在编写代码时提供 HTML 标记、属性、CSS 属性、值和单位的建议。

Emmet 支持：它生成 HTML 和 CSS 的简写表示法，帮助您编写简洁的语法，并通过仅需几个按键将其扩展为完整的 HTML 或 CSS 代码。

CSS 类名自动完成功能：自动完成 HTML 文档中的 CSS 类名。

HTML 和 CSS 格式化和 linting 选项：这是一个必备的工具，可以为更好的可读性格式化和结构化 HTML 和 CSS 代码。

内置的 CSS 颜色预览器：如果您曾经为复杂的颜色方案而苦恼，或者在微调网站颜色时感到迷失，此功能可以拯救您。它在您的 CSS 颜色代码中显示颜色预览。

在这里插入图片描述

上面HTML Snippets (必备)和HTML CSS Support（必备）取其一

Extension Pack for Java

在这里插入图片描述

GitHub Copilot

GitHub Copilot 是一个提供 AI 辅助编程的工具，它在您编码时会提供类似自动补全的建议。您可以通过开始编写您想要使用的代码，或者编写自然语言评论描述您希望代码完成的功能，来获取 GitHub Copilot 的建议。

在这里插入图片描述

EditorConfig for VS Code

在这里插入图片描述

ESLint（推荐）

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

1、所有东西都是可以插拔的。你可以调用任意的rule api或者formatter api 去打包或者定义rule or formatter。

2、任意的rule 都是独立的

3、没有特定的coding style，你可以自己配置

在这里插入图片描述

C# Dev Kit for Visual Studio Code

C# Dev Kit for Visual Studio Code（C# Dev Kit）是一个扩展工具，它为您的C#开发提供了一系列强大的功能和实用工具，以帮助您更高效地编写、调试和维护代码。它能够在Windows、macOS、Linux甚至Codespace等各种开发环境中使用，提升您的C#开发体验。

在这里插入图片描述

vscode-icons

vscode-icons不仅能够给文件夹、文件添加上舒适的图标，而且可以自动检测项目，根据项目不同功能配上不同图标，例如，git、Markdown、配置项、工具类等。

在这里插入图片描述

Auto Close Tag（必备）

Auto Close Tag 自动添加HTML / XML关闭标记，与Visual Studio IDE或Sublime Text相同（对前端开发的小伙伴非常有用）。

在这里插入图片描述

Auto Rename Tag（必备）

自动完成另一侧标签的同步修改

在这里插入图片描述

Better Comments

Vs Code 最好的代码注释扩展插

Better Comments 更好的注释扩展将帮助您在代码中创建更人性化的注释。使用此扩展，您将能够将注释分类为：警报、查询、待办事项、强调、注释掉的代码也可以设置样式，以使代码不应该存在、您可以在设置中指定任何其他注释样式。

在这里插入图片描述

GitLens（推荐）

Vs Code中好用的Git源代码管理插件GitLens

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

在这里插入图片描述

Drawio Preview

流程图神器-Drawio，在Vs Code中预览绘图图文件。

在这里插入图片描述

Path Intellisense（必备）

Import、Require模块路径自动补全

Path Intellisense 在编辑器中输入对应文件的路径，会自动补全（在Import、Require导入/引入模块时非常便捷好用）。

在这里插入图片描述

Vetur（vue必备）

Vue开发必备-Vetur（VS Code的Vue工具）

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

在这里插入图片描述

补充两个:

VueHelper

vue代码片段

Vue TypeScript Snippets

vue的 typescript 代码片段

Vue 3 Snippets

vue 2代码片段

vscode-element-helper

帮助Vue开发者编写更高效的Element-UI代码

VSCode-Element-Helper是Element-UI的VS Code扩展，Element-UI是一个很棒的库。越来越多的项目使用它。因此，为了帮助开发人员通过Element-UI编写更高效的代码。

在这里插入图片描述

Vue VSCode Snippets

Vue VSCode片段，Vue 语法片段扩展。

在这里插入图片描述

Angular Snippets (Version 9)

Angular开发必备-VS Code的Angular TypeScript代码片段

Visual Studio Code的此扩展为TypeScript和HTML添加了Angular的代码片段。

在这里插入图片描述

Icon Fonts

Visual Studio代码的图标字体

icon fonts是一款提供VS Code图标、字体缩写的的插件。虽然看上去很不起眼，但是对于前端开发，这款工具可以说能够极大的提高开发效率。通过一些缩写，能够快速补全icon fonts相关的代码片段，这样能够减少80%以上的手动输入内容。icon fonts支持html、css、less、sass、scss、stylus、jsx、blade、vue。

在这里插入图片描述