阅读 463

2019年如何撸一个Cloud Studio插件?

纳尼?2019年?其实一开始我的内心是拒绝的,一转眼就到了2018年的尾声,再不写个【2019年】的标题定好文章的保质期,感觉刚写这篇文章就要过期了!然而,回顾2018年,每每想起2018年的收获,我的内心是奔溃的,又是一无所获的一年悄然虚度;看着镜子里头发和技术一样稀疏的自己,我也只能认命接受--“少壮不努力,老大偷代码”……废话写了一大堆,下面,咳咳,下面进入正题吧:

什么是CS?

当我问公司前端组的同事玩不玩CS的时候,他一脸懵逼地反问你是说“CF”吗,我忘了这些年轻人可能都没玩过“反恐精英(Counter-Strike)”,随后给他们丢了一个链接--Cloud Studio。Cloud Studio,是2018年4月上线的一款基于浏览器的集成式开发环境(IDE),开发者可以在 Cloud Studio 中创建工作空间来存放自己的项目代码,安装所需要的环境,以及运行、编译自己的项目,实现了“打开浏览器 就能写代码”。最新的Cloud Studio已升级至腾讯云开发者平台中,并提供了一个永不间断的云端工作站,也就意味着在Cloud Studio新建的项目可直接托管在腾讯云开发者平台,还有强大的插件系统、一键切换开发环境、一键切换开发环境、全功能终端以及实时进度保存等特色功能。本文主要讲如何“Copy”出一个自定义的插件实现个性化需求。

什么是Cloud Studio Plugins

Cloud Studio Plugins是Cloud Studio这个IDE的可自定义开发的插件系统,您也许用过其他IDE的拓展功能,Cloud Studio 也开放了这个拓展功能--插件系统,通过插件您可以自定义自己的工作空间,提升使用效率,您也可以前往插件市场安装自己喜欢的插件,甚至还可以开发一款自己喜欢的插件,给所有用户使用。由于Cloud Studio基于 Monaco Editor 以及 React ,在插件的开发过程中能看到VS Code的影子,或者涉及到一些用React写的功能。

  • 插件市场 插件市场可以理解为菜市场,菜市场里有各种类型的菜,这些菜吃了都会有一定的效果,比喻写代码更顺手,当然也有些可能有毒,比如把您变成矿机、盗取您的比特币。为了避免被毒害,我们自己也可以成为菜农实现自给自足。CS的插件市场目前分为Git 功能增强、Git UI 增强、编辑器功能增强、编辑器 UI 增强、代码片段、语法高亮、快捷键、编辑器预览视图、文件图标主题、娱乐小工具、信息栏显示内容、腾讯云接口、第三方 API、实用类小工具,总的一点就是实用的和好玩的。

    Cloud Studio插件市场

  • 开发文档 对于我这种老菜鸟来说,上手一个新技术、新工具,最快的捷径就是先把相关技术的文档过一遍,不过有些时候,文档也不是万能的,比如文档不详细,这个时候就只有自己多用多思考多尝试。Cloud Studio的插件文档就是不很全面,开放出来的API比较少,不过良心所在,文档明确告知Cloud Studio 的编辑器部分使用微软开源的 [Monaco Editor](https://github.com/Microsoft/monaco-editor),这也是 Visual Studio Code 的核心编辑器,通过 editor 模块的相关 API 获取到编辑器的实例,也就是说可以参照VS Code的插件开发,编辑器这一层的API大部分是通用的。

    Cloud Studio Plugins 开发文档

Just Do It

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

环境准备

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

Cloud Studio Start

初始化

新建一个插件的时候,工具会新建一个基础环境(Node.js,版本 v8.12.0)和基础代码文件,各个文件具体可以看看文档,都有详细说明,当然这些文件是可以在腾讯云开发者平台里面找到的,并且可以通过git下载到本地,虽然本地不方便调试插件,但是本地开发符合产品开发流程,在没网或弱网的时候不会出现文件保存失败或缺失的情况(在线编辑器都有点小毛病,尽管用了大量的缓存技术),另外也方便协同开发。

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,比如我遇到的:

Cloud Studio typescript 报错
解决:忽略test目录
修改 typescript.json

Hello CloudStudio 源码浅析

● src/index.tsx

    // 引入插件开发sdk(https://github.com/Coding/WebIDE-Plugin-SDK)
    import Manager from 'webide-plugin-sdk/Manager';
    // 引入React
    import * as React from 'react';
    // 引入相关API的类和函数
    import { actions, PluginContext, appRegistry } from 'cloudstudio';
    // 初始化插件上下文
    const context = new PluginContext({});
    
    // 插件唯一 key
    // 一定要确保代码中 pluginKey 的唯一性,推荐使用「开发者邮箱-昵称-插件名」的格式
    const pluginKey = 'hello-widget-plugin';
    // 界面引入、卸载插件
    const { position, inject, unregister } = context.injectComponent;
    // Hello组件
    class Hello extends React.Component {
        // 弹出一个 Hello CloudStudio! 通知
        handleClick = () => {
            actions.notification({ message: 'Hello CloudStudio!', notifyType: 'INFO' });
        }
        // 渲染sayHello 按钮
        render() {
            return (
                <button onClick={this.handleClick}>sayHello</button>
            )
        }
    }
    
    class MyManager extends Manager {
        pluginWillMount() {
            // 状态栏注入组件
            inject(
                position.STATUSBAR.WIDGET,
                {
                    key: pluginKey,
                },
                extension => {
                    return React.createElement(extension.app);
                }
            )
        }
    
        pluginWillUnmount() {
            // 卸载组件
            unregister({ key: pluginKey, app: Hello, position: position.STATUSBAR.WIDGET });
        }
    }
    
    // 注册插件
    appRegistry([{
        Manager: MyManager,
        key: pluginKey,
        app: Hello,
    }]);
复制代码

其实也没什么好说明的,无非就是一些常用的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插件了?结束了?不是说还可以把VS Code的插件拿过来用吗?)

