How to add a file extension to the list of extensions supported by Adobe Brackets?

Question

I’m using the files with html extension.echo in my WEB project and I am trying to edit in Adobe Brackets, but I cannot specify that it should treat these files as HTML sources. I would like Brackets to provide me with typical HTML file features (like coloring the source, identifying the tags in the grammar, etc.)

Actually I noticed that this is possible when changing the file Languages.json, however I am using the binary version and did not build from sources.

https://github.com/adobe/brackets/blob/master/src/language/languages.json

I would just like to change some Brackets property or configuration file to be able to edit my .html.eco files so that it understands that it is about. mime-type text/html

Answer 1

It’s not exactly what I expected but I found that I can create a simple extension for Brackets as follows:

main file.js

define(function (require, exports, module) {
    var LanguageManager = brackets.getModule("language/LanguageManager");
    var language = LanguageManager.getLanguage("html");
    language.addFileExtension("html.eco");
});

In Brackets, use menu: Help > Show Extensions Folder

Create a new printer under user, and put there the main.js file

Mo MAC OS X this directory is ~/Library/Application Support/Brackets/extensions

Restart the Brackets

To make it easier I created this trivial extension and made it available on GITHUB. To install do the following:

1. Select the menu item *File > Extension Manager... / Install from URL... * in the Brackets
2. Fill in the URL field with https://github.com/joao-parana/add-file-extension and click the button Install

The extension is automatically enabled.

I hope it helps the guys. I believe that this functionality is implemented in Brackets in a future version because it would be a simpler solution for those who just want to install and use Brackets.

Answer 2

1. Open the file: Brackets\www\editor\EditorUtils.js

2. Add the corresponding extension within the switch (ext)

For example:

 switch (ext) {
    ...
    case "eco":
        return "htmlmixed";
    ...

Source: http://zsitro.com/how-to-extend-adobe-brackets-language-support-based-on-file-extension/

---

Searching further, I found the language settings supported in language/languages.json in the current Brackets code:

"html": {
    "name": "HTML",
    "mode": ["htmlmixed", "text/x-brackets-html"],
    "fileExtensions": ["html", "htm", "shtm", "shtml", "xhtml", "cfm", "cfml", "cfc", "dhtml", "xht", "tpl", "twig", "hbs", "handlebars", "kit", "jsp", "aspx", "asp", "master","cshtml","vbhtml"],
    "blockComment": ["<!--", "-->"]
},

And through the LanguageManager we can add a new extension to the list, dynamically:

var language = LanguageManager.getLanguage('html');
LanguageManager.addFileExtension('eco');

It still remains to know now where exactly to make this code run - if you need a "plugin" just for this (avoiding build of fonts), or if otherwise.