纳尼？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的插件文档就是不很全面，开放出来的API比较少，不过良心所在，文档明确告知Cloud Studio 的编辑器部分使用微软开源的 [Monaco Editor](https://github.com/Microsoft/monaco-editor)，这也是 Visual Studio Code 的核心编辑器，通过 editor 模块的相关 API 获取到编辑器的实例,也就是说可以参照VS Code的插件开发，编辑器这一层的API大部分是通用的。
Just Do It
前辈说：“看一百遍。不如动手写一遍”，在编程的学习过程中，“就是干！”很适合我这种老菜鸟，回顾不长不短的职业生涯，之所以还是菜鸟，归结到底就是动手太少了，文档、视频课看了不少，实操太少了，导致看过的基本忘却，以一个典型的反面教材，告诫2019年即将踏入编码界的新同学们，2019年“就是干”，多撸代码少看片。废话又说了一大堆，先根据官方文档撸个[HelloWorld]
环境准备
虽然说，Cloud Studio最大的特色是可以在浏览器中完成开发工作，但起码，您得有个浏览器环境吧，对于前端来说，Chrome 可能是使用最多的。然后得拥有Cloud Studio账号，由于刚对接到腾讯云的缘故，注册账号到新建工作空间这一块是有个巨坑的，首先是微信授权后各种跳转(自动跳转)，然后是要求先改用户名(又是各种跳转)，再然后是认证之类的，反正相当于您得先有一个腾讯云的账号用来存放代码，最后一步也是有坑的，新建的工作空间已经生成了git仓库但就是没同步过来，经过一番删cookie之类的操作之后，终于能开始书写第一个Cloud Studio插件了！
初始化
新建一个插件的时候，工具会新建一个基础环境(Node.js，版本 v8.12.0)和基础代码文件,各个文件具体可以看看文档，都有详细说明，当然这些文件是可以在腾讯云开发者平台里面找到的,并且可以通过git下载到本地，虽然本地不方便调试插件，但是本地开发符合产品开发流程，在没网或弱网的时候不会出现文件保存失败或缺失的情况(在线编辑器都有点小毛病，尽管用了大量的缓存技术)，另外也方便协同开发。
新建的这个初始化环境和代码是可以直接跑起来的，代码是用的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
// 引入插件开发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文件，通过快捷方式输出相应的代码块，代码片段的插件都可以使用这种方式来开发。
源码开发
- snippets.json:
通过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
yarnyarn 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.
`
- 点击右侧插件开发可加载当前插件并进行调试
我这里提示警告是因为这个pluginKey的插件已经存在
-
点击右侧插件开发可加载当前插件并进行调试
插件编写完成后先将代码push到git仓库，然后在插件开发这个选项卡点击发布插件可跳转到发布界面
` git add . git commit -m 'push' git push `请一定要将你您的代码 push 到远端仓库，再发布插件
最后就静静的等待审核！
期待能在插件市场"吃到您的放心菜"!
后记
开发一个CS插件并不难，难就难在怎样开发一个高质量的CS插件，一是方便自己，二是普惠大众。通过对Cloud Studio 的使用，以及对Cloud studio 插件开发的尝试，我对“就是干”的学习格言又有了新的认识，如果没有尝试，可能我会觉得开发插件是件多么难的事情，可能还会导致我不敢去尝试接下来会遇到的一些新框架、新工具。唯一不变的也许只有不变，短短几年时间，感觉jQuery是远古时代的神兽了，而三大主流框架以及各种层出不穷的新框架、新工具、思想，逼迫我们不得不学，“不进而退”，不存在“学不动”，“学不动”只会被淘汰。最后，向xabikos以及其他开发者致歉，对我“写”React Snippets这个Cloud Studio 插件的剽窃行为致歉。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。