Beginning Emacs

I've been dipping back ito the world of free software, and have been having a huge amount of fun getting back into emacs. I'm using it more of an operating system than I ever did before, as a way to navigate the world using a text interface. I'd never thought I'd be done with the terminal, but this is the first time that I've got something better and more powerful.

Since I do a lot of server wrangling and web development, lets look at how to setup emacs to do JavaScript development. My setup is a Pixelbook, and I run three virtual desktops. The first is a full screen Chrome window with multiple tabs, and the second and third are emacs frames. I flip back and forth between them as needed.

First install emacs. You need emacs > 25 to use magit, so its probable that you'll need to upgrade the emacs in your system. If you are using linux I'll let you sort that out directly, but below are the instructions for OSX.

The latest emacs (26 at the time of this writing) is on buster, so upgrade to that.

1

sudo apt-get install emacs

Documentation is not available in the free part of debian. Don't ask me, something complicated. In order to get the info pages, you need to install the package emacs-common-non-dfsg which is in the non-free part.

Start up emacs and then you can do C-x C-f /sudo::/etc/apt/sources.list to open up the sources file as root! That's pretty neat, part of the Tramp system which lets you use local buffers to edit things that are "remote", in this case as another user but also on different hosts.

Add non-free to the end of first line to have access to the other set of packages. Then do M-x shell to startup a bash shell, and you can install the rest of it from there:

1

sudo apt-get install emacs-common-non-dfsg install-info

You may need to run install-info to get emacs to recognize other stuff in the /usr/share/info directory.

1

brew cask install emacs

If you are on OSX you'll also need to install some certs, and defined in this wonderful walkthrough. Simply:

1

brew install libressl

And then in .emacs add

1
2

(require 'gnutls)
(add-to-list 'gnutls-trustfiles "/usr/local/etc/openssl/cert.pem")

One thing that's annoying is having the Emacs Backup Files everywhere. Lets stick everything in ~/.saves so we don't need to see it.

1
2
3
4
5
6
7
8

(setq
   backup-by-copying t      ; don't clobber symlinks
   backup-directory-alist
    '(("." . "~/.saves/"))    ; don't litter my fs tree
   delete-old-versions t
   kept-new-versions 6
   kept-old-versions 2
   version-control t)

Go into System Preferences... -> Keyboard and select Modifier Keys. Switch caps lock key to be control. Totally worth it, but you still need to do a META dance with the options key, instead of the more obvious command key.

Another nice thing is to map your command-key to META, which is much more natural. Put this in .emacs

1
2
3
4

    (setq mac-option-key-is-meta nil)
    (setq mac-command-key-is-meta t)
    (setq mac-command-modifier 'meta)
    (setq mac-option-modifier nil)

Emacs is something much more than an editor. It's an environment within which you can interact with your computer that could replace many of the tools that you use now. I normally use Terminal for example to interact with things and open up other programs to do specific tasks. Emacs could replace terminal, as well as all of the programs that are used to get into the nitty gritty of making computers do what you want. I recommend the Mastering Emacs book as a great way to get started in your emacs journey.

M-x customize and search for package archives. Insert a new one named 'stable melpa' and add https://stable.melpa.org/packages/. You can paste into emacs using C-y.

Also add https://melpa.org/packages/.

I also like to set visual-line-mode globally to true.

Then Apply and Save, or do C-x C-f

Refresh the package list using M-x package-refresh-contents

Use M-x customize-themes to change your theme. I also like to have a much larger font, which you can adjust using M-x customize-face and setting the default size to something like 140.

Open up your .emacs file and add:

1
2
3
4
5

;; https://www.emacswiki.org/emacs/NoTabs
(setq-default indent-tabs-mode nil)

;; https://www.emacswiki.org/emacs/TabStopList
(setq tab-stop-list (number-sequence 2 120 2))

Use C-space to start a selection, the arrow keys to move around to select it all. Then type M-x eval-region to run the lisp.

M-x package-install RET use-package RET

Install M-x package-install helm-ls-git which should install helm as well. Another nice helm package is helm-ag which will grep over your files to look for specific values. Then in your .emacs put

1
2
3
4
5

(require 'helm-config)
(require 'helm-ls-git)

(global-set-key (kbd "C-x C-d") 'helm-browse-project)
(global-set-key (kbd "C-x f") 'helm-ag)

Once you load everything, using C-x C-d will let you open up files in a project which is defined as the files in the current git repository. C-x f will let you use ag to file files (this overrides the fill-column command which I don't end up using).

I encourage you to read through the documentation.

To install, M-x package-install RET flycheck and M-x package-install RET company And then in .emacs:

1
2

(add-hook 'after-init-hook #'global-flycheck-mode)
(add-hook 'after-init-hook 'global-company-mode)

Once this is done, you need to install the specific linter for the languages you are interested in. For example:

1

npm i -g eslint

To install M-x package-install emmet-mode

1
2
3

(add-hook 'sgml-mode-hook 'emmet-mode) ;; Auto-start on any markup modes
(add-hook 'css-mode-hook  'emmet-mode) ;; enable Emmet's css abbreviation.
(setq emmet-move-cursor-between-quotes t)

I find webmode handles indention better for files that have embedded submodes, such as javascript inside of an HTML file.

1
2
3
4
5
6
7
8
9

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.phtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.[agj]sp\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.as[cp]x\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.mustache\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))

This is the big one. https://github.com/emacs-lsp/lsp-mode gives you a list of all of the languages supported and what needs to be installed, but lets focus on javascript for now.

M-x package-install RET lsp-ui RET

M-x package-install RET company-lsp RET

M-x package-install RET helm-lsp RET

Then in .emacs

1
2
3
4
5
6
7
8
9

(use-package lsp-mode
  :hook (XXX-mode . lsp)
  :commands lsp)

;; optionally
(use-package lsp-ui :commands lsp-ui-mode)
(use-package company-lsp :commands company-lsp)
(use-package helm-lsp :commands helm-lsp-workspace-symbol)
(use-package lsp-treemacs :commands lsp-treemacs-errors-list)

And then install some of the language servers. In the case of javascript

1

npm i -g typescript-language-server; npm i -g typescript

M-x package-install RET magit RET

Inside of .emacs add:

1

(global-set-key (kbd "C-x g") 'magit-status)

Magit is amazingly powerful, and I'm still trying to learn it.

Probably the best way to get into it is to first run C-x g (or M-x magit-status) and then use C-h m, which will show you the documentation for the current mode, in this case magit. This is a good way to poke around, though it makes sense to check out the manual which is pretty extensive.

After I checkout my repo, I bookmark the base folder using C-x r m. Then I can go there faster without having to navigate through the filesystem.

I start up a shell using M-x shell to run commands. You can M-x rename-buffer to give it a name, and then be able to start up additional shells if needed. Depending upon what you are doing, C-x 2 splits horizontally so that can be nice to see the output of anything you need.

C-x C-d will locate files within that project, which is generally a good substitute for the find in project function that I normally use to move around.

1. https://www.masteringemacs.org/
2. https://www.emacswiki.org/emacs/EmacsForDebian
3. https://blog.vifortech.com/posts/emacs-tls-fix/
4. https://github.com/emacs-lsp/lsp-mode
5. https://gist.github.com/CodyReichert/9dbc8bd2a104780b64891d8736682cea
6. https://emacs.cafe/emacs/javascript/setup/2017/04/23/emacs-setup-javascript.html
7. https://github.com/felipeochoa/rjsx-mode
8. https://groups.google.com/forum/#!topic/emacs-helm/zaBbg2tFAuM