New computer means new configuration from scratch! Since Emacs is the mainstay program I use across devices, I want to document how I'm doing web development with it right now.

First I took the time to go over my init.el and remove anything I'm not using. I like to aim for about 100-120 lines of code on it. It's an arbitrary number, but it makes it easy to know where things are whenever I change it. One of the drawbacks of Emacs is how fun and time consuming it can become to want to mess around with configurations, but that's just procrastination so this limit is important to keep me in check.

Here are my notes on how I'm setting up Emacs for web development.

I've installed Emacs on macOS via the emacs-plus homebrew recipe. I learned about it from Alvaro Ramirez's Awesome Emacs on macOS article.

Emacs packages

• web-mode.el

  web-mode.el is an autonomous emacs major-mode for editing web templates.

• magit

  Magit is a complete text-based user interface to Git. It fills the glaring gap between the Git command-line interface and various GUIs, letting you perform trivial as well as elaborate version control tasks with just a couple of mnemonic key presses.

  --Magit website

• emmet-mode.el

  This one is more of a habit / muscle memory from the old Atom editor days. It's abbreviation expansion for HTML.

• prettier.el

  The prettier Emacs package reformats your code by running Prettier with minimal overhead, by request or transparently on file save.

Installing Prettier

First I installed npm via homebrew:

$ brew install npm

Next, to get prettier to run in Emacs I installed it globally via npm:

$ npm i -g prettier@3.9.5

For Emacs to find the node executable, I had to update my init.el. This code synchronizes Emacs's internal environment variables with my system user shell.

(exec-path-from-shell-initialize)

File-based Mode Inits

I'm sure I'll update the list as I start working on other projects on this computer, but for now HTML and CSS is enough for this blog, so here's what I added in my init.el to start web-mode when opening files with those extensions:

;; File-based mode inits
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.css?\\'" . web-mode))

There's also a hook on web-mode to set some configuration and start the other minor modes:

;; Hooks 
(add-hook 'web-mode-hook
	  (lambda ()
	    (display-line-numbers-mode 1)
	    (emmet-mode 1)
	    (prettier-mode 1)
	    (setq web-mode-markup-indent-offset 2)
	    (setq web-mode-css-indent-offset 2)
	    (define-key emmet-mode-keymap (kbd "TAB") 'emmet-expand-line)))
        

That's it for now! :-)