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

Talljack

已于 2022-11-23 22:05:04 修改

阅读量2.6k

点赞数 2

分类专栏：前端 Vue3 文章标签： vscode 编辑器前端

于 2022-11-23 22:00:49 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/cyg_l02/article/details/128008229

版权

前端同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

9 篇文章 0 订阅

订阅专栏

`前言`

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

`开发实用插件`

`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的开发者，这能过提高不少开发效率

`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

`最后的话`

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

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

关注

2
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
我把提高开发效率的VSCode插件分享出来了

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

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。