IntelliSense/AutoComplete in Python Editor

Most of the developers are writing their code in a particular editor, so If a user wants to use a particular feature, he/she searches it in the editor and install it. But how these plugins work ??

Let’s look at one of them i.e. auto-complete feature every language has different plugins

This article is about how auto-complete works in the editor, more focus will be is on auto-complete in python language.

What is auto-complete?

Autocomplete i.e. word completion, is a feature in which if user types a particular word, then application will give a list of suggested words.

What is the language server protocol?

The Language Server Protocol (LSP) defines the protocol used between an editor or IDE and a language server that provides language features like auto complete, go to definition, find all references etc.

How LSP works?

A language server runs as a separate process and development tools to communicate with the server using the language protocol over JSON-RPC

Language server for Python: Python-language-server i.e. pyls

This is the package that needs to be installed for the python language server. Similarly, there are some other packages for other languages.

Install it using command `pip install python-language-server`. It also has some other packages:

• Rope for Completions and renaming
• pyflakes linter to detect various errors
• McCabe linter for complexity checking
• pycodestyle linter for style checking
• pydocstyle linter for docstring style checking (disabled by default)
• autopep8 for code formatting
• YAPF for code formatting (preferred over autopep8)

How to integrate an auto-complete feature in Monaco-editor for python language

Language client (JavaScript code)

1. Import all required libraries i.e. vscode-ws-jsonrpc for communication over JSON-RPC, Monaco-editor, and Monaco-languageclient

2. Create Monaco editor with required editor option

3. Install Monaco language client

MonacoServices.install(editor)

4. Create a Monaco language client

5. Connect to language server

Note: Here, Vue.js framework is used in the frontend, other frameworks can be used. `connectToMonacoServer` method is called in the init life-cycle of Vue.js. (Can be written in separate component)

Language server (JavaScript code)

To integrate different language

change line no 9 from

const serverConnection = server.createServerProcess(‘JSON’, ‘pyls’)

to

const serverConnection = server.createServerProcess('JAVA', 'java',"<extra_param_if_required>");

For Java, some extra params might be required like jar settings, etc.

likewise for Go

var serverConnection = server.createServerProcess('go', path.resolve(__dirname, 'go-langserver'), ['-gocodecompletion', '-freeosmemory=false']);

Each language has a different language server. One just need to replace the server process method parameter to respective language parameter

Wrap up:

1. Understanding of auto-complete feature
2. Working of Language server protocol
3. Python language server and its libraries
4. Integration of language client and server in Monaco editor
5. How to use language server for other languages

Source:

Language server protocol

Python language server library

Monaco editor