vscode最牛插件分享,只有你想不到,没有vscode办不到

5,903 阅读7分钟

前言

大家好,我是小阵 🔥,一路奔波不停的码字业务员
身为一个前端小菜鸟,总是有一个飞高飞远的梦想,因此,每点小成长,我都想要让它变得更有意义,为了自己,也为了更多值得的人
如果喜欢我的文章,可以关注 ➕ 点赞,与我一同成长吧~😋
加我微信:zzz886885,邀你进群,一起学习交流,摸鱼学习两不误🌟

开开心心学技术大法~~

开心

来了来了,他真的来了~

正文

经常使用vscode进行编程,用了好久,今天换电脑,新装的vscode在下载插件时忘记了之前用的顺手的几个,这里记录一下,顺便分享给大家,希望大家编程效率越来越高,编程习惯越来越好,编程方式越来越拉风!

温馨提示🚀:我知道有些小老弟上来就爱看「摸鱼」插件。

先上目录:

📢 目录功能可能手机端支持度不够好哦,大家不要着急,往下扑灵扑灵的滑吧😁

推荐团队调试插件 Live Share

在线实时共享代码改动,可以手动设置【只读】、【读写】权限,方便控制代码安全;同时内置了聊天窗口,不用切屏聊天;分享者还可以跟随贡献者的视角查看他做了哪些改动;分享者也可以手动控制哪些文件允许贡献者访问,哪些被禁止,具体可以查看Live Share安全

更多Live Share信息查看 这里

image.png

image.png

必备基础插件

Chinese (Simplified) Language Pack for Visual Studio Code 中文插件

GitLens 开发必备git工具

包括但不限于以下功能:

  1. Revision Navigation
  2. Current Line Blame
  3. Git Code Lens
  4. Status Bar Blame
  5. File History view
  6. Changes diff

更多GitLens插件详情 dong2.gif

vscode-iconsvscode的文件图标插件

Excel Viewer阅览并编辑excel

image.png

Polacode-2020 帮助对项目代码进行截图

尤其是当你热衷于发技术博客的话,利用该插件进行代码截图可能会让界面看上去更加的优雅和谐。

Polacode截图 vscode cmd+p =》输入polacode即可以调出截图面板=》自由选择你的截图代码吧 image.png

各种snippets

blog.hhking.cn/2018/08/15/… 道友的优秀推荐

提效插件

Color Highlight 实现在js中的颜色相关的代码显示相应的背景色

Color Picker 颜色拾取器

Highlight Matching Tag 标签高亮

对于写html的小伙伴来说,最痛苦的莫过于控制台报少标签的错误,有了这个插件,再碰到这种问题直接对比颜色就可以啦

Path Intellisense 路径提醒插件

Auto Close Tag 自动关闭标签,可以在你输入首标签的时候自动补全尾标签,省时省力

该插件不止闭合html,还可以支持很多文件格式,跟vscode自带的关闭html功能并不重复

Auto Rename Tag 在你更改标签名时该插件自动更改对应标签名

Bracket Pair Colorizer语句块染色器

该插件目前已内置,无需再额外下载

Subtle Match Brackets 语句块小括号、大括号处可以自定义样式,简单看清楚作用域

举一个简单配置的例子,在vscodesettings.json中添加如下代码

"subtleBrackets.style": {
    "borderWidth": "2px",
    "borderStyle": "none none solid none",
    "borderColor": "#e84393",
},

settings.json可以通过cmd+,打开控制台,然后搜索Subtle Match Brackets插件进入配置;查看更多Subtle Match Brackets自定义配置

Simple React Snippets

react的snippet,轻松书写react代码

Easy Fe Snippets

作者自己写了一个snippets插件,集成了市面上安装量较大的Vue 3 SnippetsSimple React Snippets,另新增一些常用js、ts语法的snippets

  • React文件中

react-ex1.gif React Snippets


  • Vue文件中 Vue Snippets Vue Snippets

  • js/ts文件中 js/ts Snippets

  • json文件中 json snippets

ESLint

代码检查 规范代码必备