复用VS Code插件实现CS插件

刚开始接触Cloud Studio的时候,有大佬就提出过把vscode的热门插件搬运过来,或者写个工具--插件转换器,刚好在入门React,本地的VS Code上常用Reactjs code snippets,索性直接搬过来"写"一个Cloud studio的React代码片段插件,于是就有了CS版的React Snippets(欢迎拍砖指正,☞点击安装)。 不难发现核心文件就是这个json文件,通过快捷方式输出相应的代码块,代码片段的插件都可以使用这种方式来开发。

React Snippets

源码开发

  • snippets.json:

    React Snippets
    通过format.js对json进行格式化处理,并输出:

      //snippets.json format
      const fs = require('fs')
      
      const files = fs.readdirSync('/home/coding/workspace/src/snippets')
      for(var i = 0; i < files.length; i++) {
          justFormat(files[i])
      }
      
      function justFormat (file) {
          var before = fs.readFileSync(`/home/coding/workspace/src/snippets/${file}`, 'utf8')
          before = JSON.parse(before)
      
          var after = []
          for (var k in before) {
              after.push({
                  "label": before[k]['prefix'],
                  "insertText": {
                      "value": (() => {
                          const body = before[k]['body']
                          let str = ''
                          for(var i = 0; i < body.length; i++) {
                              str += `${body[i]}`
                          }
                          return str
                      })()
                  },
                  "documentation": before[k]['description']
              })
          }
          // console.log(before, after)
          fs.writeFileSync(`/home/coding/workspace/src/${file}`, JSON.stringify(after))
          console.log('success: ', file)
      }
    复制代码

index.jsx注册插件:

import Manager from 'webide-plugin-sdk/Manager';
import { actions, PluginContext, appRegistry, editor} from 'cloudstudio';
import reactSnippets from './snippets.json';

const context = new PluginContext({});

// 插件唯一 key
// 一定要确保代码中 pluginKey 的唯一性,推荐使用「开发者邮箱-昵称-插件名」的格式
const pluginKey = 'huqi@fashaoge.com-huqi-reactSnippets';

const { position, inject, unregister } = context.injectComponent;

class MyManager extends Manager {
    pluginWillMount() {
         editor.registerCodeSnippetsProvider(['javascript', 'typescript'], reactSnippets);
    }

    pluginWillUnmount() {
        // 卸载组件
        unregister({ key: pluginKey,  position: position.STATUSBAR.WIDGET });
    }
}

appRegistry([{
    Manager: MyManager,
    key: pluginKey
}]);
复制代码

至此,一个Cloud Studio 的React代码片段的插件源码开发部分就完成了

插件调试与发布

调试是确保程序能正常预期运行,Cloud Studio的插件文档提出了两种调试方法,我愚笨,第二种硬是没找到入口,当然,第一种已经满足了,只是有些莫名其妙的bug,调试过程中弹窗可能不会执行。

  • 执行yarn 和 yarn start yarn yarn start 如果没有错误就直接显示Success ` ➜ workspace git:(master) yarn start yarn run v1.12.3 coding-ide start(pwd)

Compiling

✔ success cloudstudio-plugin-sdk compiled in 2s 243ms Time: 2248ms chunk {0} index.js (main) 15.3 kB [entry] [rendered] webpack: Compiled successfully. `

  • 点击右侧插件开发可加载当前插件并进行调试

    React Snippets
    我这里提示警告是因为这个pluginKey的插件已经存在

  • 点击右侧插件开发可加载当前插件并进行调试

    插件编写完成后先将代码push到git仓库,然后在插件开发这个选项卡点击发布插件可跳转到发布界面

      `
      git add .
      git commit -m 'push'
      git push
      `
    复制代码

    请一定要将你您的代码 push 到远端仓库,再发布插件

    React Snippets

最后就静静的等待审核!

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

后记

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

关注下面的标签,发现更多相似文章
评论