Javascript autocompletions and having one for Sublime Text 2

Autocompletion is major software development productivity booster in modern programming text editors. This article discuss about Javascript autocompletion and how to make Sublime Text 2 editor to support them. If you are not familiar with Sublime Text 2 please see my earlier post what Sublime Text 2 is all about and how to tune it to be a superior programmer’s tool. Please note that information here applies to Sublime Text 2, Sublime Text 3 is underway (most ST2 plugins are open source and can be easily upgraded for ST3 compatibility).

Update: 3 days after this blog post I cam across Tern.js which is a kickstarted project to build sensible editor agnostic Javascript autocompletion engine.

Image

1. Why autocompletion for Javascript is so hard

Javascript does not have Java-like static typing system, meaning that it’s not possible to know what’s the type variables of like this, $, jQuery, etc. until the code is actually executed in the web browser. In statically typed systems like Java you declare the type of the variables when you introduce them, like int i or MyClass foo. In Javascript you have only var or let. This makes Javascript lighter to write, but it also effectively means that during writing the code the information about the variable contents is not really available. Thus, your text editor cannot know how to autocomplete your typing because it cannot know what autocompletions there are available.

What makes things even more worse and sets Javascript apart from Ruby and Python is the lack of native support of classes and modules. Prototypial inheritance gives great freedoms – leading to the sad state of the things that each Javascript framework has invented their own way to declare classes, modules and namespaces. There isn’t one right way, but many incompatible ways. Thus, there is no single solution to extract the classy type information, even run-time.

2. Introducing type information into Javascript

There exist several ways to annotate Javascript source code or overlay type information over it. By using these type hints your text editor can know that $ is actually jQuery and can guess what kind of functions it could provide.

First of all, most text editors have their own type information format and files which are generated from the source code or entered as manually maintained files. Examples include Sublime Text 2 .sublime-completions files and Aptana Studio Javascript autocompletions. To make the editor support autocompletion one needs to integrate a source code scanner plug-in which extracts the type information and turns it to the native symbol database format supported by the editor.

Please note that autocompletion is not the only reason to have static typing support or type hinting. When project size and number of developers grow, static typing becomes more and more preferable as it decreases the cognitive load needed to work with the codebase, reducing human errors.

3. JsDoc directive scanning

JsDoc is a loosely followed convention to annotate Javascript with source code comments to contain references about packages, namespaces, singlentons, etc. Basically you write something like @class foo.bar.Baz in /** */ comment blocks and it is picked up. JsDoc was originally created to generate Javadoc like API documentation for Javascript projects. If you have any self respect you document your source code with comments.  Do this by following the JsDoc best practices and you’ll be lucky and the same type information can be utilized for generating autocompletions too.

JsDoc class and namespace hints are especially needed when you are using something like RequireJS for defining your modules. This is because naive source code scanners have very hard time to determine module exports and classes from this kind of source code and as far as I know, no IDE supports RequreJS natively yet.

Note that personally I prefer superior JsDuck over JsDoc for actual HTML documentation generation.

4. TypeScript definitions and language

With some bad rap due to its owner, Microsoft, TypeScript is an open source project to provide type information for Javascript. TypeScript comes with two “modes” of operating.

The less invasive approach is to  provide type information in externally typed interface files (example .ts for jQuery).

Move invasive, but easier to maintain approach is to write your source code in TypeScript language itself which compiles down to Javascript and .ts type information files. TypeScript language is a Javascript superset, so all Javascript is valid TypeScript. TypeScript adds optional support for classes, modules and static typing of variables. The TypeScript compiler will detect if you are trying to mix wrong types or using missing functions and gives a compiler error at the compile phase, when generating JS from TS.

Sublime Text 2 has a plugin to support TypeScript based autocompletions.

5. SublimeCodeIntel plug-in and OpenKomodo CodeIntel

