JavaScript autocomplete is better with TabNine

A few months ago, a colleague recommended an autocomplete tool to me called TabNine. It was closed source, he said, but he wasn’t at all shy about using it despite being a proponent of open-source technology. I was impressed with Parcel, another recommendation of his, so I decided to finally take TabNine for a spin.

TabNine is an autocompleter for any programming language. It is built in Rust and driven by machine learning and language-specific semantic completion tools. You can use it with Visual Studio Code, Sublime Text, Atom, Emacs, and Vim.

Under the hood, TabNine uses several layers of completion engines and an index of the source code of your project. By using the code in your repository to help suggest completions, TabNine will take your coding style and common patterns into account. Additionally, TabNine identifies parameterizable patterns and makes suggestions based on those parameters. That’s a mouthful, so I’ll show some examples of what that really means below.

For a bit of background, I’ve been using Vim as my editor of choice for the last seven years and have it tuned to my liking. For autocompletion I’ve been using YouCompleteMe, which is an excellent tool despite being quite tricky to install. So this week I commented out a line in my .vimrc file and added the TabNine plug-in.

The TabNine plug-in is forked from YouCompleteMe, but the installation instructions include a sentence that was music to my ears: “If TabNine does not work as soon as you install it, this is a bug and you should file an issue.” Clearly, not only could I expect to plug-and-play, but the maintainer of this project is serious about user experience. The promise of an easy install was met and in less than a minute I was working with my new autocompleter.

The first thing I did was open the snippets dapp repository I have been working on for the last few weeks and started to import a new component. I was immediately presented with an option to improve the autocompletion engine:

IDG

Slightly confused, I thought this was maybe a Vim-specific setting I had to run as a colon command (if you’re not familiar with colon commands in vim, :q is the most infamous of them all). But I quickly realized this was actually just some text I needed to type in my editor window. My linter hated it, but it did the trick:

IDG

With semantic completion added to machine learning completion I was ready to go. I completed my import statement and went to continue importing the Icon component from the React material UI library. The first few suggestions were related to a duplicate line earlier in the file, but the third suggestion added the next few words for me:

IDG

This is a great example of having more context around the pattern being completed. An import statement followed by an identifier is typically followed by an opening quote. So far so good. Even though I was expecting it, the next part kind of blew me away. Having chosen the third completion from the list, I typed an @ to begin referencing the library package where the Icon component exists. TabNine completed the whole thing for me:

IDG

I should note that nowhere else in my project am I using the Icon component. This is a great example of the parameterized completion I referenced earlier. There is a pattern in these import statements that pull in material UI components, which is: import <something> from '@material-ui/core/<something>'. TabNine derived that pattern from my source code and automatically suggested the right thing.

I figured I should try writing some new code, so I opened up an empty file and typed one letter:

IDG

Accepted that, typed a comma and a space and:

IDG

OK, so that took just three character strokes. Time to create my component class.

IDG

Which TabNine finished for me. Then came the render method, a typical return value, props destructuring, and a default export, all of which were completed for me. This is when I started cackling.

IDG

IDG

IDG

The TabNine autocompleter is a great experience, and I expect to be using it quite a bit in the future. If you use one of the supported editors, I would definitely recommend trying out TabNine for JavaScript or any other language you might write in your editor. Want to share your experience? Continue the conversation on Twitter: @freethejazz.