Jupyter Already Has a Perfect Text Editor: Building a Python IDE | by Dimitris Poulopoulos | Mar, 2023

By Jessie Hobb On Mar 8, 2023

Make Jupyter your all-in-one IDE and elevate your Python development experience

This article is part of a series. Check out the full series: Part I, Part II.

In previous parts of this series, we covered why many developers do not consider Jupyter as a fully integrated development environment and how the lack of a powerful text editor is one of the main reasons.

Thus, we decided to look at JupyterLab as a platform that we could use to create our own Python IDE from scratch. Extending the same idea to cover other programming languages is just a Google search away.

To this end, we used the JupyterLab terminal emulator to install Neovim and make it act and look like VS Code. This way, we can build a docker image to package our whole workspace, customized to our liking. This idea goes beyond JupyterLab and Neovim. We can have a working environment with pre-configured tools, such as Git for version control, pyenv for creating virtual environments, and tmux for terminal emulation.

In the first two parts of the series, we installed Neovim, learned our Vim bindings, and configured the looks and basic settings of the editor. Today, we will install several plugins to make our text editor behave more like an IDE. Lest we forget, the following image is a “Card Postal” from our final destination:

Let’s start!

Learning Rate is a newsletter for those who are curious about the world of ML and MLOps. If you want to learn more about topics like this subscribe here. You’ll hear from me on the last Sunday of every month with updates and thoughts on the latest MLOps news and articles!

Several functionalities that come out of the box with popular editors, like VS Code, are absent when you first install Neovim. But fear not; the community has built almost everything you can think of, and usually, it’s effortless to setup it up.

In our previous article, we saw how we can set up a plugin manager for Neovim to make our life easier when we install plugins. Now, the process of installing a new plugin is usually:

Add the plugin name in the init.vim configuration file
Restart the text editor
Run the :PlugInstall Neovim command
Restart the text editor to apply the new plugin

NERDCommenter

Armed with this knowledge, let’s install our first plugin, nerdcommenter. nerdcommenter is a relatively simple plugin that does one job: comments or uncomments multiple lines. To install it, add the following line in your Neovim configuration file:

https://github.com/preservim/nerdcommenter

If you’re following the series (which you should), this is how your init.vim file should look like now:

" General setup
set number
set relativenumber
set encoding=utf-8
set mouse=a
set scrolloff=10
set colorcolumn=80
set textwidth=80" Set syntax highlighting
syntax on
" Remap navigation keys
noremap ; l
noremap l k
noremap k j
noremap j h
" Python specific settings
au BufNewFile,BufRead *.py
\ set tabstop=4 |
\ set fileformat=unix |
\ set softtabstop=4 |
\ set shiftwidth=4 |
\ set textwidth=79 |
\ set expandtab |
\ set autoindent
" Highlight trailing whitespace
au BufRead, BufNewFile *.py,*.pyw,*.c,*.h match BadWhitespace /\s\+$/ 
call plug#begin()
Plug 'https://github.com/vim-airline/vim-airline' " Show status bar
Plug 'https://github.com/vim-airline/vim-airline-themes.git' " Customize status bar
Plug 'https://github.com/ryanoasis/vim-devicons' " Display developer icons
Plug 'https://github.com/rafi/awesome-vim-colorschemes' " Change color Schemes
call plug#end()
" Set default colorscheme
colorscheme molokai
" Customize status bar
let g:airline_theme='molokai'
if !exists('g:airline_symbols')
let g:airline_symbols = {}
endif
" airline symbols
let g:airline_symbols.branch = ''
let g:airline_symbols.readonly = ''
let g:airline_symbols.maxlinenr = ''

To avoid copy-pasting the whole file again, remember that whenever we add a new plugin, we always add it between the call plug#begin() and call plug#end() directives.

Next, restart the editor and run the Neovim :PlugInstall command. You should see that vim-plug (the plugin manager we use) installed the nerdcommenter tool along with the other plugins:

There are many options you can set to dictate how nerdcommenter should behave, but I like to keep things simple for simple plugins like this. Probably the only shortcut you should remember is the following:

<leader>c<space>

This shortcut executed the NERDCommenterToggle command. Usually, the <leader> key is the forward slash character (\). Thus, to test the plugin, select multiple lines with Shift + V (Vim’s visual mode — Learn your Vim bindings!) and press \ + c + n.

I said let’s keep things simple with this plugin. However, there is a configuration I like to set: Add spaces after comment delimiters by default. Thus, let’s add the following line at the end of our init.vim file and restart the editor to take effect:

" Customize NERDCommenter
let g:NERDSpaceDelims = 1 " Add spaces after comment delimiters by default

Tagbar

Tagbar is a code outline viewer for Vim/Neovim. An outline viewer is always handy when working with files containing multiple lines of code.

To install Tagbar, add the following line in your Neovim configuration file and follow the usual process of installing plugins:

Plug 'https://github.com/preservim/tagbar' " Tag source code for navigation

However, when you try to toggle the outline viewer with the TagbarToggle command, you get this warning:

Image Author

This is a case of a plugin that needs another tool to function correctly. In this case, the error message says it needs a package named exuberant-ctags. So, let’s install it first:

sudo apt update && sudo apt install exuberant-ctags

Now, we can relaunch the editor, run the :TagbarToggle command and everything should work seamlessly:

Okay, I admit this is not the sexiest outline, but wait until we start opening large Python files!

NERDTree

Another helpful plugin we’ll look at in detail is NERDTree. This plugin adds a file explorer and is one of the first plugins to add when starting with a fresh Neovim installation. As usual, add the following line to your configuration file:

Plug 'https://github.com/preservim/nerdtree' " Show file system explorer

After installing the plugin, you can use it via the :NERDTreeToggle command:

It seems that we’re getting closer to our goal! Now, there are many things that you can do with NERDTree, but what I like most is how it can manipulate the file system by pressing m. This way, you can easily manage files and folders without leaving your text editor:

Navigating between panes

Now that we have plugins that launch new panes, we must find a way to navigate between them. To this end, I like to use the following configuration:

" Use ctrl-[jkl;] to select the active split
nmap fl :wincmd k<cr>
nmap fk :wincmd j<cr>
nmap fj :wincmd h<cr>
nmap f; :wincmd l<cr>

Adding this to your init.vim file will permit you to change panes using the keyword f and the standard Vim navigation keys (although we have already remapped those too).

Honorable mentions

I’ll leave you with two other plugins you may want to try out:

Both have self-explanatory names, so your homework is installing and configuring them as you see fit.

As usual, to save your progress, use the docker commit command, as we did in the previous article. You can find mine on DockerHub.

In the following article, we’ll start tackling autocompletion and formatting!

My name is Dimitris Poulopoulos, and I’m a machine learning engineer working for Arrikto. I have designed and implemented AI and software solutions for major clients such as the European Commission, Eurostat, IMF, the European Central Bank, OECD, and IKEA.

If you are interested in reading more posts about Machine Learning, Deep Learning, Data Science, and DataOps, follow me on Medium, LinkedIn, or @james2pl on Twitter.

Opinions expressed are solely my own and do not express the views or opinions of my employer.