OpenKomodo is a software repository for the open source parts of ActiveState’s Komodo Edit editor. It has a subsystem called CodeIntel for autocompletion and source code symbol scanning.

What makes CodeIntel interesting from the perspective of Sublime Text 2 is that CodeIntel is 1) open source 2) written in Python, making it easy to integrate with the Python based plug-in system of Sublime Text 2. Thus, there exist SublimeCodeIntel plug-in.

CodeIntel has a Javascript scanner. Based on its source code, it should provide JsDoc @class decorator support. However, I have never managed to get it working and there is an open stackoverflow.com question how to make SublimeCodeIntel to work with JsDoc directives. All help welcome.

6. Sublime Text 2 and CTags

Exuberant CTags is a generic “tag” type information extractor backend for various programming languages. As the name implies, it was originally created to autocomplete C source code. Sublime Text 2 has support for CTags with a plug-in which is called CTags.

I have not used this plug-in myself, so I hope someone can comment how well it works with Javascript autocompletion.

7. Manually generating autocompletions for your favorite Javascript project

Though not so advanced approach, this gave me a wow effect and motivation to write this blog post (instead of sitting under a palm tree sipping caipirinhas). I came across this little Python script in Three.js, a 3D engine for WebGL and Javascript.

Three.js has invented yet another Javascript class system of their own. But instead of using JsDoc @class, @module or @package like annotations they have a custom Python script which scans the Javascript codebase using regular expressions. Regexes match Three.js custom class declarations and then the script generates Sublime Text 2 autocompletion file based on the results. Crude, but apparently seems to work.

I recommend check the source code and see how you could apply this for your own little project if you are a major Sublime Text 2 user. The approach is not limited to Javascript, but should work for any dynamically typed language where you have control over how you define your namespaces.

\"\" Subscribe to RSS feed Image Follow me on Twitter Image Follow me on Facebook Image Follow me Google+

Sublime Text 2 tips for Python and web developers

Update 2014-03: Please see updated blog post for Sublime Text 3.

Sublime Text 2 is a very powerful text editor which has gained popularity recently – for good reasons. It is commercial (59 USD). Plenty of power comes from the fact that Sublime has a plug-in framework built in Python. Even though the core app remains closed there exist a vibrant plug-in ecosystem around the editor.

Note: You can try Sublime for free. It simply gives nagging dialog “Please buy” now and then.

Here is my collection of tips how I squeezed more power out of the editor. The tips are written from OSX perspective, but should work fine on Linux and Windows too.

I used to be Aptana Studio (Eclipse) junkie. Even though Sublime does not have all the GUI power of Aptana (e.g. see the end of post here) I have found the current versions of Sublime serving my needs better. The biggest reason for the switch is that Aptana / Eclipse forces folders and files to be encapsulated inside “Eclipse space” to work well.

Sublime is more suitable for work where you work with various open source components which do not follow such rigid order you might find in in-house corporate software. When you need to integrate different tools and projects, Sublime scripting opportunities are more straightforward versus building thousands of lines Java code what could be need with Eclipse.

Note: Don’t write anything about Vim or Eclipse in this paragraph.

1. Unofficial manual

There exist a third-party maintained manual for Sublime. Especially parts for settings and keyboard shortcuts come very handy.

2. Add-on manager

Install Sublime Package Control. You need run this in order to install any Sublime Text plug-ins. It magically pulls plug-ins from thin air (or GitHub).

Image

After Package Control has been installed you can add new packages with CMD + SHIFT + P, search Package Install. It has context sensitive search and you can find all packages by name.

3. Favorite plug-ins list

Based on the feedback from the blog friends you might want to install the following plug-ins through Sublime Package Control

More about specific plug-ins later.

4. Open files from command-line

I have the following in my shell .rc file, so I can open files directly from the terminal:

alias subl="'/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl'"
alias nano="subl"
export EDITOR="subl"

Note: nice fallback for nano command which comes from the muscle memory sometimes.

