Nicola

Posted on Jun 10, 2020

TabNine - Put your coding speed to the next level

#javascript #programming #webdev #productivity

Deep learning at the rescue! 👨‍💻👩‍💻

In this article I'll talk about TabNine, an AI Code Completion system for all languages, with a focus on JavaScript.

TabNine is a plugin owned and operated by Codota, who offers also a plugin for Java Code Completions.

What is TabNine?

TabNine helps developers writing code with some magics. It's based on a system of deep learning to help you writing code:

FASTER
EASIER
CLEANER

It's a free (yes, free) plugin for major IDEs like:

IntelliJ PyCharm
VS Code
Sublime
IntelliJ PhpStorm
VIM
Atom

and many others:

How does it works?

TabNine indexes your code and finds statistical patterns to create customized suggestions based on how you write your own code.

Take the following example:

As shown TabNine learns automatically my variable declaration pattern while writing it, and suggest me the best match for the code I'll write after. By this way you can speed up variable declarations, if you use a well defined naming convention.

TabNine offers different solutions while writing, and displays a percentage value based on the best match he find:

This is a simple example to show how TabNine helps you write your code, the next examples will show more complex and ordinary-like use cases of this amazing tool!

Note: This article is written in MarkDown and TabNine is helping me writing it! That's pretty cool! 😎

Install

TabNine is an IDE plugin, so the installation process depends on which IDE you are using. I'll show the installation process for some of the most used IDEs:

Visual Studio Code

Press CTRL + P to open the command prompt.
Run the following command:

  ext install TabNine.tabnine-vscode

Reload VS Code manually or by after-install prompt.

IntelliJ Idea

Press CTRL + Alt + S to open the settings popup
Go under Plugins/Marketplace
Search TabNine and install
Manually reload the IDE

Atom

Under packages you can simply search and install TabNine

You can check installation process for other IDE here.

Examples

Let's go deep on how to use TabNine and why. There are a lot of examples I could show you but I'll focus on some specific use cases.

Example 1. Comment-Driven code completition

With TabNine we can use jsdoc to generate functions and complex objects dinamically. This could be useful by defining the interface first and then the implementation.

Take this example, we want to define a sum function:

/**
 * @description return a sum between a and b
 * @name        sumBy
 * @param       {number} a
 * @param       {number} b
 * @return      {number} the sum between a and b
 */

TabNine will read the jsdoc params and suggest you the correct code definition.
I can just type Alt + Space (or Tab) to write the function:

Classes development and extension

You can also use this tool with class definition. Take this example:


/**
 * @description Animal class
 */
class Animal {
  /**
   * @constructor
   * @param {string} name - name of the animal
   * @param {boolean} quadruped
   */
  constructor(name, quadruped) {
    this.name = name;
    this.quadruped = quadruped;
  }

  /**
   * @description returns the name of the animal
   * @returns {string} - name of the animal
   */
  get name() {
    return this.name;
  }

  /**
   * @description sets the name of the animal
   * @param {string} name - name of the animal
   */
  set name(name) {
    this.name = name;
  }
}

We want to extend this basic class with a Cat class, TabNine will learn about the Animal class and suggest the method implementation and comments:

Example 2. Function parameters auto completition

Often in Javascript it's hard to complete the function parameters without typings. TabNine is useful in this case because it learns from your code and suggests the method implementation:

The parameters of methods sumBy and diffBy are displayed automatically by TabNine, so you don't have to check the method implementation directly to check what kind of parameters the methods accepts.

TabNine and Typescript

There aren't a lot of differences for TabNine behaviours between JavaScript and TypeScript. TabNine will give you more precise suggestions because of Typings, so will get all the advantages types gives to your code:

As you can see, I've defined param1, param2 and param3 in different orders and types compared to the foo function.
TabNine is recognizing the variable types and suggest to you the correct order.

Thanks to:

Codota for letting me writing this article and be part of they're amazing project
clideo.com, an amazing online tool for video editing (you can also make memes with it 😎)
onlineconverter.com, to convert video to GIF, and much more!

