How to set ACE editor mode according to the file extension of a file

Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Without any doubt, ACE is the favorite code editor written in Javascript of many developers that want to provide the hability to edit code files on the fly on their applications. A very usual thing that you'll need to do, when someone selects a file for being loaded in ACE, is that you need to enable the correct mode to provide a better user experience (error checking, highlight etc).

However, this task won't be done alone as ACE will not analyze the code to check the programming language of the providen text. In this article, you'll learn how to set the mode automatically

Implementation

The following implementation would work well, in case you don't want to use the built-in module that make the things easier, to achieve this task:

function autoImplementedMode(filename){
    var ext = filename.split('.').pop();
    var prefix = "ace/mode/";

    if(!ext){
        return prefix + "text";
    }

    /**
     *  Functional, but inefficient if you want to write it by yourself ....
     */
    switch (ext) {
        case "js":
        return prefix + "javascript";
        case "cs":
        return prefix + "csharp";
        case "php":
        return prefix + "php";
        case "rb":
        return prefix + "ruby";
    }
}


var filename = "myfile.js";
// In this case "ace/mode/javascript"
var mode = autoImplementedMode(filename);
editor.getSession().setMode(mode);

However, you'll need to create a huge list in order to cover all the possible extensions and programming languages (in case you really want to implement this by yourself, you can check the source code of the ext-modelist file in Github to retrieve a complete list of extensions). So, what's the properly (and easy) way to do it? Just use the modelist extension of ACE editor that has already written all the possible file extensions and mode for ACE and you're ready to go.

The modelist.js file is normally located in src/ext-modelist.js, so you'll need to add it with a script tag in your document:

<script src="./ace/src/ext-modelist.js"></script>

And then you'll be able to require it using require("ace/ext/modelist") or ace.require("ace/ext/modelist") according to the version of ACE that you're using:

/**
 * Returns the correct mode for ace editor according to the file extension of a filename.
 * 
 * @param path {String} filename or extension (.js, .txt)
 */
function getModeByFileExtension(path){
    var modelist = ace.require("ace/ext/modelist");
    return modelist.getModeForPath(path).mode;
}


var filename = "myfile.js";
// In this case "ace/mode/javascript"
var mode = getModeByFileExtension(filename);
editor.getSession().setMode(mode);

If the previously snippet isn't enough for you, then see the source code of a demo using the modelist extension here in Github. Happy coding !