Cloudide plug-in in hand, don’t worry about getting off work on time

Time:2021-10-13

Summary:Take you through the plug-in mechanism to extend the cloudide to the functions you want. Watching videos, playing games and chatting in the cloudide can be easily realized through our plug-ins, so that the production tools are no longer boring and the development work is colorful.

It has been more than half a year since Huawei cloud ide was launched in HDC in March. The integrated development environment running on the web page has brought a new development experience. As a developer, after working on the cloud IDE for a period of time, do you want to add some different functions to your working environment? The next tutorial will take you through the plug-in mechanism to extend the cloudide to the functions you want. Watching videos, playing games and chatting in the cloudide can be easily realized through our plug-ins, so that the production tools are no longer boring and the development work is colorful.

If you have a good idea, you can also turn it into a plug-in and share it with the plug-in market, so that other developers can experience it together and help you improve. Next, let’s enter the actual combat of cloudide plug-in development.

1、 Create the first cloud ide plug-in

Cloudide plug-in in hand, don't worry about getting off work on time

The plug-in development of Huawei cloud ide can be completely carried out on the cloud ide without installing any software locally, so in the first step, we can first apply for an instance of cloud ide as our development environment (readers who don’t want to read the text can directly refer to the dynamic diagram for environment creation).

adopthttps://ide.huaweicloud.com Into, click “experience now” to enter the console. As an instance of the development environment, we need to permanently save our plug-in code and development environment configuration. Click “new instance” to create a permanent instance.

Because node.js is required for plug-in development, our technology stack can select “all in one” or “node. JS”, and click next,

Cloudide plug-in in hand, don't worry about getting off work on time

In the project configuration, we choose not to create a project. Currently, cloudide supports creating projects in IDE instances, and there is no need to import code by importing sample projects. Click OK to complete the creation of a cloudide instance. After successful creation, it will automatically start and enter the instance.

Cloudide plug-in in hand, don't worry about getting off work on time

After entering the instance, we can start to create the plug-in project, which is divided into the following steps:

Cloudide plug-in in hand, don't worry about getting off work on time

  • 1) Click file – > new project to open the new project page.
  • 2) Select the plugin project type to create a plug-in project.
  • 3) Fill in the relevant information of the plug-in, and explain the meaning and function of each option one by one here

Type:Select the type of plug-in you want to create.

⇨ Generic:A general plug-in project with front and back ends. The front end can support HTML or template writing, which is suitable for plug-ins that need a highly customized interface;

⇨ Backend:The project itself does not have a front-end page. You need to use the existing interface extension points of the cloud ide to implement the front-end.

Path:Select the path where the plug-in project needs to be stored.

Name:The name of the plug-in and the directory of the plug-in project.

Publisher:The plug-in publisher automatically obtains the Huawei cloud account name by default.

Author:The plug-in author automatically obtains the Huawei cloud account name by default.

License:Select the license option of the plug-in project source code. MIT and BSD are supported by default. You can automatically generate a license declaration. If you customize other licenses, you need to supplement the declaration yourself.

Version:The first version number of the plug-in. It is recommended to use the version format of 0.0.1.

Description:Detailed description of the plug-in.

Engine:The template engine needed to render HTML.

Git-Init:Whether to initialize the new project as a git warehouse.

  • 4) Click “create” to create a new plug-in project.

2、 Plug in packaging and installation

Cloudide plug-in in hand, don't worry about getting off work on time

Plug in projects can be packaged by executing NPM run pack. At present, there are two ways to execute this command

Mode 1:

Cloudide plug-in in hand, don't worry about getting off work on time

  1. Right click the pack command in NPM scripts in Explorer.
  2. Select run to perform packaging
  3. After running, you can see the packaged plug-in installation package ending in ‘. Cloudide’ in the root directory of the project

Mode 2:

Cloudide plug-in in hand, don't worry about getting off work on time

  1. Click termianl – > new terminal to create a new termianl
  2. Enter ‘NPM run pack’ on the command line to execute packaging
  3. After running, you can see the packaged plug-in installation package ending in ‘. Cloudide’ in the root directory of the project

3、 Test plug-in effect

Cloudide plug-in in hand, don't worry about getting off work on time

The packaged plug-in installation package can be installed directly through the right-click menu. Right click the packaged ‘. Cloudide’ plug-in package and select ‘install plugin’. The plug-in will be activated automatically after installation.

This article is shared from Huawei cloud community “actual cloudide plug-in development – get started quickly”, original author: Claude love first.

Click focus to learn about Huawei cloud’s new technologies for the first time~