In an effort to challenge myself a bit, I've decided to take a look at using SpaceMacs as my daily text editor. In a world where VSCode currently reigns supreme, it seems almost crazy to think that a decades-old editor could stand up to the challenge of today's development toolset. VSCode has outstanding support for almost anything you can imagine, so popular tools like TypeScript, ESLint, and Prettier are almost guaranteed to work out of the box. I was determined to see if I could make SpaceMacs even half as pleasant to develop in as VSCode, hoping I could experience the joys of modal editing without giving up too much of the tooling I'd come to know and love.
.js extension, SpaceMacs will prompt you to install the layer. You can also add it to the
~/.spacemacs config manually in the
dotspacemacs-configuration-layers section. Here's what that section looks like by default:
dotspacemacs-configuration-layers '( ;; ---------------------------------------------------------------- ;; Example of useful layers you may want to use right away. ;; Uncomment some layer names and press <SPC f e R> (Vim style) or ;; <M-m f e R> (Emacs style) to install them. ;; ---------------------------------------------------------------- helm ;; auto-completion ;; better-defaults emacs-lisp ;; git ;; markdown ;; org ;; (shell :variables ;; shell-default-height 30 ;; shell-default-position 'bottom) ;; spell-checking ;; syntax-checking ;; version-control )
Don't let the common lisp style scare you! The layers with
;; are commented out, but as you can see SpaceMacs uses the
emacs-lisp layers by default. Adding
syntax-checking layers so it's good to uncomment and enable those as well. Minus the comments, here's the updated config:
Upgrading to TypeScript
Adding TypeScript support is simple thanks to the excellent Tide plugin, which can be added and configured via the TypeScript layer. Opening a
.ts file will cause SpaceMacs to prompt you to install the layer. Just say
yes and let it go to work! There should now be proper TypeScript support along with helpful output
One problem, there's still no support for
.tsx files. In order to get that working, the
html layer needs to be enabled in the
After another restart,
.tsx files should also have appropriate highlighting, autocomplete, and type checking.
npm install -g prettier
The Prettier SpaceMacs plugin can then be installed through the MELPA package manager, and only requires a few commands to get started.
M-x package-install [RET] prettier-js [RET]
In order to get Prettier to format on save, a few configurations need to be added to the
~/.spacemacs file in the user configuration function
(defun dotspacemacs/user-config () (add-hook 'js2-mode-hook 'prettier-js-mode) (add-hook 'web-mode-hook 'prettier-js-mode) )