Introduction
JupyterLab
Just a few months ago, on February 20th, Project Jupyter published an article JupyterLab is Ready for Users, announcing the next-generation web-based interface for Project Jupyter, which is powerful and have many exciting new features.
If you have ever been a user of Jupyter Notebook, it’s quite easy for you to get started with JupyterLab. You can work with not only the notebooks, but also the terminal, text editor, images, CSVs and so on… This is much more convenient for researchers and students to handle all of their experiments just like in a lab.
However, the only thing I need to complain about is the clumsy text editor, which is capable of basic editing, but sometimes too hard to use when you have lines of codes.
Monaco Editor
You might not be familiar with the Monaco Editor, but you must know VS Code, a popular open source code editor with IntelliSense.
The Monaco Editor is the code editor that powers VS Code, which is web-based and lightweight.
Could this editor be integrated into JupyterLab to provide better code-editing experience? Two years ago, this question was proposed under this issue. Now the answer is ‘YES’.
Jupyterlab-monaco is Ready
💪 Thanks for the great work of jasongrout, an Monaco Editor extension for JupyterLab is now available today, bringing the VS Code-like experience. GitHub Repo: https://github.com/jupyterlab/jupyterlab-monaco
This project is still under developing, you can wait until the official release, or you can build it yourself to preview this extension. Currently, it’s not appropriate for daily usage with incompleteness and bugs. But, anyway, let’s give it a shot.
Prerequisites
- Python 🐍
- JupyterLab 0.32.0
- NodeJS, npm, yarn(optional)
Configuring Python and JupyterLab is not too hard. NodeJS and npm are needed and you can find the instruction here about installing with the package manager on your OS. Yarn is recommended to manage the npm packages. If you have them successfully installed, skip this section.
My condition is a bit complicated, since I run JupyterLab from a remote server without sudo permission. Also, the JupyterLab is installed in a VirtualEnv. Luckily, I found nodeenv, a python package capable of integrating nodejs & npm right in your Python VirtualEnv.
Suppose your python ENV is activated. Install nodeenv via pip and activate nodejs and npm. If you prefer Yarn, run ‘npm install -g yarn’.
(ENV)$ pip install nodeenv
(ENV)$ nodeenv -p
(ENV)$ node --version
(ENV)$ npm --versionSetup and Build
- Clone the repo ⏬
$ git clone https://github.com/jupyterlab/jupyterlab-monaco
$ cd jupyterlab-monaco- Install packages 📦
$ yarn install # or `npm install`
$ yarn run build # or `npm run build`- Modify webpack.config.js 📝
For me, it’s located in the ‘ENV/local/lib/python2.7/site-packages/jupyterlab/staging’ directory. At around line 114, do the patch as mentioned in this:
module: {
rules: [
{ test: p => path.basename(p).startsWith('JUPYTERLAB_RAW_LOADER_'), use: 'raw-loader' },
{ test: p => path.basename(p).startsWith('JUPYTERLAB_URL_LOADER_'), use: 'url-loader?limit=10000' },
{ test: p => path.basename(p).startsWith('JUPYTERLAB_FILE_LOADER_'), use: 'file-loader' },
//{ test: /^JUPYTERLAB_RAW_LOADER_/, use: 'raw-loader' },
//{ test: /^JUPYTERLAB_URL_LOADER_/, use: 'url-loader?limit=10000' },
//{ test: /^JUPYTERLAB_FILE_LOADER_/, use: 'file-loader' },- Activate the extension 🔧
As mentioned in the repo, to avoid node out-of-memory error, set an environment variable by:
export NODE_OPTIONS=--max-old-space-size=4096Make sure you have JupyterLab version ≥ 0.32.0. Link the extension by:
$ jupyter labextension link .- Enjoy 😃
Run JupyterLab again, open the text editor. Cheers! 🍺
So far, the experience is good but the functions are incomplete. We can pay attention to this extension. I believe the release will come out soon. Then, JupyterLab will be the perfect online IDE for developers and researchers. 😎