Code Runner

在vscode的控制台中运行代码 支持多种语言

以后再也不用新建html文件然后写script标签啦,当然也可以直接在浏览器控制台中书写js代码,如果你用习惯的话..

REST Client可以代替postman在vscode中直接发起请求,请求头配置和参数设置也可以自定义

更多REST Client使用规则

open in browser 在浏览器中查看 VS Code没有提供直接在浏览器中运行程序的内置功能,所以我们需要安装此插件,在浏览器中查看我们的程序运行效果

Highlight Matching Tag 高亮显示匹配标签

这个插件自动帮我们将选中的匹配标签高亮显示,再也不用费劲查找了。

Image Preview 图片预览 鼠标移动到图片 url 上的时候,会自动显示图片的预览和图片尺寸。

image.png

Markdown All in One 编辑markdown实时预览+导出为html或者pdf

可以在vscode中实时编辑markdown文本并预览 也可以导出为html或者pdf

常用快捷键:
Ctrl/Cmd + Shift + V 预览markdown
Ctrl/Cmd + K V 打开新tab预览markdown
更多详情移步这里

image.png

Bookmarks 书签

当文件比较大的时候改代码,可能需要频繁跳转到多个地方进行改动代码,这个时候可以通过给不同的代码行添加标签来进行快速跳转;

涉及到的快捷键:
option+command+k 开/关书签
option+command+j 上一个书签
option+command+l 下一个书签
更多详情移步这里

image.png

vscode-syncing vscode配置可以在多台设备中通过该插件进行同步

目前vscode登陆账号之后已经可以自动实现同步插件的功能了

具体使用:github.com/nonoroazoro…

Regex Previewer 正则在线调试

实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上,并高亮所有的匹配项 dong1.gif

摸鱼插件

小霸王 让你在vscode中玩儿小霸王游戏

更多小霸王详情信息

5E26F4B6-31A4-41B9-BA26-630E737F9ACD.png

Thief-Book 摸鱼看书神器

更多Thief-Book使用规则

image.png

leetcode 进大厂必备

进大厂,必须刷题!这个插件直接在VSCode中刷LeetCode! image.png

Zhihu On Vscode 知乎在线摸鱼

大家都说,知乎用户平均学历 985 ,是大牛云集地方,上班摸鱼怎么能不上知乎学习呢? image.png

daily-anime 追番神器

image.png

韭菜盒子 看股票,看基金

dong3.png

电影集 看电影

image.png

VSC Netease Music 听音乐

dong3.gif

live2D 各种二次元看板娘

image.png

🌈 Rainbow Fart 在你写代码的时候疯狂跟你发语音彩虹屁,支持各种语音包哦

更多看这里

image.png

小程序开发者必备

小程序开发助手

  • 支持 js,json,wxml 文件的代码提示
  • wxml 文件语法高亮

image.png blog.csdn.net/qq_44755683…

miniapp

  • 标签名与属性自动补全
  • 根据组件已有的属性,自动筛选出对应支持的属性集合
  • 属性值自动补全
  • 点击模板文件中的函数或属性跳转到 js/ts 定义的地方(纯 wxml 或 pug 文件才支持,vue 文件不完全支持)
  • 样式名自动补全(纯 wxml 或 pug 文件才支持,vue 文件不完全支持)
  • 在 vue 模板文件中也能自动补全,同时支持 pug 语言
  • 支持 link(纯 wxml 或 pug 文件才支持,vue 文件不支持)
  • 自定义组件自动补全(纯 wxml 文件才支持,vue 或 pug 文件不支持)
  • 模板文件中 js 变量高亮(纯 wxml 或 pug 文件才支持,vue 文件不支持)
  • 内置 snippets
  • 支持 emmet 写法
  • wxml 格式化

image.png

vscode weapp api

键入关键词 wx,就会出现提示,然后回车。关键词不区分大小写。

image.png

vscode wxml

wxml语法智能提示

image.png

结语

往期好文推荐「我不推荐下,大家可能就错过了某某牛逼xxx啦!!!(嘎嘎~)😄」