工作常用VScode插件合集-提高开发效率

刘行之

已于 2023-12-03 23:55:47 修改

阅读量1.2k

点赞数 16

分类专栏：插件 VScode 文章标签： vscode ide 编辑器

于 2023-12-03 23:40:47 首次发布

本文链接：https://blog.csdn.net/qq_42897427/article/details/134772677

版权

VScode 同时被 2 个专栏收录

2 篇文章

订阅专栏

插件

1 篇文章

订阅专栏

VSCODE 插件安装步骤：

这里我们开始以 VSCode Icons.为例,有点基础的，麻烦跳过。。。。。

一、安装拓展
在这里插入图片描述
拓展插件如上图所示。

首先VScode 打开之后是这样的
在这里插入图片描述然后我们点击这里
要是上面这里你都找不到的话，大哥你退圈把，不适合做程序员哈哈

安装拓展步骤：点击左边拓展项=>搜索VSCode Icons拓展=>点击安装=>重新加载在这里插入图片描述二、配置
步骤：文件=>首先项=>文件图标主题=>选中VSCode Icons

插件之-请求篇

在工作开发中，我们常常会需要用到接口请求工具 去请求各种类型各样的请求
这时候，在不依赖第三方客户端的情况下，我们可以代码去发起，但同时也可以通过插件去请求，下方整理常用的请求类插件

这里我们使用在线MOCK 平台进行测试

https://getman.cn/mock

在这里插入图片描述

{
    "star_male": [
        {
            "name": "张三",
            "age": 26
        },
        {
            "name": "李四",
            "age": 29
        },
        {
            "name": "王五",
            "age": 31
        }
    ]
}

配置完下方json 后，就可以正常请求了

https://getman.cn/mock/test

1. PostCode

在这里插入图片描述

该插件可以帮助我们在VSCode工程中快速的创建和测试简单和复杂的 HTTP/s 请求，并查看响应。

使用方式

2. Http Client

在这里插入图片描述

3. REST Client

在这里插入图片描述

4. Thunder Client

在这里插入图片描述

5. RapidAPI Client

在这里插入图片描述

6. Simple REST Client

在这里插入图片描述

插件之-主题篇

1. Material Theme

在这里插入图片描述
一款深海主题 评分： 4星

一个简单而又干净的主题。这里有很多配置选项，用于颜色配置，可以让我们在工作之余减少疲劳，还有许多色系进行选择

效果如下: 在这里插入图片描述

在这里插入图片描述

2. Panda Theme

在这里插入图片描述 一款熊猫主题 评分： 4.5 星

暗语法主题,熊猫语法主题具有微妙的色彩，使您的眼睛易于使用，越看越舒服

效果如下：
在这里插入图片描述

3. Cobalt2 Theme Official

在这里插入图片描述 Wes Bos 主题 评分 4.5 星

官方 Wes Bos 主题。如果你知道他来自 Wes Bos ，那么你应该知道他的质量。我喜欢它。

效果如下 :

在这里插入图片描述

4. Dracula Official

吸血鬼主题 评分 5 星

这个主题中使用的配色方案可以让人感到平静。暗紫色的色调是这个主题与其他主题与众不同的地方。

在这里插入图片描述效果如下 :

插件之-图标篇

安装一个强大的主题还是不够的，你需要一组漂亮的图标来满足你的视觉体验。这就是为什么我会为你推荐两个最受欢迎的主题图标的原因。

1. vscode-icons

在这里插入图片描述
首先为了我们在编码时有一个高效、易用的界面，我们需要对一些不明了的组件做一些美化。

vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示，这样我们在查看长长的文件列表的时候，可以直接通过文件的图标就可以快速知道文件的类型，而不是去看文件的后缀。
效果如下：
在这里插入图片描述

2. Material Icon Theme

在这里插入图片描述

这个图标看上去简洁，就是一个安装电线的工人穿的那种衣服一样干净，不做评价各有优势

效果如下：

在这里插入图片描述

