[EXTENSIONS] Introduction

Welcome!

Welcome to the mini-wiki on creating your own extension in CodeMotion for beginners! On this page, you’ll find a brief introduction to creating your own extensions for the CodeMotion IDE.

Note

You won’t be able to publish them officially just yet, as we don’t currently have a distribution service for this. Similarly, the extensions are still in the early stages, just like the IDE itself. Please report any issues you encounter with them in the Issues section.

Important

Before working with extensions, go to Tools -> Appearance. Locate “Developer mode” and enable it. Once you've done that, the Debugger Window will become available, displaying all extension logs.

Let's start by looking at how to properly create and track your extension. First, navigate to the project folder (root) and create an "extensions" folder there:

Next, you don’t need to enter your extension’s name anywhere—you just need to create a folder with the name of your extension (e.g., my-cool-extension). After that, create a package.json file inside it—this will serve as your extension’s IDE configuration

Minimum contents of package.json

{
    "name": "my-cool-extension",
    "displayName": "My cool extension",
    "description": "This is my personal cool extension for CodeMotion IDE!",
    "version": "1.0",
    "main": "index",
    "icon": "icon.png",
    "permissions": [
        "events.onFileOpened"
     ],

    "activeOn": [
        "load"
     ]
}

Breakdown of each line:

• name: ID of your extension
• displayName: This name will appear in the list of extensions
• description: This description will appear in the list of extensions
• version: Extension version
• main: Refers to the full path to the .js file inside the extension folder
• icon: accepts only PNG/SVG files
• permissions: Permissions that the extension can use to extend its functionality. Each feature requires specific permissions, and the debugger window indicates which permissions the extension uses.
• activeOn: A list of conditions under which the extension will be activated. See here for the full list of conditions

THAT'S IT! You've created your own extension from scratch. Now, if you've done everything correctly and included this minimal example in your main, you'll see the result in the debugger window:

console.log(`Hello from ${app.name}!`)