我把提高开发效率的VSCode插件分享出来了

news2024/11/18 23:45:51

前言

最近在家办公，写代码发现没有那么流畅，一看是某些插件没有安装，搞得写代码的效率降低，所以这里有些比较实用的插件推荐给大家

开发实用插件

Settings Sync

利用 Settings Sync 💎将 VS Code 的设置保存在github上面，在换了电脑后可以快速同步vscode的配置（插件、代码片段、主题、file icon、热键等）

在这里插入图片描述

先去GitHub创建一个git gist id，然后设置到vscode的设置里面就行，在github主页点击右上角头像下拉有一个 Your gists，里面没有的话则需要注册一个

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

然后利用快捷键进行上传和下载

✅ 1. 上传快捷键Upload Key : Shift + Alt + U （Mac是 Shift + Option + U）

✅ 2. 下载快捷键Download Key : Shift + Alt + D （Mac是 Shift + Option + D）

GitHub Copilot

AI编写代码，非常智能，很多常见的代码可以一键完成✅。

在这里插入图片描述

如果是学生或者github的热门项目的贡献者的话是可以免费使用的，如果不是则需要付费使用

效果图如下，通过round名字可以快速生成你想要的代码片段，如果不是则舍弃即可

在这里插入图片描述

Import Cost

显示导入包的大小，能够在开发过程中就清晰的知道引入包的尺寸

在这里插入图片描述

npm-import-package-version

显示导入包的版本，能够在开发过程中就清晰的知道引入包的版本信息

在这里插入图片描述

Indent Rainbow

在编写代码中提供缩进更容易阅读和编写代码

可以方便的看到每个括号的起始位置，便于开发

在这里插入图片描述

WekaTime

这个插件能够从你的编程活动中自动生成的指标、数据和时间跟踪

最基础的就是能够快速看到每天编程的时间，这能让你多休息，多注意身体，少内卷🙃

其他数据则可以去wakatime官网查看

在这里插入图片描述

Trailing Spaces

这个插件能够高亮标识出你末尾多余的space，并帮你快速删除它们

在这里插入图片描述

TypeScript Importer

开发过程中能够快速找到你声明的类型并自动导入你所需要类型

对于TS的开发者，这能过提高不少开发效率

img

Path Intellisense

路径自动寻找，可以在引入文件时根据提示能过快速智能的找到下一级路径
IDE

Npm Intellisense

导入包的时候能够智能的寻找到你可能需要引入的包

在这里插入图片描述

Path Autocomplete

开发过程中为你导入的包提供路径补全，当你不知道这个文件夹下面有哪些文件夹是也可以给你提示

在这里插入图片描述

Image preview

这个插件可以在开发区左侧和hover的时候能够快速看到展示的图片

在css文件中，当然hover到路径上也是能够显示的

在这里插入图片描述

在typescript文件中

在这里插入图片描述

GitLens

在这里插入图片描述

GitLens 安装后，可以在编辑器中，查看git日志，尤其是谁提交的代码，便于讨论（甩锅）

安装后可以直接在代码里看到谁在什么时候提交了代码，很直观很方便

在这里插入图片描述

Git History

通过 Git History 展示 git 提交历史记录

在这里插入图片描述

可以通过view log看到对应文件的history

在这里插入图片描述

可以通过Previous看到文件commit的修改历史

在这里插入图片描述

File Nesting Updater

自动更新文件夹中的配置文件的嵌套配置，看下图你会更加清晰

在这里插入图片描述

Error Lens

对开发过程中的错误、警告⚠️和其他语言诊断进行高亮显示

非常有利于开发过程中进行快速debug

在这里插入图片描述

CodeMetrics

帮助你计算你写的代码的复杂度，比如function函数的复杂度

你写完代码就能看到函数的复杂度，它会提示你函数是否需要抽离模块出来

当然目前只能在 Typescript、Jacascript和Lua文件里使用

在这里插入图片描述

Dash

Dash是一个API 文档浏览器和代码片段管理器，目前只能在macOS里使用

在这里插入图片描述

当然它不仅仅支持前端相关的文档，还支持其他语言以及框架的文档

在这里插入图片描述

Better Comments

通过使用警报、信息、TODO 等进行注释来改进您的代码注释！

在这里插入图片描述

对应不同的注释信息会有不同的高亮显示，能过让你一眼就找到你的注释信息

在这里插入图片描述

TODO Highlight

TODO Highlight突出显示代码中的 TODO、FIXME 和其他注释，和Better Comments功能相似，高亮显示略微不同

在这里插入图片描述

Todo Tree

Todo Tree这个插件可以在activity bar中有对应的图标，图标里面有项目的树状图，树视图中显示 TODO、FIXME 等评论标签，对于一些未来需要做的事情比较容易找到

