;;; Code: ;; Web general (defun my-web-mode-colors () "Set colors for web mode." ;; (set-face-background 'web-mode-current-element-highlight-face "#FFFDD0") ;; (set-face-background 'web-mode-current-column-highlight-face "gray97") ;; (set-face-foreground 'web-mode-current-element-highlight-face "black") ) (use-package web-mode :config (setq web-mode-markup-indent-offset 2 web-mode-code-indent-offset 2 web-mode-css-indent-offset 2 web-mode-enable-current-element-highlight t web-mode-enable-current-column-highlight t ) (my-web-mode-colors) ) (add-to-list 'auto-mode-alist '("\\.html?\\'" . html-mode)) (setq-default js-indent-level 2) (use-package flycheck :ensure t :config (setq-default flycheck-disabled-checkers (append flycheck-disabled-checkers '(javascript-jshint))) (setq-default flycheck-disabled-checkers (append flycheck-disabled-checkers '(json-jsonlist))) (flycheck-add-mode 'javascript-eslint 'js-mode) (flycheck-add-mode 'typescript-tslint 'typescript-mode) (add-hook 'js-mode-hook 'flycheck-mode) (add-hook 'typescript-mode-hook 'flycheck-mode) ) ;; TSX ;; (use-package tree-sitter-langs ;; :config ;; (tree-sitter-require 'tsx) ;; (add-to-list 'tree-sitter-major-mode-language-alist '(typescript-tsx-mode . tsx)) ;; ) (define-derived-mode typescript-tsx-mode web-mode "TypeScript[tsx]") (add-to-list 'auto-mode-alist '("\\.tsx\\'" . typescript-tsx-mode)) (flycheck-add-mode 'javascript-eslint 'typescript-tsx-mode) (add-hook 'typescript-tsx-mode-hook 'flycheck-mode) ; use local eslint from node_modules before global ; http://emacs.stackexchange.com/questions/21205/flycheck-with-file-relative-eslint-executable (defun my-use-eslint-from-node-modules () "Use eslint from local node_modules instead of globally." (let* ((root (locate-dominating-file (or (buffer-file-name) default-directory) "node_modules")) (eslint (and root (expand-file-name "node_modules/eslint/bin/eslint.js" root)))) (when (and eslint (file-executable-p eslint)) (setq-local flycheck-javascript-eslint-executable eslint)))) (add-hook 'flycheck-mode-hook #'my-use-eslint-from-node-modules) ;; Package management (use-package eglot :config (add-hook 'js-mode-hook 'js-eglot-ensure) (add-hook 'typescript-mode-hook 'eglot-ensure) (add-hook 'typescript-tsx-mode-hook 'eglot-ensure) (add-to-list 'eglot-server-programs '(js-mode . ("typescript-language-server" "--stdio"))) (add-to-list 'eglot-server-programs '(typescript-mode . ("typescript-language-server" "--stdio"))) (add-to-list 'eglot-server-programs '(typescript-tsx-mode . ("typescript-language-server" "--stdio"))) ) (defun js-eglot-ensure() "Ensure eglot mode, unless we are in json mode" (when (string= (file-name-extension buffer-file-name) "js") (eglot-ensure)) ) ;; CSS eldoc (use-package css-eldoc :ensure t :commands turn-on-css-eldoc :config (add-hook 'css-mode-hook 'turn-on-css-eldoc) ) (provide 'web) ;;; web.el ends here