JavaScript completions

[csl_]

I literally created an account to thank you. This is brilliant, something I’ve needed for a while.

[agibsonsw]

Thank you very much csl_.

However, I wasn’t happy with my first version. It requires too much of a change in the way that I code. This is fine for JS, but is likely to be off-putting when switching to other languages. So I have spent many (many…) hours perfecting the (new) attached version. It behaves much more like typical auto-completion. To an extent it is just a word list, but also helps you to complete function arguments.

1. I’m not sure how it will play with CodeIntel, but perhaps there is an option for that package to disable it just for JS(?).
2. If you already have a JS completions file you might want to (temporarily) move it out of your JS folder, so you can try my version
3. You might want to tweak the “auto_complete_delay” property so that the list doesn’t appear too quickly.

The completion list shows details like “anchors // Document” to remind us which object it applies to;
If you chose the completion ‘alert()’, for example, and you haven’t already typed ‘something.’ it will automatically pre-pend ‘window’. Of course, if you don’t like this, then you can just ignore the completion.
If you type your variable name, then a ‘.’, and you’re not sure what methods/properties are available, then start to type the kind of object it is, as in ‘Area’ or ‘Image’. This should focus the list to specific items for this kind of object. Otherwise, you could start typing ‘Element’ for more general members. But, of course, you can just type a few letters from the method/property that you want to use.

All style properties are triggered by typing an underscore ‘_’. I did this to try to push them further down the completion list. However, you don’t have to type the underscore if you don’t want to

(End of part one.)
AndyJS2.zip (10.2 KB)

[agibsonsw]

I’ve made this list as comprehensive as I can. It should include most anything you’re likely to need, including all Canvas related features. (Start typing ‘Canvas’ to focus on these). But there are some omissions:

Some obscure event properties;
HTML5 features (other than Canvas);
Obsolete, and some deprecated, items;
CSS3 properties, and there might be a few missing from CSS 2.2(?);
Some obscure Node/DOM items;
Some browser specific, or not well-supported, features.

But I still have one or two concerns/ things I need to consider:
Local variable names might be pushed further down the list. I’m not sure how much of an issue this might be - if you’re typing within a function then you’re likely to be *happy *to type your variable name in full (or Ctrl-Space might help);
The list is quite long - 800+ lines. (But the PHP version has over 4000 lines!) If it proves to be too slow then it might require a little trimming.

But my main concern is this: because the tab-trigger includes help text - such as ‘maxLength // Password/Text’ - this means that there will be far more matches appearing in the list than I want. My thoughts are these:

Live with it, because of all the help that it provides!
Abbreviate all the object names in the help text, such as ‘Pwd’, ‘Txt’, ‘Doc’ etc. But this means you/me remembering the abbreviations. It might also mean that we end up with some unexpected matches;
Remove the help text altogether (and re-order the file) - a tough decision!
Try and compact object names; that is, put all specific items relevant to ‘Password/Text/TextArea’, etc., under the single heading ‘Input’. I could consider this, but it just makes the list less helpful, particularly to new coders.

Anyway, I will be very pleased to receive feedback and suggestions. In particular, if I’ve missed something obvious that should be in the list .

Regards, Andy.

[agibsonsw]

By the way, **loving **this Editor

I’ve only had it ten days, and I’ve learnt about Snippets, completions, JSON, tmLanguage, TextMate variables, revised the whole of JavaScript and a bit on Regular Expressions… I’m even intending to read a book I have on Python!

(My only issue is that when I use Replace it also adds a chunk of text left over from a previous document - any idea how I can clear this cache/buffer pl?)

Regards, Andy.

[agibsonsw]

Hello. My work here is done and I’ve attached my final JS completions file, enjoy!

There is a lot of good stuff in it, but I’m not foolish enough to say it’s complete. I think it is as comprehensive as it can be, for a single file.
Of course, the advantage of it being a completions file, rather than a complex Python script, is that you are free to add, delete, move items as you wish.

As mentioned previously, I don’t think it will work well with CodeIntel, unless you are able to turn that off just for JavaScript(?).

Please let me know if you discover any mistakes or obvious omissions.

The object names you can use to try and narrow a search are:
Anchor, Area, Array, Attr, Body, Canvas, Date, Document, Event, Form, Frame, Frameset, Function, History, Image, Input, JSON, Link, Location, Math, Meta, Navigator, Number, Object, object, Option, RegExp, Screen, Select, String, Table, TD,H,R, TextArea, Window. (And an underscore ‘_’ for style properties.)

I removed the term Element, as everything is an element and it won’t help narrow a search;
Rather than Date it might work better to type day, month, etc., get, set, or to;
If manipulating the DOM try words like node, create, append, child, sibling.

All the best and, as before, I would very much appreciate any feedback. Andy.
AndyJS3.zip (10.1 KB)

[senzo]

Have been looking at version 2 just the moment you released version 3

The first thing I stumbled upon is the completion after typing “if” which is “mimeTypes FF …” (somewhere down the list). Any Ideas why this is happening? If I complete with TAB, undo and TAB again I get “if (true) {};” as expected.

[agibsonsw]

Hello senzo.

I haven’t got your exact behaviour in version 2 or 3. I think it’s because ST takes a semi-intelligent approach to suggesting completions. That is, it remembers what you’ve used previously. To resolve this:

type ‘if’ and scroll in the completion to select ‘if () { }’;
perhaps start a new js file in the same project and try the first step in this file;
type ‘if’, press escape to dismiss the completions list, and press tab a couple of times.

