EMACS: Get started developing
Mats Tage Axelsson takes you through the steps to add Emacs to your bag of tricks when it comes to developing software.
Mats Tage Axelsson takes you through the steps to add Emacs to your bag of tricks when it comes to developing software.
Modern IDEs have a lot of bells and whistles, but sometimes they’re just overkill. Enter Emacs. In the editor that we both love and hate, there aren’t many features when you first open it. However, it’s extendible and this is what this article will explore.
How can an editor be powerful when it’s so old and has very few basic features? The answer lies in the fact that external contributors have been able to add to the editor without changing the foundation code. So far, so classic open source, but there’s much more to the story.
Emacs has a system for extending its functions. Because this all began so long ago, the developers choose LISP as the language for this task. We’re not saying that LISP is obsolete, because it’s not. Instead, it has an important place in the eco-system of GNU and all the open source that surrounds us. It was invented in 1958, so you’re forgiven if you believe newer stuff has replaced it. But we digress. Emacs uses a special dialect named Emacs Lisp or elisp for configuration. This language can also be used as a scripting language if you start Emacs in batch mode.
Yorkshire macs... emacs
When you start, you may want to change a few details of what the editor looks like. Why learn Lisp to set the font? Fortunately, Emacs has a customisation system where you can click and choose. It’s not as sleek as many newer systems, but it’s powerful enough.
To start customising, use the key combination: ‘M-x’ ‘customize’. The buffer now includes a long list of settings. The list is also categorised, so start by looking through the categories to make sure you know what’s available. In this case, we’re interested in the programming category, especially the JavaScript group. Under the group, you have all the variables that control the behaviour of the editor. At the beginning of the line, there’s a small triangle. Tab to it and hit Enter. The triangle will rotate, showing you the value that’s set right now and a state button. When you press the button, by clicking or pressing Enter when the cursor is on top of it, you get a new minibuffer that tells you what values you have to choose from. Choose the value and hit Enter.
To make the value active go back to the State button and run it again. This time you have the option to activate it for this session or permanently. This is a little cumbersome if you already know all the settings you need, but your file is edited and you can open it to see what has changed. The file is written in elisp.
I have an Elisp
(E)Lisp is the second oldest (high-level) language in the world. Only Fortran is older, and just by a year! To start tweaking existing modes, there are specific aspects of elisp that you need to understand. The first detail that can be confusing is that ‘window’ in the code is the square where your file has been loaded into, and the session is in a frame. If you’re running under X or Wayland, one instance is a frame in Emacs language. Also, remember that you’re always editing a buffer, not the file directly. To change the file, you need to save it.
In most cases, when you find a mode, the install script will add the definition to use it. However, not all packages are installed directly and sometimes they’re conflicting. In these cases, you need to set them to be
the active mode. You may also choose to add a hook to activate the function. This hook tells Emacs to act correctly for your programming language. For example, the hook for setting autopair to act correctly for Python is shown below:
(add-hook ‘python-mode-hook
#’(lambda ()
(setq autopair-handle-action-fns
(list #’autopair-default-handle-action #’autopair-python-triple-quote-action)))) In these examples, you can see one of the quirks of LISP. It has everything in parenthesis. Each one starts with a command, after that comes parameters, creating a function. Note also the single quote sign before
python-mode-hook , which tells Emacs not to evaluate it as a value.
Plugin system
To extend Emacs with new functions that others have contributed, you download a file written in Elisp. To change small details about your configuration, you change settings by adding a config file for each purpose. The thinking behind this is that you should be able to make small configuration files, one for each mode.
A mode describes how Emacs behaves: there are major modes and minor modes. The major modes are standalone and change the behaviour of Emacs, usually for a specific file type or programming language but not always. Org-mode ( seetutorials LXF241) is one these modes that has a file format attached to it. When a file is installed, the editor can go into a mode of your choice. Most files in this system have an extension ‘.el’. In your main configuration file ( Emacs.el) you’ll add two lines, or the package installer will make Emacs load the file at startup. The org-mode file is usually set to required, as shown in the code below:
(require ‘package)
(add-to-list ‘package-archives ‘(“org” . “https:// orgmode.org/elpa/”) t)
Many packages are available but not loaded immediately for any normal install of Emacs. To find the packages that are easy to install: use the ‘C-h p’ key combination. The list is very long and can adapt Emacs to almost any task. The list is organised by category and most of the packages are built-in, although some are available to download.
You can also find packages on the internet. What you need to find is the file with an ‘.el’ extension. A great source for modes is the ELPA collection of modes. You can browse the packages on the web or use the keycode ‘M-x list-packages’. A buffer will open and you can scroll the list or use the search function to find the package. Once you find it, put the cursor on it and hit Enter. In the new buffer that appears you have an install button: answer yes in the taskbar and the install starts.
An example is JavaScript. There are many to choose from but one of the better ones is js2-mode. The package is available in the ELPA sources and can be installed from inside Emacs.
What’s in a mode?
A mode is a set of rules for handling certain text, such as understanding the syntax of a programming language. Each time you load a file into a buffer, Emacs will choose a major mode according to the contents of the file. The major modes are also usually derived modes. This means that it takes functions from another mode. The built-in modes are text-mode, prog-mode and special-mode. Of these modes, text-mode is useful on its own for writing natural language text; it enables spell checking. It’s also the basis for HTML and SGML.
The other modes are created only to derive other modes from. The language-specific modes that are built-in are all derived from prog-mode. This enables simple things like ignore the comments. You just need to redefine what a comment is, according to your language. Next, you need to know how functions are built up. To define a reusable function you use the keyword defun . An example is shown below:
(defun
(defun multiply-by-seven (number) ; Interactive version.
“Multiply NUMBER by seven.” (interactive “p”)
(message “The result is %d” (* 7 number)))
Any new modes you need are written in elisp. The name of the language comes from the founding idea which is that everything is a list (LISt Parser is what it stands for). If you want to make your own tweaks you need to learn it or at least the basic principles of it. From the example in the earlier paragraph you learnt of js2mode, so to make it your major mode, you need to add some LISP code to your configuration:
(add-to-list ‘auto-mode-alist ‘(“\\.js\\’” . js2-mode))
This is taken from the package documentation. Further down in the document, it states that you can add it as a hook. This is a section in your configuration that sets certain behaviours depending on something else, for the sake of this discussion a specific language. The reason that you need to do this is that you need to do it only for certain buffers.
When Emacs starts, it runs all initialisation code in file order and you may not have opened a JavaScript file when you started Emacs. The best part about hooks is that they’re not restricted to operating only on the file level – they can also act on parts of a file. If, for example, you’re editing an HTML file, your JavaScript may be embedded and so may PHP. In short, it can be messy but with Emacs and the correct hooks set up by mode files everything will be highlighted correctly and you can code complete in each and every language.
One of the hooks in the js2-mode.el file looks like the following example of code: (add-hook ‘after-change-functions #’js2-minor-mode- edit nil t)
Hooks are used for many tasks. The basic idea is to make Emacs handle all cases the way you want. This is an add-hook; you also have remove-hook and ways to combine hooks. Hooks work globally or locally. Locally means that they operate on files of the file type you’re using at that particular moment. An example is that orgmode has its own way of handling the arrow keys.
As you have heard earlier, you can find most of the modes in MELPA. The hardest trick is to know which one suits your needs. The first thing you need is a mode for your special language.
Looking at JavaScript, the Emacs wiki lists five major modes and many other helper modes. In the collection, you have web-mode.el, which is especially for handling JavaScript embedded inside a web page. Usually, you want to write JavaScript in separate files, and load them at the end of a page. With that in mind, you need to look at other modes, one of which is JS2-mode. This mode helps with syntax and brands itself a complete IDE for JavaScript. To make it even more efficient, you can also load the Indium mode on top of that. With Indium, you can also connect directly to your browser so that changes in your code shows up directly in the browser.
If you’re developing in Python, you have the same problem. Emacs already has an integrated Python mode, which is fine for coding but the other available modes enhance different aspects of your coding experience. You also have many modes that support virtual environments, which are common with Python.
Practising the ways
So far what we’ve covered is fairly straighforward, but getting used to using Emacs is another story. The best way to start is to use the built-in tutorial by pressing C-h t. That will only help you move around with the cursor and do simple editing, though. Other operations, and there are plenty, requires another approach. You can read about vimgolf in the boxout, an excellent way to learn the most efficient way to do certain tasks.
As we have seen earlier, we can also set the configuration with a graphical interface – check our .Emacs file for how it’s configured. For learning elisp, start with an introduction document in Emacs, available at www.gnu.org/software/emacs/manual/info/ emacs.info.gz. The file is best read in Emacs itself. To get started, use dired (C-x d) and create your directories. Try also to copy in images and view them using C-t C-t. Other ways to practise is to follow programming exercises that are published on exercism. There is an exercism.el module available on GitHub; however, it’s not pushed to MELPA so you have to write your own lines of code in your .emacs file.
;; Adding exercism load path
(add-to-list ‘load-path “~/.emacs.d/exercism-emacs/”)
;; Loading exercism-emacs
(load “exercism”)
Usually, you will use the MELPA package manager to choose your language. When you’re using many languages, again MELPA sets this up for you. Some things that you may need to set yourself is the code in your init file. For starting to use js2-mode, which we mentioned earlier, you need to add a hook:
(add-hook ‘js2-mode-hook ‘ac-js2-mode)
This only makes Emacs highlight the JavaScript files. It’s also useful to use a completion mode, in this case you’re required to connect to a browser. Melpa still has an old mode called ac-js2 but it’s obsolete; instead, use the company-tern mode. This requires that you install ‘tern’ in npm, using a terminal:
$ sudo npm install -g tern
In Emacs, install the packages company and company-tern and set the packages to active. The code for making it stick is similar to the rest.
(require ‘company)
(require ‘company-tern)
(add-to-list ‘company-backends ‘company-tern) (add-hook ‘js2-mode-hook (lambda () (tern-mode) (company-mode)))
;; Disable completion keybindings, as we use xref-js2 instead
(define-key tern-mode-keymap (kbd “M-.“) nil) (define-key tern-mode-keymap (kbd “M-,“) nil)
Now that you have this running, you have the basics. Next, install the Indium package which gives you a number of tools, including remote debugging in Chrome, a stepping debugger and REPL buffer mode. To install it, use MELPA. The manual route is also available with a few statements in your initialisation file. Indium is a package in npm so you need to start a project in your source directory with npm and install Indium. This package is only tested with Chrome version 60 and higher, so you must have that installed. After all the components are installed you can run Chrome. Start it with parameters to open the ports for debugging:
$ chrome --remote-debugging-port=9222 https:// localhost:3000
You will also need to create a file in your projects root directory to define you’re using Indium – the filename is .indium.json. The simplest version is shown below.
{
“configurations”: [
{ “name”: “Web Browser”, “type”: “chrome”,
“url”: “http://localhost:3000” ] }
In this case, you will find your web page on port 3000 and run all your debugging on port 9222. The many capabilities of Indium make it a phenomenal tool for web development. If you want an environment where you have many features already active but still have the possibility to change things, use Spacemacs.
Spacemacs has prepared many configurations for development of JavaScript, Python and many others. To accomplish flexibility with many existing configurations, the developers have created a concept called layers for configuration. Take JavaScript as an example. You need to install all parts of the parsing for JavaScript and also the part that helps you see how the page will behave. This system also enables you to create many layers for the case when you’re using different programming languages. Make one layer for each mix of languages and switch when you work on another project.
Many other IDEs have everything set up from the beginning, but with Emacs, you have the freedom to choose your own path and it’s usually less resource hungry, too.