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

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

  ext install TabNine.tabnine-vscode

1. Reload VS Code manually or by after-install prompt.

IntelliJ Idea

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

Atom

1. 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!