2019年如何撸一个Cloud Stuido插件？

Just Do It

前辈说：“看一百遍。不如动手写一遍”，在编程的学习过程中，“就是干！”很适合我这种老菜鸟，回顾不长不短的职业生涯，之所以还是菜鸟，归结到底就是动手太少了，文档、视频课看了不少，实操太少了，导致看过的基本忘却，以一个典型的反面教材，告诫2019年即将踏入编码界的新同学们，2019年“就是干”，多撸代码少看片。废话又说了一大堆，先根据官方文档撸个[HelloWorld]

环境准备

虽然说，Cloud Studio最大的特色是可以在浏览器中完成开发工作，但起码，您得有个浏览器环境吧，对于前端来说，Chrome 可能是使用最多的。然后得拥有Cloud Studio账 ，由于刚对接到腾讯云的缘故，注册账 到新建工作空间这一块是有个巨坑的，首先是微信授权后各种跳转(自动跳转)，然后是要求先改用户名(又是各种跳转)，再然后是认证之类的，反正相当于您得先有一个腾讯云的账 用来存放代码，最后一步也是有坑的，新建的工作空间已经生成了git仓库但就是没同步过来，经过一番删cookie之类的操作之后，终于能开始书写第一个Cloud Studio插件了！

初始化

新建的这个初始化环境和代码是可以直接跑起来的，代码是用的React，写了一个底部状态栏的按钮，点击右侧可提示通知。按照工程化的思想，我们开发的代码一般写在src目录里边，其他的基本都是配置文件，虽然demo推荐使用React，但也不是必须的，我看插件市场有些大佬也是直接用的js，总之您自己玩得开心就行。

目录结构

│ .babelrc // bable配置文件│ .eslintrc // eslint配置文件│ .gitignore // git忽略配置文件│ .npmrc // npm配置文件│ cloudstudio.d.ts // CS配置文件│ cloudstudio.png // CS logo│ package.json // 包文件│ README.md // 您的插件文档│ tsconfig.json // ts配置│ ├─config // 自定义webpack│ webpack.dev.config.js│ webpack.production.config.js│ ├─src // 源码目录│ index.tsx│ └─typings monaco.d.ts // CS内核monaco配置

以上，一般的开发过程中，我们只需关注Scr目录和修改README.md文件，就是愉快的完成一个Cloud Studio的插件，大佬就随意修改啦，当然小白也有特殊情况：刚好您写了测试代码test目录，且下面包含.tsx文件，可能会遇到typescript 错，这时就需要修改typescript.json,比如我遇到的:

解决：忽略test目录

Hello CloudStudio 源码浅析

● src/index.tsx

其实也没什么好说明的，无非就是一些常用的API的使用，按照官方文档的规范来开发，能避免一些莫名其妙的bug。虽然这个dome只实现了点击弹出通知框，但还是实现了从0到1的过程，尽管如此，还是有些插件直接用的这个demo，一样的配方熟悉的味道(别中毒)，比如把弹出框的内容改成通过调用第三方api返回的数据，就成了一言这个插件:

handleClick = () => { axios.get('https://v1.hitokoto.cn/?encode=text') .then(res => {actions.notification({ message: res.data, notifyType: 'INFO' })})}

同样我也可以改成来个段子:

handleClick = () => { let message = "" axios.get("https://api.apiopen.top/getJoke?count=1&type=text") .then(function (response) { message = response.data.result[0].text; actions.notification({ message: message, notifyType: 'INFO' }); }) .catch(function (error) { actions.notification({ message: error, notifyType: 'INFO' }); });}

还可以是享受宁静:

handleClick = () => { audio_flag = !audio_flag; if(audio_flag) actions.notification({ message: '开始享受宁静吧!', notifyType: 'INFO' }) else actions.notification({ message: '贤者模式!', notifyType: 'INFO' }) audio.src = rain; audio.autoplay = !audio.autoplay; audio.addEventListener('timeupdate',function(){ var num = 1.4; if(this.currentTime > this.duration - num){ this.currentTime = 0; this.play(); } },false);}

是不是感觉Cloud Studio Plugins 乳此简单？

总之，多看文档，多写，多思考！

(呃，就写完一个CS插件了？结束了？不是说还可以把VSCode的插件拿过来用吗？)

复用VS Code插件实现CS插件

刚开始接触Cloud Studio的时候，有大佬就提出过 把vscode的热门插件搬运过来，或者写个工具–插件转换器，刚好在入门React，本地的VS Code上常用Reactjs code snippets,索性直接搬过来”写”一个Cloud studio的React代码片段插件，于是就有了CS版的React Snippets(欢迎拍砖指正)。

不难发现核心文件就是这个json文件，通过快捷方式输出相应的代码块，代码片段的插件都可以使用这种方式来开发。

源码开发

期待能在插件市场”吃到您的放心菜”!

后记

开发一个CS插件并不难，难就难在怎样开发一个高质量的CS插件，一是方便自己，二是普惠大众。通过对Cloud Studio 的使用，以及对Cloud studio 插件开发的尝试，我对“就是干”的学习格言又有了新的认识，如果没有尝试，可能我会觉得开发插件是件多么难的事情，可能还会导致我不敢去尝试接下来会遇到的一些新框架、新工具。唯一不变的也许只有不变，短短几年时间，感觉jQuery是远古时代的神兽了，而三大主流框架以及各种层出不穷的新框架、新工具、思想，逼迫我们不得不学，“不进而退”，不存在“学不动”，“学不动”只会被淘汰。最后，向xabikos以及其他开发者致歉，对我“写”React Snippets这个Cloud Studio 插件的剽窃行为致歉。