20210215 - Emacs config for typescript and CRA

init.el

(eval-and-compile
  (customize-set-variable
   'package-archives '(("org" . "https://orgmode.org/elpa/")
                       ("melpa" . "https://melpa.org/packages/")
                       ("gnu" . "https://elpa.gnu.org/packages/")))
  (package-initialize)
  (unless (package-installed-p 'use-package)
    (package-refresh-contents)
    (package-install 'use-package)))



;; IDO
(setq ido-enable-flex-matching t)
(setq ido-everywhere t)
(ido-mode 1)


;; Built-in project package
(require 'project)
(global-set-key (kbd "C-x p f") #'project-find-file)


;; Preferred font
;; Load pragmatapro-lig.el
;;(add-to-list 'load-path "/home/luke/emacs/custom-packages/emacs-pragmatapro-ligatures")
;;(require 'pragmatapro-lig)
;;(add-to-list 'default-frame-alist '(font . "PragmataPro Mono Liga-10"))
;; Enable pragmatapro-lig-mode for specific modes
;;(add-hook 'text-mode-hook 'pragmatapro-lig-mode)
;;(add-hook 'prog-mode-hook 'pragmatapro-lig-mode)
;; or globally
;;(pragmatapro-lig-global-mode)
;;(setq line-spacing 0)

;; General settings
(delete-selection-mode t)
(setq gc-cons-threshold 100000000)
(setq read-process-output-max (* 1024 1024)) ;; 1mb
(setq auto-save-default nil)
(setq make-backup-files nil)
(setq create-lockfiles nil)
(global-display-line-numbers-mode)

(use-package exec-path-from-shell
  :ensure t
  :config
  (exec-path-from-shell-initialize))


(use-package which-key
  :ensure t
  :config
  (which-key-mode))



(use-package expand-region
  :ensure t
  :bind (("C-=" . er/expand-region)
	 ("C--" . er/contract-region)))


;; json-mode
(use-package json-mode
  :ensure t)


;; web-mode
(setq web-mode-markup-indent-offset 2)
(setq web-mode-code-indent-offset 2)
(setq web-mode-css-indent-offset 2)
(use-package web-mode
  :ensure t
  :mode (("\\.js\\'" . web-mode)
	 ("\\.jsx\\'" .  web-mode)
	 ("\\.ts\\'" . web-mode)
	 ("\\.tsx\\'" . web-mode)
	 ("\\.html\\'" . web-mode))
  :commands web-mode)


;; company
(setq company-minimum-prefix-length 1
      company-idle-delay 0.0)
(use-package company
  :ensure t
  :config (global-company-mode t))


;; magit
(use-package magit
  :ensure t
  :bind (
	 ("C-x g" . magit-status)))


;; theme
(use-package modus-operandi-theme
  :ensure t
  :config (load-theme 'modus-operandi t))


;; lsp-mode
(setq lsp-log-io nil) ;; Don't log everything = speed
(setq lsp-keymap-prefix "C-c l")
(setq lsp-restart 'auto-restart)
(setq lsp-ui-sideline-show-diagnostics t)
(setq lsp-ui-sideline-show-hover t)
(setq lsp-ui-sideline-show-code-actions t)

(use-package lsp-mode
  :ensure t
  :hook (
	 (web-mode . lsp-deferred)
	 (lsp-mode . lsp-enable-which-key-integration)
	 )
  :commands lsp-deferred)


(use-package lsp-ui
  :ensure t
  :commands lsp-ui-mode)


(defun enable-minor-mode (my-pair)
  "Enable minor mode if filename match the regexp.  MY-PAIR is a cons cell (regexp . minor-mode)."
  (if (buffer-file-name)
      (if (string-match (car my-pair) buffer-file-name)
	  (funcall (cdr my-pair)))))

(use-package prettier-js
  :ensure t)
(add-hook 'web-mode-hook #'(lambda ()
                             (enable-minor-mode
                              '("\\.jsx?\\'" . prettier-js-mode))
			     (enable-minor-mode
                              '("\\.tsx?\\'" . prettier-js-mode))))

Excellent! Excellent! So great to share a simple config. Most emacs tutorials are extremely difficult to follow because whatever they are trying to show is enmeshed in another complex configuration, and it's difficult to parse out the relevant parts. Let alone apply that to your own existing already complex configuration.

I've been using emacs for 35 years and every ten years or so I have to throw out my .emacs.d, (which is probably full of all sorts of code I grabbed from somewhere and don't understand), and start over. Most recently 7 or 8 years ago I adopted Prelude, which has served me well. But a year ago I tried to get lsp working for tsx and couldn't get it to work satisfactorily. Amazing that your simple config does it all.

So this is one of those times. I started with your config and copied stuff I needed from prelude and have reduced my emacs startup time from 1 minute to < 5 seconds. Thanks!

Agree with the latest comments. This is more like a .vimrc my eyes can read.

@chetstone - glad this was useful for you :)! I've had complex, verbose, long configs in the past and this was my stripped-back, "what do I actually need?" version.

@EstebanMarin - Yeah init.el's can be really hard to read sometimes. Happy to provide something that's easier to digest.

@Lukewh I tried to use this config as ".emacs" but the indentation doesn't seem to work. Prettier formats the code nicely but entering a newline would mess up the indentation. Do you have other configs that I missed? Thank you