Writing a custom mode for CodeMirror, for use in Brackets

Question

I am trying to write a plugin/extension for Brackets that will handle PowerShell. Well after looking into it, I found that CodeMirror also doesn't have a PowerShell mode, so I need to create it myself. I am having a terrible time because there are hardly any detailed resources online for what I am trying to do.

This is my main.js file:

    define(function (require, exports, module){
        "use strict";


        //Load Modules
        var LanguageManager = brackets.getModule("language/LanguageManager"),
            CodeMirror = brackets.getModule("thirdparty/CodeMirror2/lib/codemirror"),
            PowerShellMode = require("powershell.js");


        //Define the Language
        LanguageManager.defineLanguage("powershell", {
        name: "PowerShell",
        mode: "powershell",
        fileExtensions: ["ps1"],
        lineComment: ["\/\/"]
        });



        function log(s) {
            console.log("[PS-DevKit] " +s);
        }

        log("PowerShell module loaded!");


    });

This is my powershell.js file:

//CodeMirror Example
CodeMirror.defineMode("powershell", function() {

    return{
        startStat: function() {return {inString: false};},
        token: function(stream, state){
            //If a string starts here
            if (!state.inString && stream.peek() == '"'){
                stream.next();              //Skip quote
                state.inString = true;      //Update state
            }

            if (state.inString) {

                if (stream.skipTo('"')){    //Quote found on this line
                    stream.next();          //Skip quote
                    state.inString=false;   //Clear flag
                } else {
                    stream.skipToEnd();     //Rest of line is string
                }

                return "red-text";            //Token style

            } else {

                stream.skipTo('"') || stream.skipToEnd();
                return null;                //Unstyled token

            }   
        }  
    };    
});

When running Brackets with this code as is, I get an error (developer console) that it could not load my powershell.js file from "Program Files(x86)\Brackets\www". So I tried putting in the exact path to where the file is (the Bracket extensions folder sitting in my User directory), and it worked but I get the following message:

Use brackets.getModule("thirdparty/CodeMirror2/lib/codemirror") instead of global CodeMirror.
    at Object.defineProperty.get (/brackets.js:115:32)
    at file:///C:/Users/MY_USERNAME/AppData/Roaming/Brackets/extensions/user/PS-DevKit/powershell.js:2:1 

Any input? Right now, all I am trying to do is get it to load and change any text in quotes to red. Even though I get the deprecation warning about needing to use the CodeMirror module, the extension does load, and if I create a ".ps1" file, it recognizes that it is PowerShell.

Answer 1

General answer - there actually are some fairly detailed resources for this:

• Writing a CodeMirror mode
• Defining a new language in Brackets - see the subsection "Custom CodeMirror modes" for how to load your new CodeMirror mode

Specific answer - I can spot a few issues in your sample code that will definitely cause problems:

1. Use require("powershell") without the .js -- this is the format JS module loaders expect
2. powershell.js should contain the same define(...) wrapper as your main.js. And it should use brackets.getModule() to get a reference to CodeMirror, same as main.js. (Using JSLint, which is built into Brackets, is helpful for warning you when you reference globals that you have forgotten to explicitly load as module dependencies).
3. Your CM mode has a typo: startStat -> startState
4. You need to call CodeMirror.defineMode() before calling LanguageManager.defineLanguage() - see "Custom CodeMirror modes" docs linked above. You could either do this in your powershell.js module, or early in main.js.