My Brackets just got Meteor autosuggest

Updated: 17th of November 2015 after tweet from Brandon Howard

I am playing around with the all javascript full stack project Meteor. It is a very cool project offering you the chance to do all you work in javascript and also giving you some very unique and cool features. If you still have not tried it you should go check it out at https://www.meteor.com/.

 

 

Don’t be blind in your editor – autosuggest is your eyes

Discovering a new API, a new language or a new platform gives you many new features. It’s a new “room” and at first the light is turned off or dimmed. You know that feeling: you cannot see whats inside the room, so trying to walk around the new room will give an unsafe feeling where you stumble into things and can’t find the nice things inside the room.

The editor in question here is Adobe Brackets. It is a very cool extendable free editor running inside a Bootstrap, HTML, javascript, CSS, NodeJS environment. It has a lot of extensions, and writing your own is easy. I did one: Dynamicwebtags, which I wrote using HTML, CSS and javascript!

That is the base, when I do web work, but there is no Meteor extension…

What about Meteor autosuggest? No extension exists…

Being a spoiled web developer I pressed the “Lego” button of Brackets to search for a Meteor extension – someone must have spend hours creating such a free perfect extension right? No sir!
For a split second I was thinking about returning to Sublime Text, bug hey – Google is still my friend! And so is Stack overflow. I found a entry on stack overflow.com which had the answer. Googling some more I put together this recipe to get Meteor autocomplete:

1) Install the Ternific
Extension in Brackets

You will need to install the extension “Ternific”, simply click the “Lego” icon and enter “Ternific” in the search field. It is a very cool extension, read about on Github.

2) Download the TernJS Meteor plug-in file: meteor.js.

TernJS can be extended. Using plug-ins you can get autocomplete/hinting for further APIs and languages.
You should download the meteor.js file from the tern-meteor Github project.

A direct link to the raw file is here.

 

3) Copy the meteor.js file to …/ternific/node_modules/tern/plugin/…

The meteor.js file should be copied into this folder like this:

/Users/YOUR-USER/Library/Application Support/Brackets/extensions/user/ternific/node_modules/tern/plugin/meteor.js

Where “your-user” is of cause you username.

 

4) Update the .tern-project file

We need to edit the file “.tern-project” so that it supports meteor autosuggest. On the GitHub project and in the readme.md file of the tern project it states that you can make a .tern-project file inside the plugin folder or you can simply change the default .tern-project file.

/Users/YOUR-USER/Library/Application Support/Brackets/extensions/user/ternific/.tern-project

I have changed the default file with success. It now looks like this:

{
  "libs": [
    "./libs/tern/defs/reserved",
    "./libs/tern/defs/lodash",
    "browser",
    "chai",
    "ecma5",
    "ecma6",
    "browser",
    "jquery"
  ],
  "loadEagerly": [],
  "async": true,
  "plugins": {
    "modules": {},
    "requirejs": {},
    "doc_comment": {},
    "es_modules": true,
    "meteor": {}
  }
}

Changing the global tern project JSON file is just the option I prefer. As described in the answer on Stack overflow mentioned above, you could also include it in each of your Meteor projects – up to you, I have not tried it.

Do a restart of Brackets and you are ready to go!

There you are! The editor will light up your coding room, for Meteor projects :-) You are no longer blind, and will now see features available in the world of Meteor. Happy coding!

US

Leave a Reply