summaryrefslogtreecommitdiff
path: root/lisp/web.el
blob: b92507b4e1a2a8848638b7427c09f32be72426bf (plain)
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
84
85
86
87
88
89
90
91
92

;;; Code:

;; Web general
(defun my-web-mode-colors ()
  "Set colors for web mode."
  (set-face-background 'web-mode-current-element-highlight-face "#FFFDD0")
  (set-face-background 'web-mode-current-column-highlight-face "gray97")
  (set-face-foreground 'web-mode-current-element-highlight-face "black")
  )

(use-package web-mode
  :config (setq
		       web-mode-markup-indent-offset 2
		       web-mode-code-indent-offset 2
		       web-mode-css-indent-offset 2
           web-mode-enable-current-element-highlight t
           web-mode-enable-current-column-highlight t
           )
  (my-web-mode-colors)
  )
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
(setq-default js-indent-level 2)

(use-package flycheck
  :ensure t
  :config
  (setq-default flycheck-disabled-checkers
							  (append flycheck-disabled-checkers
											  '(javascript-jshint)))
  (setq-default flycheck-disabled-checkers
							  (append flycheck-disabled-checkers
											  '(json-jsonlist)))
  (flycheck-add-mode 'javascript-eslint 'js-mode)
  (flycheck-add-mode 'typescript-tslint 'typescript-mode)
  (add-hook 'js-mode-hook 'flycheck-mode)
  (add-hook 'typescript-mode-hook 'flycheck-mode)
  )

;; TSX
;; (use-package tree-sitter-langs
;;   :config
;;   (tree-sitter-require 'tsx)
;;   (add-to-list 'tree-sitter-major-mode-language-alist '(typescript-tsx-mode . tsx))
;;   )

(define-derived-mode typescript-tsx-mode web-mode "TypeScript[tsx]")
(add-to-list 'auto-mode-alist '("\\.tsx\\'" . typescript-tsx-mode))
(flycheck-add-mode 'javascript-eslint 'typescript-tsx-mode)
(add-hook 'typescript-tsx-mode-hook 'flycheck-mode)

; use local eslint from node_modules before global
; http://emacs.stackexchange.com/questions/21205/flycheck-with-file-relative-eslint-executable
(defun my-use-eslint-from-node-modules ()
	"Use eslint from local node_modules instead of globally."
  (let* ((root (locate-dominating-file
                (or (buffer-file-name) default-directory)
                "node_modules"))
         (eslint (and root
                      (expand-file-name "node_modules/eslint/bin/eslint.js"
                                        root))))
    (when (and eslint (file-executable-p eslint))
      (setq-local flycheck-javascript-eslint-executable eslint))))
(add-hook 'flycheck-mode-hook #'my-use-eslint-from-node-modules)

;; Package management
(use-package eglot
  :config
  (add-hook 'js-mode-hook 'js-eglot-ensure)
  (add-hook 'typescript-mode-hook 'eglot-ensure)
  (add-hook 'typescript-tsx-mode-hook 'eglot-ensure)
  (add-to-list 'eglot-server-programs '(js-mode . ("typescript-language-server" "--stdio")))
  (add-to-list 'eglot-server-programs '(typescript-mode . ("typescript-language-server" "--stdio")))
  (add-to-list 'eglot-server-programs '(typescript-tsx-mode . ("typescript-language-server" "--stdio")))
  )
(defun js-eglot-ensure()
  "Ensure eglot mode, unless we are in json mode"
  (when (string= (file-name-extension buffer-file-name) "js")
    (eglot-ensure))
  )

;; CSS eldoc
(use-package css-eldoc
  :ensure t
  :commands turn-on-css-eldoc
  :config
  (add-hook 'css-mode-hook 'turn-on-css-eldoc)
  )


(provide 'web)
;;; web.el ends here