【VSCode】最全实用插件(VIP典藏版)

2023-10-25 07:10

本文主要是介绍【VSCode】最全实用插件(VIP典藏版),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

一、必备插件

🌾Chinese(中文)

🤡Settings Sync(配置同步到云端)

​🌈wakatime(编程时间及行为跟踪统计)

二、效率神器

✨HTML Snippets(代码提示)

🍎Auto Close Tag(自动闭合标签)(🌈🌈🌈)

🌈Bracket Pair Colorizer(括号做颜色区分)(🌈🌈🌈🌈🌈)

🤙Browser Preview(VSCode里面打开浏览器)

🎯REST Client(接口调试)

💎CSS Peek(css样式查看器)

🥝Partial Diff(文件比较)

🤙Npm Intellisense(自动完成导入语句中的npm模块)

🎯open in browser(快速打开html文件到浏览器预览)

💎Path Intellisense(快速引入文件)

🐳Image preview(预览图片)

三、Git相关

🏓GitHub Pull requests( 查看和管理GitHub拉取请求和问题)

🏓Git Graph(Git 图形化显示和操作)

🐳GitLens(快速查看更改行或代码块的对象)

🐳GitHistory(可查看和搜索git日志以及图形和详细信息)(🌈🌈)

四、美化

🌈(黑白两款皮肤)

🥝vscode-icons(漂亮的目录树图标主题)

🌈Beautify(右键鼠标一键格式化)

🥝Vetur(官方钦定Vue插件)(🌈🌈🌈🌈🌈)

🌈Better Align(代码优雅排版)

🥝Better Comments(丰富注释颜色)(🌈🌈🌈)

🌈Daybreak(主题精品推荐1)(🌈)

🌈Ariake Dark(主题精品推荐2)(🌈🌈)

🌈Amethyst Themes(主题精品推荐3)(🌈🌈🌈)

五、代码规范

🧣change-case(变量命名规范)

🧣JavaScript Booster(代码改进)

🧣JavaScript (ES6) code snippets(智能提示与快速输入)

🧣ESlint(严谨的规范书写)

🧣TSLint(书写规范)

🧣Code Spell Checker(拼写检查程序)

🧣koroFileHeader(生成文件头部注释和函数注释)

六、装X神器

🎽Markdown All in One(书写Markdown)

🤡vscode-drawio(画流程图)

🍋Polacode-2020(转化成一张逼格满满的图片)

🍎Live Share(与他人实时进行协作式编辑和调试)

七、往期相关优质推荐


一、必备插件

🌾Chinese(中文)

安装后,按快捷键Ctrl+Shift+P,输入

configure language

🤡Settings Sync(配置同步到云端)

可以让我们的vscode配置同步到云端,当我们跟换电脑或者再次安装vscode的时候,只需要登录账号即可同步配置了

🌈wakatime(编程时间及行为跟踪统计)

 编程时间及行为跟踪统计

二、效率神器

✨HTML Snippets(代码提示)

HTML代码片段,该插件可为你提供html标签的代码提示,不用键入尖括号了

🍎Auto Close Tag(自动闭合标签)(🌈🌈🌈)

自动闭合HTML/XML标签

🌈Bracket Pair Colorizer(括号做颜色区分)(🌈🌈🌈🌈🌈)

括号做颜色区分

"workbench.colorCustomizations": {"editorIndentGuide.activeBackground": "#00ffea"}

🤙Browser Preview(VSCode里面打开浏览器)

可以在vscode里面打开浏览器,一边编码一边查看

🎯REST Client(接口调试)

可以在vscode里面进行接口调试,提供丰富的api配置方式,让我们不用离开编辑器也可以随时调用接口调试

新建一个.http文件,写下基本的测试代码,点击 Send Request即可在右边窗口查看接口返回结果,非常nice

💎CSS Peek(css样式查看器)

🥝Partial Diff(文件比较)

文件比较

🤙Npm Intellisense(自动完成导入语句中的npm模块)

可自动完成导入语句中的npm模块

