[Technology] IDEs, Emacs and LSP: Python and TypeScript

Back in my day, we had a text editor, a compiler and a Makefile, and we liked it like that.  Maybe we didn't really like it like that.  But it let you write and compile code.

I got attached to Emacs early on (sorry vi) and over the years have accumulated a number of additional packages and lisp code to make development easier and more efficient.  More "recently," Language Server Protocol (LSP) [wiki] [git] was born, initially targeting Microsoft's VSCode, which has allowed the creation of Language Servers that are independent of any specific editor, and made editors more agnostic to which languages they support, by facilitating a standardized interface between the two facilitating the helpful features wanted in Integrated Development Environments (IDEs).

Some common features include:

• code completion
• syntax highlighting
• in-line error/warning indicators
• refactoring support
• code navigation to definitions and references
• in-line API documentation for function signatures and variable typing

With Emacs, many of these features have been available through a variety of internal and external packages independently for a while.   Modes for languages (c-mode, python-mode, web-mode, etc.) have enabled syntax highlighting and code formatting assistance.  company has supported code completion.  flymake has supported syntax checking and error/warning indicators.  Etc.

I decided to update my environment, though, to benefit from the existence of LSP language servers and hopefully simplify my configuration and approach.  With Emacs often comes a lot of choice and some custom configuration.  That can be great to achieve an ideal environment for yourself, but it can also require a lot of time and attention to figure out what that ideal environment should look like, and just how to glue interacting packages together.  So, I'll share my process.

LSP client modes in Emacs

There are now two prominent options in Emacs

• lsp-mode [github.io]
• Eglot [gnu] [git]

Eglot has recently been merged into core GNU Emacs v29.  According to "the Internet", lsp-mode is more featureful.  I want to try both, but Fedora 38 only ships GNU Emacs v28.3, so I have tried lsp-mode first!   I'll try Eglot once I upgrade to Fedora 39 next week. 

Language Servers for Python

I'm decided to try two different languages, first Python and then TypeScript.  However, both have multiple language servers available.  The pain of making choices!

lsp-mode's language server page lists several options for Python already

• Pylsp / python-lsp-server [git]
• Jedi Language Server [git]
• Palantir Python Language Server [git] (deprecated)
• Microsoft's Pyright [git]
• Microsoft Python Language Server [git] (superseded by Pyright)
• Ruff [git]

So many nice options.  Which to pick?  Well, an interviewer once recommended Pyright so there I go to start.

 Language Servers for TypeScript/JavaScript

Again, options!

• Deno [site]
• Sourcegraph's javascript-typescript-langserver [git] (unmaintained)
• TypeScript Language Server [git] (formerly theia-ide by TypeFox)

This time I went with TypeScript Language Server because lsp-mode's page for it explicitly marks it as recommended.

Additional packages

One issue with IDEs is that all of their features can make an interface busy/noisy and slow.  Sometimes similar information will be redundantly surfaced at multiple points on screen.  lsp-mode is delightful in that it's very modular and (like many IDEs) you can toggle features on and off as you need them.  They even offer a handy visual guide to disabling features.  

lsp-mode also leverages a lot of other packages, some internal and some external, to offer a lot of its functionality.  They list these as some of them: lsp-ui, company, flycheck, flymake, projectile, imenu, xref, lsp-treemacs, dap-mode, lsp-helm, lsp-ivy, consult-lsp, which-key, dired, iedit, emacs-tree-sitter.

Some of these will also leverage other packages and external tools, too.  E.g. flycheckwhich runs syntax checkers can also call pylint, mypy, etc. from outside emacs, to surface errors and warnings on screen. :)  The bolded ones will be included in my set-up steps below.

My configuration: lsp-mode, pyright, pylint

After configuring my system, I reproduced it in a minimal container image (registry.fedoraproject.org/fedora) via podman 

Install emacs and (for pyright) npm.

  $ sudo dnf install emacs
  $ sudo dnf install npm    # for pyright, which is written in typescript

Make sure you have the MELPA package archive configured in your ~/.emacs

  ;; ---- Package Management (package.el, melpa) ----                                
  (require 'package)
  (add-to-list 'package-archives '("melpa" . "https://melpa.org/packages/") t)
  (package-initialize)

Next, you can start emacs and run these commands:

  M-x package-refresh-contents
  M-x package-install use-package

  ;; install a few minimal packages we'll use for LSP/IDE features
  M-x package-install lsp-mode
  M-x package-install lsp-ui
  M-x package-install flycheck              ;; show errors and warnings from pyright
  M-x package-install company               ;; auto-complete

  ;; now to install language support (servers + mode)
  M-x package-install lsp-pyright
  M-x package-install typescript-mode
  M-x lsp-install-server pyright-tramp
  M-x lsp-install-server typescript-language-server

Additional .emacs configuration for newly added LSP/IDE packages:

;; From https://emacs-lsp.github.io/lsp-mode/page/installation/                         
(use-package lsp-mode
  :init
  ;; set prefix for lsp-command-keymap (few alternatives - "C-l", "C-c l")
  (setq lsp-keymap-prefix "s-l")
  :hook ((python-mode . lsp-deferred))
  :hook ((typescript-mode . lsp-deferred))
  :commands (lsp lsp-deferred))
                                          
          
(use-package lsp-ui :commands lsp-ui-mode)
(setq lsp-ui-doc-show-with-cursor t)

;; From https://emacs-lsp.github.io/lsp-pyright/                                        
(use-package lsp-pyright
  :ensure t
  :hook (python-mode . (lambda ()
                          (require 'lsp-pyright)
                          (lsp-deferred))))

Show some additional API documentation on screen for symbols!

M-x lsp-ui-sideline-toggle-symbols-info

"flycheck isn't working?!"

One issue that stumped me for a while was lsp failing to show errors/warnings from flycheck when flycheck was configured to use "lsp" as its syntax checker. It turns out that because I often use symlinks from my home directory to my current active projects, I ran into lsp-ui's previously-resolved issue #119 (or potentially a new, similar one). So, if lsp-ui doesn't indicate warnings/errors from flycheck (or flymake), make sure your path isn't via a symlink.  Oops.

Handy Keybindings

Here are some of my most-used/commands keybindings:

• s-l r r - refactor > rename a symbol
• s-l g g - go to definition
• s-l g r - list references
  
• C-x ` - go to next error (flycheck)
• M-x lsp-format-region
• M-x lsp-format-buffer

Here is a list of others: https://emacs-lsp.github.io/lsp-mode/page/keybindings/

I don't see "s-" often as a prefix, but it's for the Super key (e.g. Windows key).  On my system (Fedora 38 with GNOME), s-l locks my screen, but holding shift along with super works for Emacs too, e.g. "<shift>+<super>+l r r" to rename a symbol.

Conclusion

Something I appreciate most about IDEs and their fancy features is the early detection of problems and API guidance as you code.  I still will add linting/syntax checking/test steps to my build process to guard against bad code entering my repositories.  I will say that I think there is some benefit to being able to code without the guidance of an IDE (e.g. code completion) as it can encourage you to better learn an API in the first place.  But there comes a point when you can focus more on being productive (with the help of tools!) than on exercising your API memorization for a hundredth time. :)