在这里插入图片描述

Code Spell Checker

Code Spell Checker是一个源代码拼写检查器，能过快速帮你检查出你的单词拼写错误并给出相应的建议

在这里插入图片描述

在这里插入图片描述

Color Hightlight

Color Hightlight会在编辑器中高亮颜色，能够一眼就看出你使用的颜色信息

在这里插入图片描述

未使用Color Hightlight插件的效果如上图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nae39Rqu-1669209860800)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cedcf78f435a4d938e4bf14a4323e745~tplv-k3u1fbpfcp-watermark.image?)]
使用Color Hightlight插件后的效果如上图
在这里插入图片描述

CodeSnap

CodeSnap插件可以 为您的代码截取漂亮的屏幕截图📷

在这里插入图片描述

在这里插入图片描述

Parameter Hint

Parameter Hint这个插件可以提供自动参数提示，比如函数会提示你参数的类型以及name字段等

在这里插入图片描述

Eslint

Eslint插件用来规范代码风格，检测代码是否符合指定的规范

在这里插入图片描述

Prettier - Code formatter

Prettier是代码格式化工具，快速按照指定的风格进行格式化

在这里插入图片描述

如果与eslint使用有冲突可以看下eslint-plugin-prettier

Project Manager

对于项目管理比较有帮助，它能够帮助你快速切换到其他项目中去

在这里插入图片描述

TypeScript Hero

TypeScript Hero根据惯例对导入进行排序和组织，并删除未使用的导入，安装后默认开启

在这里插入图片描述

TypeScript Extension Pack

TypeScript Extension Pack插件是关于Typescript的扩展包（包含一些受欢迎的插件），它包含了TypeScript Hero、json2ts、Move TS、Path Intellisense、TypeScript Importer、Prettier - JavaScript formatter等插件

在这里插入图片描述

TypeScript Vue Plugin (Volar)

Volar插件是Vue3官方指定的开发插件，Vuer都懂

在这里插入图片描述

其次建议大家开启Volar Takeover 模式，Volar能够使用一个 TS 语言服务实例同时为 Vue 和 TS 文件提供支持
具体问题和相关文档看Vue的Volar文档

Vue 3 Snippets

要想快速开发vue项目，怎么能少得了Vue Snippets呢，这个插件可以帮助你快速开发，Vuer大赞

在这里插入图片描述

同时对Vue3有更加具体的需要的话可以看看我的插件Vue 3 Snippets for Vscode，都是关于Vue3的并且支持很多模板语法和Vue Router和Vuex的语法，后续也会更新其他的比如Pinia以及Nuxt

在这里插入图片描述

主题相关插件

市面上主题插件就比较多了，我个人一直在用Dracula Official，个人觉得还是比较好用

Dracula Official

在这里插入图片描述

SynthWave '84

在这里插入图片描述

Radical

在这里插入图片描述

GitHub Theme

在这里插入图片描述

Gruvbox Material

在这里插入图片描述

文件图标插件

我个人用的是Material Icon Theme，感觉都差不多，主要是能标识对应的文件和文件夹就行

Material Icon Theme

在这里插入图片描述

vscode-icons

在这里插入图片描述

VSCode Great Icons

在这里插入图片描述

其他

A-super-translate

对英语掌控不好的人比较适用

  • 翻译识别代码中注释部分，不干扰阅读。支持不同语言，单行、多行注释、
  • 支持用户字符串与变量翻译,支持驼峰拆分

在这里插入图片描述

Draw.io Integration

Draw.io的官方插件，支持在VSCode中画图，支持多人协作编辑图表

在这里插入图片描述

LeetCode

LeetCode 官方刷题插件，vscode刷题你值得拥有

demo

Learn Vim

vscode里学习 Vim ，让你快速成为键盘手

在这里插入图片描述

Emoji

从命令面板中找到并插入表情，喜欢用表情的同学可以试试

emoji

最后的话

以上这些插件，如果对你有用的话，不妨点赞收藏关注一下，谢谢 🙏

大家有更好的插件，也欢迎补充

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/29650.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

MCE | HPV 疫苗要不要打？

MCE | HPV 疫苗要不要打？

HPV 感染很大概率会患宫颈癌？HPV 感染 ≠ 患宫颈癌超过 90％ 的 HPV 感染者无症状，并无需干预能在 2 年内清除感染。虽然大部分 HPV 感染会自行消退，但所有感染女性都面临 HPV 感染转为慢性，以及癌前病变发展为浸润性宫…
阅读更多...
ViewPager2+TabLayout

ViewPager2+TabLayout