🎯open in browser(快速打开html文件到浏览器预览)

快速打开html文件到浏览器预览

💎Path Intellisense(快速引入文件)

自动提示文件路径,支持各种快速引入文件

🐳Image preview(预览图片)

鼠标悬浮在链接上可及时预览图片

三、Git相关

🏓GitHub Pull requests( 查看和管理GitHub拉取请求和问题)

在Visual Studio Code中查看和管理GitHub拉取请求和问题

🏓Git Graph(Git 图形化显示和操作)

🐳GitLens(快速查看更改行或代码块的对象)

GitLens可以帮助您更好地理解代码。快速查看更改行或代码块的对象

🐳GitHistory(可查看和搜索git日志以及图形和详细信息)(🌈🌈)

GitHistory可查看和搜索git日志以及图形和详细信息,同时还支持分支比较,分支管理等操作

四、美化

🌈(黑白两款皮肤)

🥝vscode-icons(漂亮的目录树图标主题)

提供了非常漂亮的目录树图标主题

🌈Beautify(右键鼠标一键格式化)

在代码文件右键鼠标一键格式化 html,js,css

🥝Vetur(官方钦定Vue插件)(🌈🌈🌈🌈🌈)

VScode官方钦定Vue插件,Vue开发者必备。内含语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger等实用功能

代码风格规范类插件

🌈Better Align(代码优雅排版)

代码优雅排版

选中代码配合组合键[Ctrl+Shift+p],输入Align即可

🥝Better Comments(丰富注释颜色)(🌈🌈🌈)

丰富注释颜色

自定义样式,需要写入配置代码

配置代码
"better-comments.tags": [ {"tag": "*","color": "#98C379","strikethrough": false,"backgroundColor": "transparent" }]
使用// * 绿色的高亮注释复制代码TODO Tree

🌈Daybreak(主题精品推荐1)(🌈)

夕阳系列, 色彩柔和, 喜欢的人应该很喜欢, 不喜欢的应该不喜欢

🌈Ariake Dark(主题精品推荐2)(🌈🌈)

整体没啥大改变,  但是整体色系观感好不少, 包括文字

🌈Amethyst Themes(主题精品推荐3)(🌈🌈🌈)

也是紫色系, 个人喜欢这个Light的

五、代码规范

🧣change-case(变量命名规范)

变量命名规范

🧣JavaScript Booster(代码改进)

会提示对应的不合理原因和改进方案

🧣JavaScript (ES6) code snippets(智能提示与快速输入)

ES6语法智能提示,以及快速输入

🧣ESlint(严谨的规范书写)

规范js代码书写规则,如果觉得太过严谨,可自定义规则

🧣TSLint(书写规范)

ts的书写规范,这个插件是一个系列,同时还提供了TSLint (deprecated),TSLint Vue,TSLint Vue-TSX

🧣Code Spell Checker(拼写检查程序)

是拼写检查程序,检查不常见的单词,如果单词拼写错误,会给出警告提示

🧣koroFileHeader(生成文件头部注释和函数注释)

在vscode中用于生成文件头部注释和函数注释的插件,经过多版迭代后,插件:支持所有主流语言,功能强大,灵活方便,文档齐全,食用简单!

不光如此,还能生成一些特别有意思的注释,比如这一条喷火龙...

六、装X神器

🎽Markdown All in One(书写Markdown)

可以在vscode里面快乐的书写Markdown,功能强大。丰富的快捷键,边写边看,轻松转化为html或pdf文件

🤡vscode-drawio(画流程图)

可以在vscode里面快乐的画流程图,新建 .drawio 后缀文件并拖入vscode中

🍋Polacode-2020(转化成一张逼格满满的图片)

可以将我们的代码转化成一张逼格满满的图片

🍎Live Share(与他人实时进行协作式编辑和调试)

这款神器可以使您能够与他人实时进行协作式编辑和调试

七、往期相关优质推荐