I notice in the project’s workspace file it maintains a list of ‘selected-items’ for ‘auto-complete’. You could try carefully! deleting this to start over, or just the bits that you know are not useful. But make sure that you close the project (or use a different editor) before you amend this file.

Of course, it’s possible to remove items, or move them further down, within the completions file - but I would always treat this as a last resort.

Let me know, Andy.

[agibsonsw]

Actually, this has resolved a problem I was having when trying to replace text (it was replacing it with a chunk of text from a previous file).

I closed my Project, and open the workspace file that’s in my project folder. I delete all of the auto-complete history (leaving just ] ) and did the same for the replace history.
Then I closed ST and re-started - Great!

There are other things that can be deleted (carefully) in the workspace file, such as file_history items, which can fix and speed-up things, whe’hay.

Andy.

[agibsonsw]

Sorry to be a pain, but I noticed a small error with ‘parse()’ and ‘UTC()’ and have corrected this in the attached. I’m fairly confident that there aren’t too many such errors , but let me know pl.

I’ve managed to make a start with GitHub, but I haven’t fully sussed it yet. I’ll post the link when I’ve defeated it!

Andy.
AndyJS3.zip (10.1 KB)

[agibsonsw]

Managed to upload the corrected version, whe’hay:

https://github.com/agibsonsw/AndySublime

[agibsonsw]

Hello again.

I thought everything was going to well, and I’ve discovered and issue that needs to be raised. My expression
${TM_CURRENT_LINE/.+\.$|(.*)/(?1:document\.)/}

works well, in that:
alink
becomes
document.alinkColor
and
myDocu.alink
becomes
myDocu.alinkColor

That’s fine, but if anything at all occurs *after *the text that you’re typing it will always put in ‘document’ . So if you are typing within brackets ( ) then we have an issue. To get around it for the moment we can just type ‘alink’ and let ‘document’ be added, or type what we need directly.

I’ll need to work on my regex so that it only reads upto the current cursor position. It shouldn’t be too tricky, but it might take me a little while. Andy.

[agibsonsw]

Well that was hard work but I’ve finally got the expression I need:

${TM_CURRENT_WORD/\.\W*|(.*)/(?1:document\.)/}testThis

I’ll need to test it a bit more and then I’ll update my file tomorrow.

Basically, it means that typing ‘something.testt’ should become ‘something.testThis’, not matter where you type it; that is, even if nested deeply within a statement or brackets. The only time it will (should!) become ‘document.testThis’ is if you type ‘testt’ without an initial dot.

Andy.

[agibsonsw]

Attached is the corrected version 3. I’ll update GitHub to reflect this tomorrow.

Andy.
AndyJS3.zip (10.1 KB)

[agibsonsw]

My github is now updated with the latest version. Andy.

https://github.com/agibsonsw/AndySublime

[agibsonsw]

This will be my last update, you might be pleased to hear , because I’ve got this GitHub thing working (link provided in previous post).

I have used abbreviations in the tab triggers by removing the bracketed text shown:
Canvas 2(d)
CanvasGrad(ient)
Func(tion)
Hist(ory)
Navig(ator)

The purpose of this is to reduce the number of mis-hits when typing, without losing the ability to track down these specific objects. It also reduces the file size very slightly.

I’ve kept the full words Document, Window, Location, etc., because these terms are so familiar, and abbreviating them doesn’t assist searching. However, I’ve removed the text ‘Date’ from the triggers. This is because it’s much easier to type day, month, time, etc., or get, set, to, UTC. I’ve kept them for the static functions parse() and UTC() though.

I’m not intending to play with this any more (unless someone points out omissions or mistakes), as I want to play with Python! Regards, Andy.

[elkraneo]

Many THX Andy!
any clues how to add syntax colors to the functions ?

[agibsonsw]

[quote=“elkraneo”]Many THX Andy!
any clues how to add syntax colors to the functions ?[/quote]

This would require modifying the ‘JavaScript.tmLanguage’ file and your chosen theme-file. It’s not straight-forward unfortunately . Alternatively, you might find an existing theme that includes specific JS syntax colours. If you find such a theme, you could modify its ‘tmTheme’ file to change some of the colour-numbers. I don’t know which themes include JS colours

Andy.

[aristidesfl]

any thread about this on userecho?
it’s quite painfull using this forum since there are no mail notifications…

Would you mind continuing the discussion here:
http://sublimetext.userecho.com/topic/94863-poor-or-non-existant-javascript-autocompletion/

[elkraneo]

[quote=“agibsonsw”]

[quote=“elkraneo”]Many THX Andy!
any clues how to add syntax colors to the functions ?[/quote]

This would require modifying the ‘JavaScript.tmLanguage’ file and your chosen theme-file. It’s not straight-forward unfortunately . Alternatively, you might find an existing theme that includes specific JS syntax colours. If you find such a theme, you could modify its ‘tmTheme’ file to change some of the colour-numbers. I don’t know which themes include JS colours

Andy.[/quote]

THX Andy, great work

[JokerNZ]

@agibsonsw - Apologies for adding to such an old thread. But…

I’m just starting looking at completions and other aspects of modifying Sublime Text 4.

The documentation is… sparse to be polite. Or it assumes a massive amount of background information in code bases I don’t know about.

Can I ask if you found better information on Sublime Text completions and so on somewhere?

You’ve clearly worked hard to get an understanding of how it all works.

But I look at the docs and its barely comprehensible to me. If there were indications of other reading to find out how to make it work, that would be great. But there isn’t.

Thanks for any thoughts.