feat(emacs): add Json and Tailwind CSS configuration
This commit is contained in:
@@ -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 @@ Let’s 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. Let’s 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. Let’s 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, I’m 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. Let’s install its major mode then.
|
Typescript is a safer alternative to JavaScript. Let’s install its major mode then.
|
||||||
#+begin_src emacs-lisp
|
#+begin_src emacs-lisp
|
||||||
|
|||||||
Reference in New Issue
Block a user