VSCode 最全实用插件(VIP典藏版)
Vue超详细整理(VIP典藏版)
Vue中created,mounted,updated详解
一文快速上手Echarts(持续更新)
Vue中el-table数据项扩展各种类型总结(持续更新)

有用请点赞,养成良好习惯!

疑问、交流、鼓励请留言!


这篇关于【VSCode】最全实用插件(VIP典藏版)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/280891

相关文章

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中,并且长按图标也不会出现删除符号,下面解决这个问... 在 MACOS 上,Launchpad(也就是「启动台」)是一个便捷的 App 启动工具。但有时候,应

Spring Boot结成MyBatis-Plus最全配置指南

《SpringBoot结成MyBatis-Plus最全配置指南》本文主要介绍了SpringBoot结成MyBatis-Plus最全配置指南,包括依赖引入、配置数据源、Mapper扫描、基本CRUD操... 目录前言详细操作一.创建项目并引入相关依赖二.配置数据源信息三.编写相关代码查zsRArly询数据库数

Python中DataFrame转列表的最全指南

《Python中DataFrame转列表的最全指南》在Python数据分析中,Pandas的DataFrame是最常用的数据结构之一,本文将为你详解5种主流DataFrame转换为列表的方法,大家可以... 目录引言一、基础转换方法解析1. tolist()直接转换法2. values.tolist()矩阵

VSCode中C/C++编码乱码问题的两种解决方法

《VSCode中C/C++编码乱码问题的两种解决方法》在中国地区,Windows系统中的cmd和PowerShell默认编码是GBK,但VSCode默认使用UTF-8编码,这种编码不一致会导致在VSC... 目录问题方法一:通过 Code Runner 插件调整编码配置步骤方法二:在 PowerShell

VSCode配置Anaconda Python环境的实现

《VSCode配置AnacondaPython环境的实现》VisualStudioCode中可以使用Anaconda环境进行Python开发,本文主要介绍了VSCode配置AnacondaPytho... 目录前言一、安装 Visual Studio Code 和 Anaconda二、创建或激活 conda

在VSCode中本地运行DeepSeek的流程步骤

《在VSCode中本地运行DeepSeek的流程步骤》本文详细介绍了如何在本地VSCode中安装和配置Ollama和CodeGPT,以使用DeepSeek进行AI编码辅助,无需依赖云服务,需要的朋友可... 目录步骤 1:在 VSCode 中安装 Ollama 和 CodeGPT安装Ollama下载Olla

使用DeepSeek API 结合VSCode提升开发效率

《使用DeepSeekAPI结合VSCode提升开发效率》:本文主要介绍DeepSeekAPI与VisualStudioCode(VSCode)结合使用,以提升软件开发效率,具有一定的参考价值... 目录引言准备工作安装必要的 VSCode 扩展配置 DeepSeek API1. 创建 API 请求文件2.

VScode连接远程Linux服务器环境配置图文教程

《VScode连接远程Linux服务器环境配置图文教程》:本文主要介绍如何安装和配置VSCode,包括安装步骤、环境配置(如汉化包、远程SSH连接)、语言包安装(如C/C++插件)等,文中给出了详... 目录一、安装vscode二、环境配置1.中文汉化包2.安装remote-ssh,用于远程连接2.1安装2

vscode保存代码时自动eslint格式化图文教程

《vscode保存代码时自动eslint格式化图文教程》:本文主要介绍vscode保存代码时自动eslint格式化的相关资料,包括打开设置文件并复制特定内容,文中通过代码介绍的非常详细,需要的朋友... 目录1、点击设置2、选择远程--->点击右上角打开设置3、会弹出settings.json文件,将以下内

Debian如何查看系统版本? 7种轻松查看Debian版本信息的实用方法

《Debian如何查看系统版本?7种轻松查看Debian版本信息的实用方法》Debian是一个广泛使用的Linux发行版,用户有时需要查看其版本信息以进行系统管理、故障排除或兼容性检查,在Debia... 作为最受欢迎的 linux 发行版之一,Debian 的版本信息在日常使用和系统维护中起着至关重要的作