From 092304d9e0ccc37cc0ddaa9b136457e56a1cac20 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Sun, 12 Oct 2025 11:47:26 -0500 Subject: changing repositories --- modules/prog-webdev.el | 120 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 modules/prog-webdev.el (limited to 'modules/prog-webdev.el') diff --git a/modules/prog-webdev.el b/modules/prog-webdev.el new file mode 100644 index 00000000..a45bd376 --- /dev/null +++ b/modules/prog-webdev.el @@ -0,0 +1,120 @@ +;;; prog-webdev.el --- Web Development Packages and Settings -*- lexical-binding: t; coding: utf-8; -*- +;; Author: Craig Jennings +;; +;;; 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. -- cgit v1.2.3