Visual Studio Code 图床工具插件你值得拥有

20190307194339.jpg

vscode简介

Visual Studio Code(以下简称vscode)微软发布的一款开源免费跨平台的轻量且强大的代码编辑器,支持Windows,OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统,可通过安装插件来支持C++、C#、Python、Java、PHP等其他语言。不得不说vscode是一款良心之作。

相信很多程序员同学已经在工作中使用这个工具了,博主也是一样在工作中做些前端界面开发、静态博客书写都用vscode,完善的插件生态支持,乃神器也~~

vscode官网下载地址: https://code.visualstudio.com/ 根据自己的系统版本选择下载相应的安装包,具体安装这里不做过多介绍,也挺简单,今天主要介绍它的一款图床插件:PicGo

PicGo介绍

PicGo基于electron-vue开发,支持macOS,Windows,Linux 支持插件系统,让PicGo更强大 Github项目地址:https://github.com/Molunerfinn/PicGo
PicGo目前支持了

  • 微博图床 v1.0
  • 七牛图床 v1.0
  • 腾讯云COS v4\v5版本 v1.1 & v1.5.0
  • 又拍云 v1.2.0
  • GitHub v1.5.0
  • SM.MS v1.5.1
  • 阿里云OSS v1.6.0
  • Imgur v1.6.0
    PicGo本身可以作为一款应用安装在我们的电脑上,上传图片获取外链,我们可以选择将图片上传至微博云、七牛云等,配置简单使用方便。

vs-picgo插件

有了PicGo图片上传获取外链已经很方便了,如何更优雅的使用vscode书写markdown, 大神@Spades-S基于PicGo开发的:https://github.com/Spades-S/vs-picgo A vscode plugin for PicGo 当你用过一次,你真的会爱上她O(∩_∩)O哈哈~ 看下面它的项目介绍:

在 VSCode 里使用 picgo,实现快速上传图片到远端图床并直接将 URL 写进 Markdown 文件里,极大提升 Markdown 贴图效率与体验。支持 PicGo 原生自带的 8 种图床。

  • 截图上传

  • 文件管理器选择上传

  • 输入文件路径上传

vscode中安装vs-picgo插件

当然根据上面的github项目介绍,你应该完全可以配置并使用这个工具,极大的提示贴图的效率与体验了,但是本着文章完整性的原则,这里将插件的安装使用配置做个说明:

1、打开vscode 点击左侧插件(Extensions)菜单,点击搜索 picgo 回车,点击install安装并重新加载,我这边已经安装过了,如下:

20190314220710.png

2、安装完成后,其实你已经可以在.md文件中优雅的贴图了,默认vs-picgo上传至smms图床上。
KeyMap

You can change all the keymaps below as you wish.

Uploading an image from clipboard
Windows/Unix: Ctrl + Alt + u
OsX: Cmd + Opt + u

Uploading images from explorer
Windows/Unix: Ctrl + Alt + e
OsX: Cmd + Opt + e

Uploading an image from input box
Windows/Unix: Ctrl + Alt + o
OsX: Cmd + Opt + 0

3、配置七牛图床,在七牛官网注册获取:accessKey、secretKey,不过多介绍,官方有说明文档,这里主要记录下vscode usersetting.

20190314221833.png

4、选择usersettng –> Files –> Edit in setting.json
20190314221952.png

5、将默认的picgo修改为qiniu配置并保存,这样上传的图片就提交至七牛图床了
20190314222230.png

更多的图床支持,上面vs-picgo项目中均有说明,so 嗨,妈妈再也不用担心我的贴图~~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
{
"picgo": {
"path": "path to your external configure file" // default value is "", which means use "picBed" info below. External configure file should be a JSON file containing all the "picBed" info below.
},
"picBed": {
"current": "smms", // current image hosting, default value is "smms"
"weibo":{ // weibo image hosting
"chooseCookie": true | false,
"username": "",
"password": "",
"quality": "thumbnail" | "mw690" | "large",
"cookie": ""
},
"qiniu": { // qiniu image hosting
"accessKey": "",
"secretKey": "",
"bucket": "",
"url": "",
"area": "", // "z0" -> 华东, "z1" -> 华北, "z2" -> 华南, "na0" -> 北美, "as0" -> 东南亚
"options": "" // prefix of url
"path":"" // postfix of path
},
"upyun": { // upyun image hosting
"bucket": "",
"operator": "",
"password": "",
"options": "",
"path": "",
"url": ""
},
"tcyun": { // tcyun image hosting
"secretId": "",
"secretKey": "",
"bucket": "",
"appId": "",
"area": "",
"path": "",
"customUrl": "",
"version": "v5" | "v4"
},
"github": { // github image hosting
"repo": "",
"token": "",
"path": "",
"customUrl": "",
"branch": "",
"username": ""
},
"aliyun": { // aliyun image hosting
"accessKeyId": "",
"accessKeySecret": "",
"bucket": "",
"area": "",
"path": "",
"customUrl": ""
}
}
}
-------------本文结束感谢您的阅读-------------
Alex.Yao wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!