前言
大家好,我是小阵 🔥,一路奔波不停的码字业务员
身为一个前端小菜鸟,总是有一个飞高飞远的梦想,因此,每点小成长,我都想要让它变得更有意义,为了自己,也为了更多值得的人
如果喜欢我的文章,可以关注 ➕ 点赞,与我一同成长吧~😋
加我微信:zzz886885,邀你进群,一起学习交流,摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了,他真的来了~
正文
经常使用vscode进行编程,用了好久,今天换电脑,新装的vscode在下载插件时忘记了之前用的顺手的几个,这里记录一下,顺便分享给大家,希望大家编程效率越来越高,编程习惯越来越好,编程方式越来越拉风!
温馨提示🚀:我知道有些小老弟上来就爱看「摸鱼」
插件。
先上目录:
📢 目录功能可能手机端支持度不够好哦,大家不要着急,往下扑灵扑灵的滑吧😁
推荐团队调试插件 Live Share
在线实时共享代码改动,可以手动设置【只读】、【读写】权限,方便控制代码安全;同时内置了聊天窗口,不用切屏聊天;分享者还可以跟随贡献者的视角查看他做了哪些改动;分享者也可以手动控制哪些文件允许贡献者访问,哪些被禁止,具体可以查看Live Share安全
更多
Live Share信息
查看 这里
必备基础插件
Chinese (Simplified) Language Pack for Visual Studio Code
中文插件
GitLens 开发必备git工具
包括但不限于以下功能:
- Revision Navigation
- Current Line Blame
- Git Code Lens
- Status Bar Blame
- File History view
- Changes diff
更多
GitLens
插件详情
vscode-icons
vscode的文件图标插件
Excel Viewer
阅览并编辑excel
Polacode-2020 帮助对项目代码进行截图
尤其是当你热衷于发技术博客的话,利用该插件进行代码截图可能会让界面看上去更加的优雅和谐。
Polacode截图 vscode cmd+p =》输入polacode即可以调出截图面板=》自由选择你的截图代码吧
各种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
语句块小括号、大括号处可以自定义样式,简单看清楚作用域
举一个简单配置的例子,在vscode
的settings.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 Snippets
、Simple React Snippets
,另新增一些常用js、ts语法的snippets
- 在
React
文件中
- 在
Vue
文件中
- 在
js/ts
文件中
- 在
json
文件中
ESLint
代码检查 规范代码必备
Code Runner
在vscode的控制台中运行代码 支持多种语言
以后再也不用新建html文件然后写script标签啦,当然也可以直接在浏览器控制台中书写js代码,如果你用习惯的话..
REST Client
可以代替postman在vscode中直接发起请求,请求头配置和参数设置也可以自定义
更多
REST Client
使用规则
open in browser 在浏览器中查看
VS Code没有提供直接在浏览器中运行程序的内置功能,所以我们需要安装此插件,在浏览器中查看我们的程序运行效果
Highlight Matching Tag 高亮显示匹配标签
这个插件自动帮我们将选中的匹配标签高亮显示,再也不用费劲查找了。
Image Preview 图片预览
鼠标移动到图片 url 上的时候,会自动显示图片的预览和图片尺寸。
Markdown All in One 编辑markdown实时预览+导出为html或者pdf
可以在vscode中实时编辑markdown文本并预览 也可以导出为html或者pdf
常用快捷键:
Ctrl/Cmd + Shift + V 预览markdown
Ctrl/Cmd + K V 打开新tab预览markdown
更多详情移步这里
Bookmarks 书签
当文件比较大的时候改代码,可能需要频繁跳转到多个地方进行改动代码,这个时候可以通过给不同的代码行添加标签来进行快速跳转;
涉及到的快捷键:
option+command+k 开/关书签
option+command+j 上一个书签
option+command+l 下一个书签
更多详情移步这里
vscode-syncing vscode配置可以在多台设备中通过该插件进行同步
目前vscode登陆账号之后已经可以自动实现同步插件的功能了
Regex Previewer 正则在线调试
实时测试正则表达式的实用工具。它可以将正则表达式模式应用在任何打开的文件上,并高亮所有的匹配项
摸鱼插件
小霸王
让你在vscode中玩儿小霸王游戏
更多
小霸王
详情信息
Thief-Book
摸鱼看书神器
更多
Thief-Book
使用规则
leetcode 进大厂必备
进大厂,必须刷题!这个插件直接在VSCode中刷LeetCode!
Zhihu On Vscode 知乎在线摸鱼
大家都说,知乎用户平均学历 985 ,是大牛云集地方,上班摸鱼怎么能不上知乎学习呢?
daily-anime 追番神器
韭菜盒子
看股票,看基金
电影集 看电影
VSC Netease Music 听音乐
live2D 各种二次元看板娘
🌈 Rainbow Fart 在你写代码的时候疯狂跟你发语音彩虹屁,支持各种语音包哦
小程序开发者必备
小程序开发助手
- 支持 js,json,wxml 文件的代码提示
- wxml 文件语法高亮
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 格式化
vscode weapp api
键入关键词 wx
,就会出现提示,然后回车。关键词不区分大小写。
vscode wxml
wxml语法智能提示
结语
往期好文推荐「我不推荐下,大家可能就错过了某某牛逼xxx
啦!!!(嘎嘎嘎~)😄」