Home Download Buy Blog Forum Support

JavaScript completions

JavaScript completions

Postby agibsonsw on Sat Jan 28, 2012 7:50 pm

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.
Attachments
AndyJS.zip
Re-save with extension .sublime-completions
(5.29 KiB) Downloaded 194 times
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: JavaScript completions

Postby agibsonsw on Sun Jan 29, 2012 12:29 am

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

Code: Select all
{ "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 :)
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: JavaScript completions

Postby agibsonsw on Sun Jan 29, 2012 8:22 pm

I've had no response as yet but that won't prevent me from posting my final version :D 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 8-)
Attachments
AndyJS.zip
Final JS completions
(8.98 KiB) Downloaded 168 times
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: JavaScript completions

Postby senzo on Mon Jan 30, 2012 8:58 am

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.
senzo
 
Posts: 106
Joined: Tue May 24, 2011 9:17 am

Re: JavaScript completions

Postby agibsonsw on Mon Jan 30, 2012 11:06 am

senzo wrote: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 :lol: ).

Regards, Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: JavaScript completions

Postby agibsonsw on Mon Jan 30, 2012 3:11 pm

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 :lol:. 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..)
Attachments
AndyJSComps.zip
(10.36 KiB) Downloaded 151 times
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: JavaScript completions

Postby csl_ on Wed Feb 01, 2012 6:35 pm

I literally created an account to thank you. This is brilliant, something I've needed for a while. :)
csl_
 
Posts: 1
Joined: Wed Feb 01, 2012 6:34 pm

Re: JavaScript completions

Postby agibsonsw on Wed Feb 01, 2012 11:36 pm

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 :D
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 8-)

(End of part one.)
Attachments
AndyJS2.zip
2nd version
(10.18 KiB) Downloaded 191 times
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Re: JavaScript completions (Part 2)

Postby agibsonsw on Thu Feb 02, 2012 12:05 am

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 :o .

Regards, Andy.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

BTW

Postby agibsonsw on Thu Feb 02, 2012 12:17 am

By the way, loving this Editor 8-) 8-)

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.
"I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
agibsonsw
 
Posts: 901
Joined: Fri Jan 27, 2012 9:11 pm

Next

Return to Plugin Announcements

Who is online

Users browsing this forum: jbrooksuk and 5 guests