;;; Code: ;; web mode (use-package web-mode :mode ("\\.html\\'" . web-mode) :config (setq web-mode-markup-indent-offset 2 web-mode-code-indent-offset 2 web-mode-enable-current-element-highlight t web-mode-enable-current-column-highlight t )) (add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode)) (add-to-list 'auto-mode-alist '("\\.css\\'" . web-mode)) (add-to-list 'auto-mode-alist '("\\.js\\'" . web-mode)) (add-to-list 'auto-mode-alist '("\\.php\\'" . web-mode)) (defun my-web-mode-hook () "Hooks for Web mode." (setq web-mode-markup-indent-offset 2) (setq web-mode-css-indent-offset 2) (setq web-mode-code-indent-offset 2) ) (add-hook 'web-mode-hook 'my-web-mode-hook) ;; JavaScript (require 'js2-mode) (add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode)) (add-hook 'js2-mode-hook #'js2-imenu-extras-mode) (defun my-js2-mode-hook() "Hooks for Javscript 2 Mode." (setq js-indent-level 2) (company-mode t) (company-quickhelp-mode t) ) (add-hook 'js2-mode-hook 'my-js2-mode-hook) (add-hook 'js2-mode-hook #'smartparens-mode) (push '("\\.js[x]?\\'" . js2-mode) auto-mode-alist) (define-key js2-mode-map (kbd "M-.") nil) (add-hook 'js2-mode-hook (lambda () (add-hook 'xref-backend-functions #'xref-js2-xref-backend nil t))) (setq js2-highlight-level 3) (setq js2-idle-timer-delay 0.1) ;; JS2-Refactor (use-package js2-refactor) (add-hook 'js2-mode-hook #'js2-refactor-mode) (defun keybind-setup() "Set up the keybinds." (local-set-key [f2] 'js2r-rename-var) ) (add-hook 'js2-mode-hook 'keybind-setup) ;; Typescript (defun setup-ts-mode() (interactive) (typescript-indent-level 2) (company-mode t) (company-quickhelp-mode t) ) (define-derived-mode typescriptreact-mode web-mode "TypescriptReact" "A major mode for tsx.") (use-package typescript-mode :mode (("\\.ts\\'" . typescript-mode) ("\\.tsx\\'" . typescriptreact-mode))) (add-hook 'typescript-mode-hook #'setup-ts-mode) (add-hook 'typescriptreact-mode-hook #'setup-ts-mode) (use-package eglot :ensure t :defer 3 :hook ((js2-mode typescript-mode typescriptreact-mode) . eglot-ensure)) :config (cl-pushnew '((js-mode typescript-mode typescriptreact-mode) . ("typescript-language-server" "--stdio")) eglot-server-programs :test #'equal) ;; Web goodies (autoload 'json-mode "json-mode" "Use the json-mode package to provide 'json-mode on-demand." t) ;; Ignore certain directories in projectile (with-eval-after-load 'projectile (add-to-list 'projectile-globally-ignored-directories "node_modules") (add-to-list 'projectile-project-root-files "package.json")) (provide 'web) ;;; web.el ends here