5. Open folders as projects from command-line

You can also open folders in Sublime Text.

Just type e.g.

subl src

… and the whole src/ folder is opened in the Sublime Text project explorer (right hand).

Image

Note: One folder = one project = one window? I am not sure if there are ways to have multiple projects in the same window.

6. Searching multiple files

First open a folder as a project in Sublime Text 2. You can do this from the command line, as instructed above, or from File > Open menu.

Then right click the folder in the sidebar to search it:

Image

You can also specify a file extension mask as a comma separated in the Where: field.

Image

7. Configure sane tab and whitespace policy and other settings

Never save your files with hard tabs characters in them. The same goes for trailing whitespaces which are against policy of many programming language style guides.

In the menu Sublime Text 2 > Preferences > File Settings – User drop in this snippet:

// Place user-specific overrides in this file, to ensure they're preserved
// when upgrading. See
// http://docs.sublimetext.info/en/latest/customization/settings.html
// for more info
{

    // Tab and whitespace handling.
    // Indent using spaces, 4 spaces ber indent by default, clean up extra whitespaces on save
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "trim_automatic_white_space": true,
    "trim_trailing_white_space_on_save": true,

    // Do not try to detect the tab size from the opened file
    "detect_indentation" : false,

     // Don't do any VIM keybindings or other VIM fanatic sugar
    "ignored_packages": ["Vintage"],

    // Don't complain about plug-in responsive
    // (Too verbose when you have slow computer)
    "detect_slow_plugins": false,

    // http://www.granneman.com/webdev/editors/sublime-text/top-features-of-sublime-text/auto-completion-in-sublime-text/
    // The delay, in ms, before the auto complete window is shown after typing
    "auto_complete_delay": 500,

    // Install better them
    // (You can get this from the package control)
    // https://github.com/buymeasoda/soda-theme/
    "theme": "Soda Dark.sublime-theme",

    // Download better font
    // https://github.com/adobe/Source-Code-Pro

    "font_face" : "Source Code Pro",
     // Don't show hidden (dotted) directories and binary files in the sidebar
    // (You are not going to edit them in any case)
    "file_exclude_patterns": [".*", "*.pyc", "*.pyo", "*.exe", "*.dll", "*.obj","*.o", "*.a", "*.lib", "*.so", "*.dylib", "*.ncb", "*.sdf", "*.suo", "*.pdb", "*.idb", ".DS_Store", "*.class", "*.psd", "*.db"]
}

See more about the settings.

Note: Don’t confuse File Settings – User with Global Settings – User in Preferences menu. The latter doesn’t seem to work.

Note: Even though you configure this policy, Sublime Text 2 may auto-detect another tab_size policy when you open a file. See the explanation below.

8. Converting existing files to use spaces instead of tabs

Sublime tries to autodetect tab settings settings for every opened file and may fail, so keep your eye on this when working with uncleaned files. You might want to use git pre-commit to prevent committing files with tabs in them.

Do View > Indentation > Convert Indentation to Spaces and make sure Indent using spaces is turned on in the same menu. The new versions of Sublime should remember this setting on file type basis.

There are also config files which you can access from Preferences menu, but after many failed attempts and hacking several config files it did me no good. Maybe autodetect was overriding my simply attempt of never use tab.

9. Map file formats to syntax highlighting

If you a have a file format you want to recognize under a certain highlighter e.g. map ZCML files to XML highlighter.

Open any file of the format.

Then: View > Syntax > Open all with current extension as… ->[your syntax choice].

Image

ZCML, now with full color

More info.

10. Disable automatic loading of the last session

By default, Sublime Text re-opens all files and folders you had when you closed the editor last time. Some people don’t like this.

Instructions to disable automatic session restore for Sublime Text.

11. Lint and validate your files while typing

