JavaScript completions

[agibsonsw]

Hello. I couldn’t get CodeIntel to play nicely with JavaScript and have uninstalled it. I’ve created the attached completions file for JS which may be of interest to some . You need to rename it as ‘.sublime-completions’ and store it in:

Packages\JavaScript\YourNameJS.sublime-completions

It shouldn’t interfere with anything else (Snippets, etc.) but I’m not sure that it would play nice with CodeIntel(!).

How it works:
Typing, for example, ‘winal’ should produce the option ‘Window.alert()’. Press tab or enter to accept this suggestion. It will enter ‘window.alert(msg)’ with the word ‘window’ highlighted. You can either press Tab to get to the message, or first replace ‘window’ with your own object reference.
You can type the first few letters of the following JS objects: Array, Body, Boolean, Date, Document, Element, Form, Function, JSON, Math, Navigator, (new), Number, Object, RegExp, Screen, String, Table, Window. (I tend to type the first Capital letter.)
But you don’t have to type the object name, you could type, for example, ‘seti’ and it should show ‘Window.setInterval()’.

BUT - if you type the full object name followed by the dot ‘.’, then accepting a completion will not be helpful, because it may end up repeating: ‘Window.window.alert()’.
Some of the completions add a comment, such as ‘// IE only’. If you don’t want this you can just press Delete when it is highlighted. Or, of course, edit the completions file to remove it.

There are a number of things I haven’t yet included. Particularly: Event, form control properties/methods, Canvas, Image. If anyone expresses an interest I will re-post when I’ve added these.

I welcome any comments But, of course, if you don’t find it useful you can just delete the file! Andy.
AndyJS.zip (5.29 KB)

[agibsonsw]

I spent ages constructing the following completion expression, so thought I might share it:

{ "trigger": "Window.alert()", "contents": "${TM_CURRENT_LINE/.+\\.$|(.*)/(?1:window\\.)/}alert(${2:msg})" },

If I’ve just typed ‘something.’ (ending with a dot .) then it just adds ‘alert(msg)’ following this, otherwise it inserts ‘window.alert(msg)’.

I can’t really apply it to my completions (it would be too radical a change) but someone might find a use for it

[agibsonsw]

I’ve had no response as yet but that won’t prevent me from posting my final version as I’m quite pleased with it.

It includes all form elements and their methods and properties, Image, Navigator, etc. It includes **Canvas **and related objects. The only thing omitted is HTML5 features other than canvas. I’ve included a list of standard style properties, but I’ve preceded their tab-trigger with an underscore ‘_’ so they don’t clutter up the main listing.

What I quite like is that it encourages me to think about what object-type my variables are referencing. For example, if I have a variable that references a form’s TextArea, I can either start typing ‘Tex’, or ‘Elem’ if I want to use Element properties and methods. Then I can feed in my variable name.

I think the file is now as big as it needs to be - any bigger and it won’t trigger the completions list automatically. You may want to tinker with the ‘auto_complete_delay’ timing, to give you a chance to type a few letters before the list appears.

I welcome any comments. Andy.

BTW I realise that creating a python script to intercept ‘on_query_completions’ would be more creative, but for the moment I just wanted a simple list that worked
AndyJS.zip (8.98 KB)

[senzo]

Had no time to test it yet. Just wanted to say keep it up, it’s always nice to see that someone is trying to enhance js support.

[agibsonsw]

Had no time to test it yet. Just wanted to say keep it up, it’s always nice to see that someone is trying to enhance js support.

Hello, and thank you for your response.

I realised that I omitted a number of html attributes. So I’ll re-post a third version a bit later.

But I’m now tempted to create an alternative version which will be simplified/smaller. Essentially, just a word list but to include functions/methods and their arguments. This will give more control back to the user (me ).

Regards, Andy.

[agibsonsw]

I’ve attached my completed version of this file. To summarize:

You can rename the file and save it in \Packages\JavaScript;
Don’t type your variable name - instead, type a few letters for the type of object it is (Win, Elem, etc.), or from the method you wish to use, or a combination of these two;
Press TAB (or Enter) to accept the completion;
Type your variable name (or Tab to accept the default) and continue to press Tab to fill in any other arguments;
When an argument is shown like ‘, this]’ it is optional and you can press Delete to remove it;

If you type ‘style._’ (or an underscore at any time) then the underscore will trigger a list of css properties. Again, you can just type a few letters of the property (without needing to type the underscore).

If you type your variable name followed by a dot ‘.’ then the completion list will only really be useful for standard methods, functions, events, css properties. (If you choose, for example, Window.alert(), then you’ll end up with ‘yourVariable.window.alert()’, and you’ll have to press Delete twice to correct it.)

The list is **almost **complete . In particular, it doesn’t include HTML5 objects other than those related to Canvas.

Good luck! Andy. (I might produce a simplified version of this…)
AndyJSComps.zip (10.4 KB)

[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