Split Javascript and web-mode config into two files

init.el

@@ -69,6 +69,7 @@
 (load "$HOME/.emacs.d/languages/elisp.el" 'f 't)
 (load "$HOME/.emacs.d/languages/ruby.el" 'f 't)
 (load "$HOME/.emacs.d/languages/web.el" 'f 't)
+(load "$HOME/.emacs.d/languages/javascript.el" 'f 't)
 (load "$HOME/.emacs.d/languages/elixir.el" 'f 't)
 (load "$HOME/.emacs.d/languages/erlang.el" 'f 't)
 (load "$HOME/.emacs.d/languages/sh.el" 'f 't)
@@ -86,7 +87,7 @@
 		("85e6bb2425cbfeed2f2b367246ad11a62fb0f6d525c157038a0d0eaaabc1bfee" "3380a2766cf0590d50d6366c5a91e976bdc3c413df963a0ab9952314b4577299" "cea3ec09c821b7eaf235882e6555c3ffa2fd23de92459751e18f26ad035d2142" "8ffdc8c66ceeaf7921f4510a70d808f01b303e6b4d177c947b442e80d4228678" "b0c5c6cc59d530d3f6fbcfa67801993669ce062dda1435014f74cafac7d86246" "ad16a1bf1fd86bfbedae4b32c269b19f8d20d416bd52a87cd50e355bf13c2f23" "d9dab332207600e49400d798ed05f38372ec32132b3f7d2ba697e59088021555" "bc4c89a7b91cfbd3e28b2a8e9e6750079a985237b960384f158515d32c7f0490" "99c86852decaeb0c6f51ce8bd46e4906a4f28ab4c5b201bdc3fdf85b24f88518" "a85e40c7d2df4a5e993742929dfd903899b66a667547f740872797198778d7b5" default)))
  '(package-selected-packages
 	 (quote
-    (planet-theme cider clojure-mode erlang rspec-mode dap-mode lsp-ui company-lsp lsp-mode nginx-mode gitignore-mode js2-mode keyfreq company-web visual-regexp enh-ruby-mode counsel-projectile counsel ivy flycheck-rust flycheck hydra solarized-theme company-ansible alchemist column-enforce-mode yaml-mode ansible dockerfile-mode ruby-end dash-at-point base16-theme exec-path-from-shell))))
+		(polymodes planet-theme cider clojure-mode erlang rspec-mode dap-mode lsp-ui company-lsp lsp-mode nginx-mode gitignore-mode js2-mode keyfreq company-web visual-regexp enh-ruby-mode counsel-projectile counsel ivy flycheck-rust flycheck hydra solarized-theme company-ansible alchemist column-enforce-mode yaml-mode ansible dockerfile-mode ruby-end dash-at-point base16-theme exec-path-from-shell))))
 (custom-set-faces
  ;; custom-set-faces was added by Custom.
  ;; If you edit it by hand, you could mess it up, so be careful.

languages/javascript.el

@@ -0,0 +1,25 @@
+(use-package js2-mode
+  :requires (web-mode company-web lsp)
+  :ensure t)
+
+;; Use js2-mode for javascript editing
+(add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))
+(add-to-list 'auto-mode-alist '("\\.json\\'" . js2-mode))
+
+;; Use js2-mode for typescript editing
+(add-to-list 'auto-mode-alist '("\\.ts\\'" . js2-mode))
+
+;; Language Server Protocol is used for completion
+(add-hook 'js2-mode-hook 'lsp)
+
+(defun activate-js2-mode ()
+	"JS2 mode overrides."
+	(set-indent 2)
+	(column-enforce-n 80)
+	(setq-local js2-basic-offset 2)
+
+  ;; "Company list override."
+  (add-to-list (make-local-variable 'company-backends)
+               '(company-yasnippet company-lsp)))
+
+(add-hook 'js2-mode-hook 'activate-js2-mode)

languages/web.el

@@ -1,33 +1,30 @@
 (use-package web-mode
   :ensure t)
 
-(use-package js2-mode
-  :requires (web-mode company-web lsp)
-  :ensure t)
-
-;; Use js2-mode for javascript editing
-(add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))
-(add-to-list 'auto-mode-alist '("\\.json\\'" . js2-mode))
-
-;;; ERB editing
-(add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode))
-
 ;; Eex Web mode
 (add-to-list 'auto-mode-alist '("\\.eex\\'" . web-mode))
 
+;; Vue
+(add-to-list 'auto-mode-alist '("\\.vue\\'" . web-mode))
+
+;; React Typescript
+(add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))
 
 (setq web-mode-extra-auto-pairs
       '(("eex"  . (("<%" "%>")))
         ("erb"  . (("<%" "%>")
                    ("beg" "end")))))
 
-;; Language Server Protocol is used for completion
+(defun activate-web-mode ()
-(add-hook 'js2-mode-hook 'lsp)
+	"Web mode overrides."
+	;; Indent web mode scripts by 2
+	(setq web-mode-script-padding 2)
+	(setq web-mode-code-indent-offset 2)
 
-(defun activate-js2-mode ()
-  "Company list override."
   (add-to-list (make-local-variable 'company-backends)
-               '(company-yasnippet company-lsp)))
+               '(company-yasnippet company-lsp))
 
-(add-hook 'js2-mode-hook 'activate-js2-mode)
+	(when (string-match-p "vue" (buffer-file-name))
-(add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))
+		(lsp)))
+
+(add-hook 'web-mode-hook 'activate-web-mode)

themes/themes.el

@@ -26,6 +26,13 @@
     (enable-theme 'planet)))
 
 ;; Set font face
+;;;;;;;;;;;;;;;;;;;;;; Font configuration ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+(defun set-font-size (size)
+  "Set font SIZE to X px."
+  (interactive "NNew font size: ")
+  (set-face-attribute 'default nil :font (format "Hasklig %d" size))
+  (set-face-attribute 'mode-line nil :font (format "Hasklig %d" size)))
+
 (set-font-size 16)
 
 ;; Remove ugly black line