SublimeLinter scans your files on the background when typing using validators and linters for various errors. Please see Configuration section in README as you might need to install additional software, like Node.js, to run some of the linters.

Image

Detect mistypes CSS, yay!

SublimeLinter comes with built-in pylint and has Node’s jshint and csslint packages includes

12. Add CodeIntel autocompletion support

Install CodeIntel from Package Control.

If you are working with Python projects, using buildout, this recipe comes to handy.

[codeintel]
recipe = corneti.recipes.codeintel
eggs = ${instance:eggs}
extra-paths =
    ${omelette:location}

This will generate .codeintel file inside your buildout folder.

CodeIntel plug-in assumes .codeintel file is in your project root. Simply type

subl .

to open your buildout folder as Sublime project folder.

Now Sublime should support auto-completion. E.g. start typing

from zope.interface import <--- Auto completion pops up here

Image

Also, with CodeIntel, ALT + mouse click takes you the source code of import, or the declaration of any function you click.

CodeIntel also supports PHP, Ruby and Javascript, to name few.

Note: If you are not using buildout, or Python, you can always create CodeIntel configuration file in old-fashioned way.

13. Go to anywhere shortcut

CMD + P. Type in a part of a filename and a part of a function / rule name. You are there. Very powerful, yet so simple feature.

Image

14. Go to line shortcut

Use Go To Line functionality CTRL+G for more traditional jumps.

15. Context sensitive in-file search shortcut

Handy for Javascript, CSS, Python, etc. CMD + R. Type your method or rule name and Sublime automatically jumps into its declaration.

Image

… or in Python …

Image

16. Edit multiple words or lines simultaneously using multi cursor

This trick is handy if you need to wrap / unwrap stuff in quotes, add commas, add parenthesis etc. on multiple lines or items simulatenously.

First select lines or items. You can select multiple individual words by holding down CMD and double clicking words. For lines you can do just the normal SHIFT selection.

Press SHIFT + CMD + L to activate the multi cursor mode.

Image

Then edit all the entries simultaneously. Use CMD + left and CMD + right etc. to move al the cursors to the beginning or the end of the linen and so on.

17. Open OS file browser for the currently opened file or any of its parent directories

CTRL + mouse click filename in the title bar of the edit window to show the full path to the file and open any of its parent folder.

Note: This is OSX’s Finder file browser standard behavior and might not work on other platforms.

Image

18. More powerful sidebar

Install SideBarEnhanchements package to get more menu entries to sidebar which you can use to manage your source folder.

Image

19. Theme and font

To further enhance readability of your text editing environment

See the results below.

Image

20. Syncing and back-uping Sublime Text 2 settings and plug-ins with Dropbox

You may want to

  • Save your Sublime Text 2 configuration for which you have spend so many tears to tune it up
  • Sync your Sublime Text 2 configuration across different computers

Here are instructions for syncing and saving Sublime Text 2 settings with Dropbox.

21. HTML / XML tag tools

No one loves XML sit-ups. XML’ish languages where not intended to be written by hand. Sublime Text provides some pain killers on the matter.

Install Tag from Package Control. It comes handy when you are cleaning up those hard tabs….

Image

Select text and then search from Command Palette (CMD + SHIFT + P): Tag: Auto Format Tags on Selection. Your HTML indent and other weirdness will be cleaned up. You can also configure it for different tag writing style preferences.

There is also built-in HTML: Wrap selection with tag command to insert parent or middle level tags in your HTML source.

22. Git

Though Sublime’s file explorer doesn’t support fiel state coloring or context sensitive menu  shortcuts like in Eclipse, you still get some Git commands thru kemayo’s git plug-in (from Package Control, again).

Image

23. Still unresolved

24. More tips

25. Translations

This article is translated to Serbo-Croatian language by Vera Djuraskovic from Webhostinggeeks.com.

\"\" Subscribe to RSS feed Image Follow me on Twitter Image Follow me on Facebook Image Follow me Google+