blob: a45bd376ab800f5fa22213ee26c3a1e06901e933 (
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
;;; prog-webdev.el --- Web Development Packages and Settings -*- lexical-binding: t; coding: utf-8; -*-
;; Author: Craig Jennings <c@cjennings.net>
;;
;;; Commentary:
;; Open a project file and Emacs selects the right helper:
;; - *.json buffers drop into json-mode for quick structural edits.
;; - *.js buffers jump into js2-mode for linty feedback.
;; - Mixed HTML templates land in web-mode which chains Tide and CSS Eldoc.
;;
;; Workflow:
;; - Hit C-RET in web-mode to ask for completions; the command routes to Tide,
;; company-css, or dabbrev based on the language at point.
;; - Eldoc messages come from `cj/eldoc-web-mode`, so keeping point over JS, CSS,
;; or markup swaps the doc source automatically.
;; - New web buffers call `cj/setup-web-mode-mixed`, enabling Tide so goto-definition
;; and rename are ready without extra setup.
;;; Code:
;; --------------------------------- JSON Mode ---------------------------------
;; mode for editing JavaScript Object Notation (JSON) data files
(use-package json-mode
:mode ("\\.json\\'" . json-mode)
:defer .5)
;; ---------------------------------- JS2 Mode ---------------------------------
;; javascript editing mode
(use-package js2-mode
:mode ("\\.js\\'" . js2-mode)
:defer .5)
;; --------------------------------- CSS Eldoc ---------------------------------
;; CSS info in the echo area
(use-package css-eldoc
:defer .5)
;; ------------------------------------ Tide -----------------------------------
;; typescript interactive development environment
(use-package tide
:defer .5)
(defun cj/activate-tide ()
"Activate Tide mode for TypeScript development.
Calls Tide's setup, enables `eldoc-mode, and activates identifier highlighting."
(interactive)
(tide-setup)
(eldoc-mode 1)
(tide-hl-identifier-mode 1))
;; ---------------------------------- Web Mode ---------------------------------
;; major mode for editing web templates
(use-package web-mode
:defer .5
:after (tide css-eldoc)
:custom
(web-mode-enable-current-element-highlight t)
:bind
([(control return)] . cj/complete-web-mode)
:mode
(("\\.html?$" . cj/setup-web-mode-mixed)))
(defun cj/complete-web-mode ()
"Provide context-aware completion in `web-mode' buffers.
Determines the language at point (JavaScript, CSS, or markup)
and invokes the appropriate completion backend:
- JavaScript: uses `company-tide'
- CSS: uses `company-css'
- Other markup: uses `company-dabbrev-code'
This function is typically bound to \\[cj/complete-web-mode] in
`web-mode' buffers to provide intelligent completions based on
the current context."
(interactive)
(let ((current-scope (web-mode-language-at-pos (point))))
(cond ((string-equal "javascript" current-scope)
(company-tide 'interactive))
((string-equal "css" current-scope)
(company-css 'interactive))
(t
(company-dabbrev-code 'interactive)))))
(defun cj/eldoc-web-mode ()
"Provide context-aware eldoc documentation in `web-mode' buffers.
Return appropriate documentation based on the language at point:
- JavaScript: uses `tide-eldoc-function' for TypeScript/JavaScript docs
- CSS: uses `css-eldoc-function' for CSS property documentation
- Other markup: returns nil (no documentation)
This function is designed to be used as the buffer-local value
of `eldoc-documentation-function' in `web-mode' buffers with
mixed content."
(let ((current-scope (web-mode-language-at-pos (point))))
(cond ((string-equal "javascript" current-scope)
(tide-eldoc-function))
((string-equal "css" current-scope)
(css-eldoc-function))
(t
nil))))
(defun cj/setup-web-mode-mixed ()
"Set up `web-mode' with Tide and context-aware eldoc support.
Enable `web-mode' for the current buffer and configure it for
mixed HTML/JavaScript/CSS content. Activate Tide for JavaScript
support and configure eldoc to use `cj/eldoc-web-mode' for
context-aware documentation.
This function is typically used as an auto-mode entry point for
HTML files that contain embedded JavaScript and CSS."
(web-mode)
(cj/activate-tide)
(setq-local eldoc-documentation-function #'cj/eldoc-web-mode))
(provide 'prog-webdev)
;;; prog-webdev.el ends here.
|