效果图： MainActivity public class MainActivity extends AppCompatActivity {private TabLayout tabLayout;private ViewPager2 viewPager2;private int activeColor Color.parseColor("#ff678f");private int normalColor Color.parseColor("#…
阅读更多...
C++入门教程||C++中的输入输出||C++ 注释

C++入门教程||C++中的输入输出||C++ 注释

1. cout输出流的使用&#xff1a; cout输出流需要搭配<<输出操作符来使用&#xff0c;如输出语句&#xff1a; 1 cout<<"Hello"; 即会在屏幕上显示字符串Hello。 本质上&#xff0c;是将字符串"Hello"插入到cout对象里&#xff0c;并以cout…
阅读更多...
一些RCE的汇总

一些RCE的汇总

RCE自增RCE参考[CTFshow-RCE极限大挑战官方wp]RCE-1[过滤.(]RCE-2p[自增-Array]RCE-3[自增-NAN-<105字符]RCE-4[自增-NAN-<84字符]RCE-5[自增-gettext扩展]72位字符68位字符无参数RCE参考[RCE篇之无参数rce]介绍例题一些能用上的函数前两天刚好ctfshow有个RCE极限大挑战&…
阅读更多...
网络基础知识总结＋网络设备介绍（运维必备网络知识）

网络基础知识总结＋网络设备介绍（运维必备网络知识）

什么是网络 网络是由多台计算机&#xff08;或手机等&#xff09;通过网络设备&#xff08;交换机以及路由器&#xff09;及网线&#xff08;或无线&#xff09;连接起来&#xff0c;按照一定的规范规则则彼此进行通信的系统总称。 为什么要有网络 网络出现的最核心需求就是…
阅读更多...
[足式机器人]Part3机构运动微分几何学分析与综合Ch01-3 平面运动微分几何学——【读书笔记】

[足式机器人]Part3机构运动微分几何学分析与综合Ch01-3 平面运动微分几何学——【读书笔记】

本文仅供学习使用 本文参考&#xff1a; 《机构运动微分几何学分析与综合》-王德伦、汪伟 《微分几何》吴大任 Ch01-3 平面运动微分几何学1.2.2 瞬心线-21.2.3 点轨迹的Euler-Savary公式1.2.2 瞬心线-2 &#xff08;3&#xff09;平面连杆机构&#xff08;二自由度开链串联机构…
阅读更多...
【LeetCode-中等】238. 除自身以外数组的乘积（详解）

【LeetCode-中等】238. 除自身以外数组的乘积（详解）

题目 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请不要使用除法&#xff0c;且在 O(n) 时…
阅读更多...
vue 动态组件 render/jsx

vue 动态组件 render/jsx

需求 根据用户需求设定的动态呈现表单内容 刚开始 打算使用v-html使用,但是v-html 无法渲染组件&#xff0c;只能显示原生的dom,操作起来实在是不方便。查阅了之后&#xff0c;发现可以用render或者jsx实现【为了能作为Vue模板解析】。于是乎开启了我render之旅~ 使用 <tem…
阅读更多...
基于JAVA的图书借阅管理平台【数据库设计、源码、开题报告】

基于JAVA的图书借阅管理平台【数据库设计、源码、开题报告】

数据库脚本下载地址&#xff1a; https://download.csdn.net/download/itrjxxs_com/86427643 高校图书馆提倡“以人为本”的管理理念&#xff0c;从读者的角度出发&#xff0c;最大程度满足读者群体的文献资源需要。高校图书馆的管理理念和服务模式之间有着紧密的联系&#xff…
阅读更多...
一键开启云原生网络安全新视界

一键开启云原生网络安全新视界

本文作者&#xff1a;陈桐乐 李卓嘉 随着云原生的兴起&#xff0c;微服务、容器、kubernetes容器编排正在快速改变着企业软件架构的形态&#xff0c;单体架构、分布式架构、微服务架构&#xff0c;软件架构在持续演进的过程中&#xff0c;变得越来越复杂&#xff0c;管理和维护…
阅读更多...
Qt QLabel文本框的使用

Qt QLabel文本框的使用

文章目录QLabel文本框的使用QLabel文本框的信号和槽实例演示QLabel文本框的用法已剪辑自: http://c.biancheng.net/view/vip_9653.html QLabel 是 Qt 帮我们写好的一个控件类&#xff0c;间接继承自 QWidget 类&#xff0c;它的继承关系如下&#xff1a; QLabel -> QFrame…
阅读更多...
消防宣传科普｜消防安全知识网上答题挑战赛活动方案

消防宣传科普｜消防安全知识网上答题挑战赛活动方案

活动背景 为普及消防法律法规和消防安全知识&#xff0c;营造消防宣传月浓厚氛围。集团公司防火办通过“防火安全知识专项学习与竞答”小程序&#xff0c;开展“消防知识网上答题挑战赛”&#xff0c;提升全员消防安全意识&#xff0c;提高抗御火灾、自防自救和组织疏散能力。…
阅读更多...
配置FTP站点操作步骤—图解

配置FTP站点操作步骤—图解

前提条件(已安装FTP服务器可忽略)&#xff1a; 点击WinR后在运行窗口中输入control&#xff0c;将打开控制面板&#xff0c;选择【程序】—【启动或关闭Windows功能】—点击【Internet Information Services】勾选【FTP服务器】—点击【确定】按钮按照即可。 1.点击WinR后在运…
阅读更多...
数字集成电路设计（六、Verilog HDL高级程序设计举例）

数字集成电路设计（六、Verilog HDL高级程序设计举例）

文章目录1. 数字电路系统设计的层次化描述方式1.1 Bottom-Up 设计方法1.2 Top-Down 设计方法2. 典型电路设计2.1 加法器树乘法器2.1.1 改进为两级流水线4位加法器树乘法器2.2 Wallace 树乘法器2.3 复数乘法器2.4 FIR滤波器的设计2.5 存储器的设计2.6 FIFO的设计1. 数字电路系统…
阅读更多...
Mac下，protoc-gen-go-grpc: program not found or is not executable问题的解决

Mac下，protoc-gen-go-grpc: program not found or is not executable问题的解决

一 问题来源 在公司的项目中，需要把对应的proto文件生成对应的pb文件，当执行protoc相关命令时，出现报错：protoc-gen-go-grpc: program not found or is not executable Please specify a program using absolute path or make sure the program is available in your PATH …
阅读更多...
IDEA配置Tomcat，先报500错误，刷新后报404.

IDEA配置Tomcat，先报500错误，刷新后报404.

IDEA配置Tomcat&#xff0c;先报500错误&#xff0c;刷新后报404的解决方法.错误1&#xff1a;JDK的版本高于JRE的版本错误2&#xff1a;Tomcat版本与JDK版本不相符报错截图 错误1&#xff1a;JDK的版本高于JRE的版本 这也是我个人在配置过程中&#xff0c;导致无法配置成功的…
阅读更多...
HTML旅游网页设计制作 DW旅游网站官网滚动网页 DIV旅游风景介绍网页设计与实现

HTML旅游网页设计制作 DW旅游网站官网滚动网页 DIV旅游风景介绍网页设计与实现

&#x1f468;‍&#x1f393;学生HTML静态网页基础水平制作&#x1f469;‍&#x1f393;&#xff0c;页面排版干净简洁。使用HTMLCSS页面布局设计,web大学生网页设计作业源码&#xff0c;这是一个不错的旅游网页制作&#xff0c;画面精明&#xff0c;排版整洁&#xff0c;内容…
阅读更多...
Transferrin-PEG-PMMA 转铁蛋白-聚乙二醇-聚甲基丙烯酸甲酯，F-PEG-PBA/PAE/PPS

Transferrin-PEG-PMMA 转铁蛋白-聚乙二醇-聚甲基丙烯酸甲酯，F-PEG-PBA/PAE/PPS

产品名称&#xff1a;转铁蛋白-聚乙二醇-聚甲基丙烯酸甲酯 英文名称&#xff1a;Transferrin-PEG-PMMA 纯度&#xff1a;95% 存储条件&#xff1a;-20C&#xff0c;避光&#xff0c;避湿 外观:固体或粘性液体&#xff0c;取决于分子量 PEG分子量可选&#xff1a;350、550、750、…
阅读更多...
numpy数组索引、数组切片、数组形状修改、数组类型修改和数组去重

numpy数组索引、数组切片、数组形状修改、数组类型修改和数组去重

一、numpy数组索引、切片 直接进行索引&#xff0c;切片对象[:, :]&#xff1a;先行后列 代码如下 a np.array([[1, 2, 3], [11, 22, 33]]) # 二维数组 a[1, [0,1,2]] # 索引a np.array([[1, 2, 3], [11, 22, 33]]) # 二维数组 a[1, 0:3] # 切片a2 np.array([[[1,…
阅读更多...
【Paper】2021_多智能体系统滞后一致性研究_马逸文

【Paper】2021_多智能体系统滞后一致性研究_马逸文

马逸文. 多智能体系统滞后一致性研究[D].西南民族大学,2021.DOI:10.27417/d.cnki.gxnmc.2021.000193. 文章目录第一章 绪论第三章 二阶离散线性多智能体系统滞后一致性3.5 数值仿真第一章 绪论 第三章 二阶离散线性多智能体系统滞后一致性 3.5 数值仿真 x0(k1)Ax0(k)v0(k)v0(…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023