Top comments (19)

Ben Sinclair • Jun 10 '20

It's free-ish. It's proprietary SAAS, so it needs an Internet connection to run and will fail if the developers decide to make it fail, for whatever reason.

It's interesting tech, and I used it a year or so ago in Vim for about a month before getting fed up with some of its idiosyncrasies and falling back to regular omni-completion.

Nicola • Jun 10 '20

Yes, of course, is still imperfect. I've used it for a couple of months with a full enterprise project and nowadays is more "smart" than the first days because it has learned from my patterns and naming conventions.

Is based on deep learning so it needs a lot of data to learn and improve itself, I think it could be really useful on non-typed languages like JS.

Mike Talbot ⭐ • Jun 11 '20 • Edited

Well after your article I decided to try it out. Won't be free for me on my project but it's already looking very interesting. Annoying that it corrects me in Markdown and not always when I notice! Thanks for this.

I'm glad it runs all locally - very important that for my stuff.

Nicola • Jun 11 '20

Hi Mike! Thanks for trying it!

Yes sometimes it's pretty annoying but it strongly depends on which IDE are you using and your coding speed!

To fix that I think you need to think in a different way while you write your code, personally I switched from auto-completion to driven-completion (lol what's that 😂).

Basically, before using TabNine I was tabbing everything, letting the IDE complete the code for me.
Now with TabNine, I wait for its suggestions before tabbing (or alt-spacing) and let it write the right code for me. That's what I call a driven-completion.

I swear this might help you, any way you need a bunch of time to master this new way of coding.

PS. If you well document your code before writing it, the suggestions will be more precise.

Mike Talbot ⭐ • Jun 11 '20

Yeah I'm not sure why it's autocorrecting Markdown - on Webstorm - my CHANGELOG.md randomly has a version number that isn't right lol.

I can see what you mean on the tab to complete stuff, definitely interesting given all of the more complex structures it suggests. Never been a fan of editor shortcuts, but maybe....

Nicola • Jun 11 '20

Damn, that's strange at all!

I think the plugin is reading all your files, and maybe it touches them.

According to FAQs:

Since TabNine does not parse your code, it will never stop working because of a mismatched bracket.

I don't think it's changing your file metadata or something like that. Can I ask you to provide an example of what's happening? Maybe I can help you!

Mike Talbot ⭐ • Jun 11 '20 • Edited

Well it's active in my Markdown - offering suggestions, which is a little unhelpful really - I'm not expecting my English to change on Enter

I typed this:

#### 2.1.50

- Handle the case where the Promise yielded is immediately resolved without
  going through the restart process

And it stuck a 7 on the end of the version number

Nicola • Jun 11 '20

It helps you with code first, and it "works" also with markdown, but as a syntax language it tries to help you with some suggestions calculated on your code, so it could mess a little bit up. Anyway, I've tried on a new markdown file and It's not happening, I think it is because is learning from your code and somehow it matches the wrong words. I'll check TabNine devs for that to learn more about this behaviour.

Kryptand • Jun 11 '20

I absolutely adore TabNine, I have been using it for about 3 weeks for at least 8 hours a day in an angular project and it has been such a help with almost everything that annoys me with web development. Need to write log messages? Need to write things that are repetitive and boring ? TabNine got you covered!
Thank you so much for developing this gorgeous type of software!

Nicola • Jun 11 '20

Happy to hear that! Unfortunately, I didn't develop it I just wanted to share an amazing tool to you all!

I'm using it in an enterprise angular project, I want only to improve your comment saying than using typescript and tsdoc this amazing plugin do the rest for me.

Jakob Attkinson • Apr 10 '21

My biggest problem with TabNine is that if I call a service class, the existing methods are no displayed at the beginning, but rather at the end. So I have to scroll through all "smart" suggestions from tabnine, rather than see the existing methods on the service class instantly. Something any basic IDE does.