TabNine - Put your coding speed to the next level
Tags: javascript, programming, webdev, productivity
Published: 2020-06-10 16:17:48


# 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](http://tabnine.com/?utm_source=dev.to&utm_medium=referral&utm_campaign=nicolac)* is a plugin owned and operated by [Codota](http://codota.com/?utm_source=dev.to&utm_medium=referral&utm_campaign=nicolac), 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:

![TabNine supported IDEs](https://dev-to-uploads.s3.amazonaws.com/i/gyhku5mjaluasf890er0.png)

---

# 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:

![Auto var declaration](https://dev-to-uploads.s3.amazonaws.com/i/gvy1pdunltpcan54i1mn.gif)

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:

![Percent on suggestions](https://dev-to-uploads.s3.amazonaws.com/i/qnr7tkycr04qp2jxg9ji.png)

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! 😎

![Markdown edit with TabNine](https://dev-to-uploads.s3.amazonaws.com/i/21rjdy7gyx4zxldb0gra.gif)

---

# 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:
  ```bash
  ext install TabNine.tabnine-vscode
  ```
3. 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](https://atom.io/packages/search?q=TabNine)** you can simply search and install *TabNine*

> You can check installation process for other IDE [here](https://www.tabnine.com/).  

---

# 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](https://jsdoc.app/) 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:

```javascript
/**
 * @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:

![Comment driven completition](https://dev-to-uploads.s3.amazonaws.com/i/rhfjiernnia7r7lah71h.gif) 

#### Classes development and extension

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

```javascript

/**
 * @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:

![Comment driven completition with classes](https://dev-to-uploads.s3.amazonaws.com/i/w1ynoolwyzkghopg42uv.gif)

### 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:

![Function parameter auto completition](https://dev-to-uploads.s3.amazonaws.com/i/381vxrmhnpc3mc1qp81d.gif)

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:

![Function parameter completion using TypeScript](https://dev-to-uploads.s3.amazonaws.com/i/rfvxt0v8pvqlweufgclp.png)

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](http://codota.com/?utm_source=dev.to&utm_medium=referral&utm_campaign=nicolac) for letting me writing this article and be part of they're amazing project
* [clideo.com](https://clideo.com), an amazing online tool for video editing (you can also make memes with it 😎)
* [onlineconverter.com](https://onlineconverter.com), to convert video to GIF, and much more!