vscode-超实用插件推荐(代码片段)

WHOVENLY WHOVENLY     2022-12-08     636

关键词:

今天这篇文章呢,是想和大家分享一波Vscode中一些好用的插件,可能不全,会持续更新,所以欢迎大家分享自己觉得好用的Vscode插件,咱们评论区见哦~

1.Live Server

作用:可以在本地启动一个服务器,可以实现热更新,实时地在网页中看到运行效果,就不需要每次都得手动刷新页面了。
使用方式:安装该插件后,在 HTML 文件中右键选择【Open with Live Server】,即可在本地启动一个服务器查看页面。

2.Chinese (Simplified) Language Pack for Visual Studio Code


作用:将软件汉化,灰常适合像我一样English不好的童鞋~
使用方式:安装插件后,即可汉化,如果还未汉化,则可以先关闭软件,再次进入时就可以看到已经汉化完成的界面啦~

3.Bracket Pair Colorizer2

作用:以不同颜色显示成对的括号,简称彩虹括号。
使用前后对比


是否使用,这个因人而异,我的感受是层级更加分明了些,但是有些人可能觉得太花了,那就忽略它吧~咱看下一个

4.open in browser

作用:是VScode的常用插件,它的作用是可以把编辑的HTML文件等用浏览器打开,查看效果。
使用方式:安装该插件后,在 HTML 文件中右键选择【Open in Default Browser】,即可在浏览器中预览网页。

5.vscode-icons


作用: 会根据文件的后缀名来显示不同的图标,让你更直观地知道每种文件是什么类型的。
使用前后对比
可以明显的感觉到使用该插件后我们可以更加直观的知道每种文件是什么类型的。

6.Project Manager


作用:在开发过程中,我们经常会来回切换多个项目,每次都要找到对应项目的目录再打开,比较麻烦。Project Manager 插件可以解决这样的烦恼,它提供了专门的视图来展示你的项目,我们可以把常用的项目保存在这里,需要时一键切换,十分方便。
使用步骤
1.配置文件:
windows或linux使用control+shift+p打开命令行窗口,输入Project Mangager: Edit Projects;
若是mac os系统则使用command+shift+p打开命令行窗口,输入Project Mangager: Edit Projects;

打开配置文件后,就可以以添加一个对象的方式添加一个项目进去了。一般添加一个项目都是先复制一份,然后只需要修改name值(项目名称)和rootPath值(项目所在目录)就可。

2.快速打开保存的项目:
在界面的左侧导航栏中新增了一个文件夹的图标,点击它,右侧的展示面板就会出现我们添加到配置文件中的项目了,这时我们只要将鼠标移至想要打开的项目文件名上,就会出现一个带有箭头的小图标,点击后就可以在新窗口中打开这个项目了~

7.Local History

作用:用于维护文件的本地历史记录,平常可能没啥感觉,但是当代码意外丢失时,你就会发现他的用处了!!
注意事项
项目的根目录会生成一个.history目录,可以把.history加入到.gitignore中,就不会把历史文件提交到git中。

8.Polacode-2020

定义:用于把代码保存成相对于截图来讲更加美观的图片,并且支持自己设置边框颜色、大小、阴影等样式。
可以把代码保存成美观的图片,主题不同,代码配色方案也不同,也可
使用步骤
windows或linux使用control+shift+p打开命令行窗口,输入Project Mangager: Edit Projects;
若是mac os系统则使用command+shift+p打开命令行窗口,输入Project Mangager: Edit Projects;

在左侧选择想要的代码,右侧则会生成相对应的图片

图片上方的选项用于自定义图片样式,下方的拍照按钮则是保存图片。

9.Image Preview 【荐】

作用:用于实现图片预览,当鼠标移动到图片url上时,会出现图片预览图和尺寸。

10.CSS Peek

作用:用于快速查看元素上的 CSS 样式,按住CTRL键同时移到鼠标到要查看样式的类上就可以看到该类的定义了。

11.Vue CSS Peek

作用:CSS Peek 对 Vue 没有支持,该插件提供了对 Vue 文件的支持。

12.Color Info


作用:可以为你提供在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标,就可以预览色块中色彩模型的(HEX、 RGB、HSL 和 CMYK)相关信息了。

13.别名路径跳转


作用:支持各种形式的路径快速跳转,包括别名路径、相对路径、省略后缀名的路径(可以配置后缀名列表)、目录路径(即自动跳转该目录下的index文件),可以节省很多时间。

使用方式
按住ctrl并点击要跳转的页面路径,即可跳转到该页面

超实用的vscode插件推荐,快看看你都用到了哪些?