3. VSCode Great Icons

在这里插入图片描述 > 用于扩展文件图标，词盲了，插件各有千秋

效果如下：
在这里插入图片描述

4. Github Theme（黑白）

在这里插入图片描述

不同皮肤

效果如下：
在这里插入图片描述

5. VSCode Great Icons

深蓝色的主题

插件之前端常用篇

这篇的插件有点多，但是建议大家还是一次性全部安装，大部分，如果你已经安装过，那证明你是一个优秀的前端程序员了

vetur

官网下载地址： Vetur
在这里插入图片描述

目前比较好的Vue语法高亮

Auto Close Tag

官网下载地址： Auto Close Tag

在这里插入图片描述

自动闭合HTML标签，如果没有他，你的代码会疯，那个 Shift + > 符号

Vue 2 Snippets

官网下载地址： Vue 2 Snippets
在这里插入图片描述

Vue2 片段补全工具

Auto Rename Tag

官网下载地址： Auto Rename Tag

修改HTML标签时，自动修改匹配的标签

ESLint

在这里插入图片描述
官网下载地址： ESLint

ESLint插件，高亮提示

HTML CSS Support

官网下载地址：HTML CSS Support
在这里插入图片描述

css提示（支持vue）

JavaScript (ES6) code snippets

官网下载地址： JavaScript (ES6) code snippets
在这里插入图片描述

ES6语法代码段

CodeBing

官网下载地址：CodeBing
在这里插入图片描述

在VSCode中弹出浏览器并搜索，可编辑搜索引擎

`Codelf`

这款插件是我最喜欢的，所以标红啦，假设你在写项目的时候，遇到变量的命名的问题，你可以把中文输入在上面，它会去Github检索，所有开源仓库中那些大牛是这么命名的，如果你不喜欢插件，它官网更神奇，看下图
牛X克拉斯！

网页地址：官网
在这里插入图片描述

Quokka

在这里插入图片描述

Quokka 是一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用。说人话就是，可以随时预览值

Image preview

在这里插入图片描述

预览代码中图片的引用，鼠标移上去就会有小窗展示图片。

Color Info

在这里插入图片描述

可以去查看颜色详细信息的插件，可以小窗口显示颜色值，rgb,hsl,cmyk,hex等等，可以在配置项里添加要展示的信息类型。

Local History

在这里插入图片描述

这个就很优秀了，本地代码的修改记录。通常我们写错代码了可以撤销，但是撤销完以后再修改，想要取消撤销就难了。有了这个插件直接看代码的修改记录。还可以跟当前版本进行对比，神器。

安装后，项目根目录下会自动生成 .history 的文件夹。代码的修改记录就会放在这里面。记得添加.gitignore，不然每次提交代码的时候就要遭重了。
在这里插入图片描述

Project Manager

在这里插入图片描述

项目管理器，可以用于管理不同类型的项目 ,适用于经常切换不同语言项目的大牛，虽然我平时接触的项目也不多，不过自己搞着玩的工程也不少。有了这个插件，就不用新窗口打开项目了。

安装完以后左侧列表会出现一个文件夹的小图标，点开以后就可以进行项目管理了，通常都是操作projects.json 这个文件，点击项目名字就可以切换了，也可以新窗口打开。

Auto Rename Tag

在这里插入图片描述

可以自动用于修改标签的名字 ,自动修改标签名，重命名一个开始标签时，自动重命名配对的结束标签。

Ant Design Pro Helper

Ant-deisng 语言的提示

element-ui-helper

可以快速进行 Elment UI 代码片段的提示

在这里插入图片描述

Simple React Snippets

快速进行 React 的提示

插件之 Java开发篇

你没看错 ，如果使用过 idea 和 eclipse 或者 Spring公司的第三方工具 Spring Tool ，你就会发现特别多的人用，而这个时候，你又想一个小众且不失优雅的 IDE , VSCode 会是个神奇的选择

下面我们来看看Java需要的插件