CODEWITHSUNDEEP
javascriptautocompletesyntax-highlightingcode-completionace-editor
gavanon
gavanon

Reputation: 1367

Advanced autocomplete in ACE Editor

I'm looking to add sophisticated code completion to the ACE editor.

For example, if I typed the following JavaScript into ACE...

function Car() {}

Car.prototype = {
    model : '',
    maxSpeed : 0
};

var bugatti = new Car();
bugatti.

... upon hitting the dot after bugatti, the options "model" and "maxSpeed" would appear.

I know ACE has the new "enableBasicAutocompletion" feature, but this seems very lacking. I'm hoping to have autocomplete based on the code typed into the ACE editor, and appears by simply hitting the . key. The autocomplete suggestions would be the properties for that object.

The closest thing I can find is in this YouTube video: http://youtu.be/CSEDIhT6bXU

At 1:45, you can see the autocomplete is based on the user's JavaScript, but there's no demo or explanation of how this was accomplished.

Upvotes: 7

Views: 5190

Answers (2)

Doug
Doug

Reputation: 15513

The TernJS project is what you are looking for.

Here's an example integration with ACE.

Upvotes: 4

mesosteros
mesosteros

Reputation: 1519

Yup its part of Ace nowadays. Although I did not find it documented in the API but rather through a hard net search: Add the ace/ext-language_tools.js to your html. The dot form does not work well yet, so you may have to enter ctrl-space or alt-space for that (although if you write a bit of the property/method you want to call it should show), but standard syntax stuff such as writting function, will now show. Then in your js:

var editor = ace.edit("editor");

ace.require("ace/ext/language_tools");
editor.setOptions({
    enableBasicAutocompletion: true,
    enableSnippets: true,
    enableLiveAutocompletion: true
});

Upvotes: 3

Related Questions