about summary refs log tree commit diff
path: root/emacs/.emacs.d/wpc/wpc-javascript.el
blob: 3de9fff3aaa58ef53bc9ea41034237be00853013 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
;; wpc-javascript.el --- My Javascript preferences -*- lexical-binding: t -*-
;; Author: William Carroll <wpcarro@gmail.com>

;;; Commentary:
;; This module hosts my Javascript tooling preferences.  This also includes
;; tooling for TypeScript and other frontend tooling.  Perhaps this module will
;; change names to more accurately reflect that.
;;
;; Depends
;; - yarn global add prettier

;;; Code:

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Configuration
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;; Constants
(defconst wpc/js-hooks
  '(js-mode-hook web-mode-hook typescript-mode-hook js2-mode-hook rjsx-mode-hook)
  "All of the commonly used hooks for Javascript buffers.")

(defconst wpc/frontend-hooks
  (-insert-at 0 'css-mode-hook wpc/js-hooks)
  "All of the commonly user hooks for frontend development.")


;; frontend indentation settings
(setq typescript-indent-level 2
      js-indent-level 2
      css-indent-offset 2)

;; Flow for Javascript
(use-package add-node-modules-path
  :config
  (general-add-hook wpc/js-hooks #'add-node-modules-path))

(use-package web-mode
  :mode "\\.html\\'"
  :config
  (setq web-mode-css-indent-offset 2)
  (setq web-mode-code-indent-offset 2)
  (setq web-mode-markup-indent-offset 2))

;; JSX highlighting
(use-package rjsx-mode
  :mode "\\.js\\'"
  :config
  (general-unbind rjsx-mode-map "<" ">" "C-d")
  (general-nmap
    :keymaps 'rjsx-mode-map
    "K" #'flow-minor-type-at-pos)
  (setq js2-mode-show-parse-errors nil
        js2-mode-show-strict-warnings nil))

(progn
  (defun tide/setup ()
    (interactive)
    (tide-setup)
    (flycheck-mode 1)
    (setq flycheck-check-syntax-automatically '(save mode-enabled))
    (eldoc-mode 1)
    (tide-hl-identifier-mode 1)
    (company-mode 1))
  (use-package tide
    :config
    (add-hook 'typescript-mode-hook #'tide/setup))
  (require 'web-mode)
  (add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))
  (add-hook 'web-mode-hook
            (lambda ()
              (when (string-equal "tsx" (f-ext buffer-file-name))
                (tide/setup))))
  (flycheck-add-mode 'typescript-tslint 'web-mode))

;; JS autoformatting
(use-package prettier-js
  :after (rjsx-mode)
  :config
  (general-add-hook wpc/frontend-hooks #'prettier-js-mode))

(provide 'wpc-javascript)
;;; wpc-javascript.el ends here