feat(emacs): add Json and Tailwind CSS configuration

This commit is contained in:
2025-11-01 11:38:58 +01:00
parent 5c28ff6d39
commit 9d58977c68

View File

@@ -1413,6 +1413,7 @@ languages in the same buffer, mainly HTML, CSS, and JavaScript.
("\\.svelte\\'" . web-mode) ("\\.svelte\\'" . web-mode)
("\\.ctp\\'" . web-mode) ("\\.ctp\\'" . web-mode)
("\\.djhtml\\'" . web-mode) ("\\.djhtml\\'" . web-mode)
("\\.ftl\\'" . web-mode)
("\\.vue\\'" . web-mode)) ("\\.vue\\'" . web-mode))
:config :config
(setopt web-mode-markup-indent-offset 2 (setopt web-mode-markup-indent-offset 2
@@ -1460,6 +1461,7 @@ Auto-completion for ~emmet-mode~, ~html-mode~, and ~web-mode~.
(use-package astro-ts-mode (use-package astro-ts-mode
:straight (:build t) :straight (:build t)
:defer t :defer t
:mode "\\.astro\\'"
:init :init
(mapc #'treesit-install-language-grammar '(astro css tsx))) (mapc #'treesit-install-language-grammar '(astro css tsx)))
#+end_src #+end_src
@@ -1475,6 +1477,7 @@ Lets customize a bit the built-in CSS mode.
:hook (scss-mode . prettier-js-mode) :hook (scss-mode . prettier-js-mode)
:init :init
(put 'css-indent-offset 'safe-local-variable #'integerp) (put 'css-indent-offset 'safe-local-variable #'integerp)
:config (setopt css-indent-offset 2)
:general :general
(phundrak/major-leader-key (phundrak/major-leader-key
:keymaps 'css-mode-map :keymaps 'css-mode-map
@@ -1530,6 +1533,18 @@ activate when I open ~.less~ files by default. Lets fix that.
"l" '(:keymap lsp-command-map :which-key "lsp"))) "l" '(:keymap lsp-command-map :which-key "lsp")))
#+end_src #+end_src
I also use from time to time TailwindCSS. Lets add its LSP
configuration.
#+begin_src emacs-lisp
(use-package lsp-tailwindcss
:defer t
:after lsp
:init (setq lsp-tailwindcss-add-on-mode t)
:straight (lsp-tailwindcss :type git
:host github
:repo "merrickluo/lsp-tailwindcss"))
#+end_src
**** Javascript **** Javascript
~javascript-mode~ is meh at best, while ~rjsx-mode~ (Real JSX) is much ~javascript-mode~ is meh at best, while ~rjsx-mode~ (Real JSX) is much
better: it supports both JavaScript and ~.jsx~ files for React and better: it supports both JavaScript and ~.jsx~ files for React and
@@ -1608,6 +1623,19 @@ And finally, here is a formatter for JavaScript.
(setq prettier-js-args '("--single-quote" "--jsx-single-quote"))) (setq prettier-js-args '("--single-quote" "--jsx-single-quote")))
#+end_src #+end_src
**** Json
My configuration for Json is quite short, Im just defaulting to
Emacs built-in tree-sitter mode for any =.json= file and reducing the
indentation to 2 spaces for any file using a mode from the built-in
package =js=.
#+begin_src emacs-lisp
(use-package js
:straight (:type built-in)
:mode ("\\.json\\'" . json-ts-mode)
:config (setopt js-indent-level 2))
#+end_src
**** Typescript **** Typescript
Typescript is a safer alternative to JavaScript. Lets install its major mode then. Typescript is a safer alternative to JavaScript. Lets install its major mode then.
#+begin_src emacs-lisp #+begin_src emacs-lisp