hi, 各位emacs 道友，最近做项目使用到最新 Angular (14) 做项目开发。我的电脑是mac 12.5.1 。 使用的nodejs 版本是 16.17.0。 按lsp-mode 把所有支持 typescript 和 angular 各种后台服务包都已下载了。但是每次编译的时候会出现如下情况。
init-web.el 配置如下：
(use-package web-mode :init (progn (setq web-mode-enable-auto-indentation t) (setq web-mode-enable-auto-pairing t) (sp-with-modes '(web-mode) (sp-local-pair “%” “%” :unless '(sp-in-string-p) :post-handlers '(((lambda (&rest _ignored) (just-one-space) (save-excursion (insert " “))) “SPC” “=” “#”))) (sp-local-tag “%” “<% " " %>”) (sp-local-tag “=” “<%= " " %>”) (sp-local-tag “#” “<%# " " %>”))) :config (progn ;; (add-hook 'web-mode-hook ;; (lambda () ;; (unless (featurep 'company-jstags) ;; (require 'company-jstags) ;; (my/company-jstags-auto-setup) ;; )) ;; ) (web-mode-set-content-type “jsx”) (web-mode-set-engine “vue”)) :mode ((”\.nvue$" . web-mode) (“\.xml$” . web-mode) (“\.vue$” . web-mode) ;; (“\.tsx$” . web-mode) ;; (“\.jsx$” . web-mode) ) :bind (:map web-mode-map (“C-c h” . web-mode-fold-or-unfold)))
(defun my/fun-web-mode-trigger-auto-indent () (interactive) (if (equal web-mode-enable-auto-indentation nil) (setq web-mode-enable-auto-indentation t) (setq web-mode-enable-auto-indentation nil)))
(provide 'init-web)
;; 设置保存后自动格式化代码 ;; (use-package prettier-js ;; :defer 3 ;; :hook ((css-mode web-mode typescript-mode js2-mode json-mode) . prettier-js-mode))
;; Handier way to add modes to auto-mode-alist
(defun add-auto-mode (mode &rest patterns)
“Add entries to auto-mode-alist' to use MODE’ for all given file `PATTERNS’.”
(dolist (pattern patterns)
(add-to-list 'auto-mode-alist (cons pattern mode))))
(defun add-interpreter-mode (mode &rest patterns)
“Add entries to interpreter-mode-alist' to use MODE’ for all given file `PATTERNS’.”
(dolist (pattern patterns)
(add-to-list 'interpreter-mode-alist (cons pattern mode))))
(add-auto-mode ‘text-mode "TAGS\’" “\.ctags\'”)
(add-auto-mode 'sh-mode “\.bash\(_profile\|_history\|rc\.local\|rc\)?" "\\.z?sh” “\.env$”)
;; {{ web/html (add-auto-mode 'web-mode “\.\(cmp\|app\|page\|component\|wp\|vue\|tmpl\|php\|module\|inc\|hbs\|tpl\|[gj]sp\|as[cp]x\|erb\|mustache\|djhtml\|ftl\|[rp]?html?\|xul?\|eex?\|xml?\|jst\|ejs\|erb\|rbxlx\)$”) ;; }}
(defun my/add-company-jstag () (unless (featurep 'company-jstags) (require 'company-jstags) (my/company-jstags-auto-setup)))
(add-hook 'js-mode-hook #'my/add-company-jstag) (add-hook 'js2-mode-hook #'my/add-company-jstag) (add-hook 'web-mode-hook #'my/add-company-jstag) (add-hook 'markdown-mode-hook #'my/add-company-jstag) (add-hook 'typescript-mode-hook #'my/add-company-jstag)
;; {{js (add-auto-mode 'js-mode “\.ja?son$” “\.pac$” “\.jshintrc$”)
;; JSX ;; (add-auto-mode ‘rjsx-mode ;; "\.jsx\’" ;; “\.tsx\'” ;; “components\/.\.js\'" ;; "components\/.\.ts\'”)
;; (add-auto-mode 'typescript-mode ;; “\.ts$”)
(use-package typescript-mode :defer 3 :mode “\.ts[x]?\'” :init ;; 设置缩进两个空格 (setq typescript-indent-level 2))
;; 添加结构化 AST 配置 (use-package tree-sitter :after typescript-mode :hook (typescript-mode . tree-sitter-hl-mode))
(use-package tree-sitter-langs :after tree-sitter :config (tree-sitter-require 'tsx) (add-to-list 'tree-sitter-major-mode-language-alist '(typescript-mode . tsx)))
(add-auto-mode ‘snippet-mode "\.yasnippet\’")
(cond ((not no-memory) ;; javascript (add-auto-mode ‘js2-mode "\.js\(\.erb\)?\’“) ;; JSX ;; (add-auto-mode ‘rjsx-mode ;; "\.jsx\’” ;; “components\/.*\.js\'”)
;; mock file (add-auto-mode ‘js-mode "\.mock.js\’“) (add-interpreter-mode 'js2-mode “node”)) (t (add-auto-mode ‘js-mode "\.js\(\.erb\)?\’” “\.babelrc\'”)))
;; python (add-interpreter-mode 'python-mode “python”) ;;(add-interpreter-mode ‘python-mode "\.py\’")
(provide 'init-file-type)
注意：typescript 文件编辑可以正常显示，但是对于NgModel就不可以了。