前言VSCode是一款非常热门的开发工具,作为一款轻量级编辑器,它体积小,启动速度非常快,再加上丰富的插件系统,深得广大开发者的喜欢。今天推荐一些非常实用的插件,让开发如虎添翼。1.CodeIf(... 查看详情

vscode----热门插件超实用插件汇总(史上最全)

Vscode----热门插件超实用插件汇总一、汉化Vscode二、Vue配件1.Vetur2.Vue3Snippets三、配置类插件1.AutoRenameTag2.AutoCloseTag3.Beautify4.DebuggerforChrome5.DebuggerforJava6.ESLint7.HighlightMatchingTag8.ImagePreview9.ImageSnippets10.LiveServer11.OpeninBrowser12.Prettier-Codefor... 查看详情

超实用的vscode插件推荐,快看看你都用到了哪些?

前言VSCode是一款非常热门的开发工具,作为一款轻量级编辑器,它体积小,启动速度非常快,再加上丰富的插件系统,深得广大开发者的喜欢。今天推荐一些非常实用的插件,让开发如虎添翼。1.CodeIf(... 查看详情

超实用的vscode插件推荐,快看看你都用到了哪些?

前言VSCode是一款非常热门的开发工具,作为一款轻量级编辑器,它体积小,启动速度非常快,再加上丰富的插件系统,深得广大开发者的喜欢。今天推荐一些非常实用的插件,让开发如虎添翼。1.CodeIf(... 查看详情

vscode插件推荐

...目所支持的样式新版已经支持scss文件检索DebuggerforChrome让vscode映射chrome的debug功能,静态页面都可以用vscode来打断点调试,真666~jQueryCodeSnippetsjquery重度患者必须品vscode-icons 查看详情

vscode敲实用的拓展插件推荐(持续更新)

文章目录PythonPythonDocstringGeneratorOfficeViewerCodeSpellCheckermarkdownlintRemote-SSHPython开源地址:https://github.com/Microsoft/vscode-pythonPython开发者必备。包含的功能有:智能提示,代码调试,代码导航以及 查看详情

vscode插件推荐

...目所支持的样式新版已经支持scss文件检索DebuggerforChrome让vscode映射chrome的debug功能,静态页面都可以用vscode来打断点调试,真666~ 配置稍微复杂一些,哪天心情好我再另写教程吧~jQueryCodeSnipp 查看详情

初识vscode(代码片段)

1.安装VisualStudioCode(VScode)官网 :https://code.visualstudio.com/ VisualStudioCode(VScode)github地址:https://github.com/Microsoft/vscode 2.主题插件推荐OneDarkProAtomOneDarkThemeEvaThemeMaterialPalenightTheme更多VisualStudioCode主题插件请参考VSCodeDownloads... 查看详情

vscode拓展插件推荐(代码片段)

VSCode拓展插件推荐插件列表AutoCloseTag 自动闭合HTML标签AutoRenameTag 修改HTML标签时,自动修改匹配的标签Bookmarks 添加行书签CanIUse HTML5、CSS3、SVG的浏览器兼容性检查CodeRunner 运行选中代码段(支持大量语言,包括N... 查看详情

vscode入门操作大全+实用插件推荐零基础专属详细教程(代码片段)

...开发工具很重要,很多刚学编程的小伙伴在webstorm和vscode上很难抉择,我个人更喜欢使用vscode,因为其有着简洁的操作风格和丰富的人性化的各种功能,这篇文章带给大家vscode的新手操作指南,大家可以把这篇... 查看详情

2023年最新最全vscode插件推荐(代码片段)

...c;提供了很多实用的插件。下面就来分享2023年前端必备的VSCode插件! 前端框架ES7+React/Redux/React-Nativesnippets该插件提供了许多速记前缀来加速开发并帮助开发人员为React、Redux、GraphQL和ReactNative创建代码片段和语法。例如&#x... 查看详情

vscode推荐安装插件(代码片段)

...级但功能强大的源代码编辑器,轻量级指的是下载下来的VsCode其实就是一个简单的编辑器,强大指的是支持多种语言的环境插件拓展,也正是因为这种支持插件式安装环境开发让VsCode成为了开发语言中的霸主,让同时支持开发多... 查看详情

vscode实用插件推荐,让你的开发效率火力全开

辅助开发类:1.VeturVUE开发必备插件1.语法高亮,包括vue/htmlcss/sass/scss/less/stylusjs/ts2.语义高亮,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件3.语法错误检查,包括CSS/SCSS/LESS/Javascript/TypeScri... 查看详情

intellijidea超实用使用技巧分享

https://blog.csdn.net/weixin_38405253/article/details/102583954 知识点概览:高效率配置日常使用必备快捷键(★★)查找跳转切换编码相关代码阅读相关版本管理相关编码效率相关(★★)文件代码模板实时代码模板其他代码调试源码阅... 查看详情

2022,vscode前端插件推荐(代码片段)

前言推荐一波前端开发必备插件,绝对可以提高你的生产力,剩下来的时间来mo鱼,岂不美哉开发综合推荐别名路径跳转插件名:别名路径跳转使用说明: 别名路径跳转插件,支持任何项目,使用场景:当你... 查看详情

几款提升开发体验的vscode插件推荐(代码片段)

今天推荐几款通用的VSCode插件给大家。对于轻量级的文本或代码编辑器,最开始用过Notepad++,后来换了Sublime和Atom,最后换成了VSCode。作为一款微软出品的编辑器,最吸引我的是轻量级、启动快,扩展丰... 查看详情

flutter开发vscode插件推荐(开发必备)(代码片段)

...前端,”,或者加我好友,获取更多精彩内容vscode开发插件推荐扩展是完成工作的快捷方式。许多扩展有助于减少重复性工作、减少样板代码等。其他一些扩展有助于协助开发过程,甚至有助于更快、更高效的开... 查看详情

linuxc++开发面试系列:vscode编写运行cc++程序配置和插件推荐(代码片段)

文章目录同步GitHub在此👉[https://github.com/TeFuirnever/GXL-Skill-Tree](https://github.com/TeFuirnever/GXL-Skill-Tree)VSCode的gcc、g++配置1、开发环境2、文件配置3、快捷键VSCode插件推荐同步GitHub在此👉https://githu 查看详情