Sublime Forum

JavaScript completions

#5

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 :laughing: ).

Regards, Andy.

0 Likes

#6

Iā€™ve attached my completed :question: 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 :laughing:. 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)

0 Likes

#7

I literally created an account to thank you. This is brilliant, something Iā€™ve needed for a while. :smile:

0 Likes

#8

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 :smiley:
  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 :sunglasses:

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

0 Likes

#9

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

Regards, Andy.

0 Likes

#10

By the way, **loving **this Editor :sunglasses: :sunglasses:

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.

0 Likes

#11

Hello. My work here is done :smiley: 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 :laughing: 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)

0 Likes

#12

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

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.

0 Likes

#13

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.

0 Likes

#14

Actually, this has resolved a problem I was having when trying to replace text :smiley: (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.

0 Likes

#15

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 :astonished:, 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)

0 Likes

#16

Managed to upload the corrected version, wheā€™hay:

https://github.com/agibsonsw/AndySublime

0 Likes

#17

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ā€™ :astonished:. 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.

0 Likes

#18

Well that was hard work :open_mouth: 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.

0 Likes

#19

Attached is the corrected version 3. Iā€™ll update GitHub to reflect this tomorrow.

Andy.
AndyJS3.zip (10.1 KB)

0 Likes

#20

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

https://github.com/agibsonsw/AndySublime

0 Likes

#21

This will be my last update, you might be pleased to hear :smiley: , 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.

0 Likes

#22

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

0 Likes

#23

[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 :blush:. 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 :question:

Andy.

0 Likes

#24

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/

0 Likes