Skip to main content

Emacs TypeScript Development

Emacs Configuration for Typescript


In order to comfortably develop on Node, React or Angular projects with Emacs, TIDE is a good solution.
We have TypeScript code highlight (that is the minimum!) and code completion based on the codebase (not only on locally defined and builtins)
In order to achieve that:
  • Install Emacs (24+)
  • Install Node
  • Install Typescript (which will provide "tsserver")
  • Install TIDE and some usefull dependencies
  • Configure Emacs to use all those
Node is then installed in "/home/mihamina/Apps/node-v12.18.0-linux-x64/bin": you should add it to your PATH.
Installing Typescript is done with:
npm install --save typescript @types/browserify
After that, "tsserver" will be in "/home/mihamina/node_modules/.bin"
Then comes the installation of TIDE: With the Emacs package manager, M-x package-install, install "tide". Do the same for "web-mode", "flycheck", "company" "js2-mode" and "json-mode".

Finally comes the Emacs Configuration.
I paste my whole configuration, feel free to remove what you dont like.


(require 'package)
(setq package-check-signature  nil)
(package-initialize)
(add-to-list 'package-archives '("gnu"          . "https://elpa.gnu.org/packages/") t)
(add-to-list 'package-archives '("melpa"        . "https://melpa.org/packages/") t)
(add-to-list 'package-archives '("melpa-stable" . "https://stable.melpa.org/packages/") t)

;;disable splash screen and startup message

(show-paren-mode t)
(setq inhibit-startup-message t) 
(setq initial-scratch-message nil)
(custom-set-variables
 ;; custom-set-variables was added by Custom.
 ;; If you edit it by hand, you could mess it up, so be careful.
 ;; Your init file should contain only one such instance.
 ;; If there is more than one, they won't work right.
 '(package-selected-packages (quote (json-mode js2-mode company web-mode tide flycheck))))
(custom-set-faces
 ;; custom-set-faces was added by Custom.
 ;; If you edit it by hand, you could mess it up, so be careful.
 ;; Your init file should contain only one such instance.
 ;; If there is more than one, they won't work right.
 )


;; /home/mihamina/node_modules/.bin
(add-to-list 'exec-path "/home/mihamina/node_modules/.bin")
(add-to-list 'exec-path "/home/mihamina/Apps/node-v12.18.0-linux-x64/bin")

(defun setup-tide-mode ()
  (interactive)
  ;;  (setq tide-tsserver-process-environment '("TSS_LOG=-level verbose -file /tmp/tss.log"))
  (tide-setup)
  (if (file-exists-p (concat tide-project-root "node_modules/typescript/bin/tsserver"))
    (setq tide-tsserver-executable "node_modules/typescript/bin/tsserver"))
  (flycheck-mode +1)
  (setq flycheck-check-syntax-automatically '(save mode-enabled))
  (eldoc-mode +1)
  (tide-hl-identifier-mode +1)
  (setq tide-format-options '(:indentSize 2 :tabSize 2 :insertSpaceAfterFunctionKeywordForAnonymousFunctions t :placeOpenBraceOnNewLineForFunctions nil))
  (local-set-key (kbd "C-c d") 'tide-documentation-at-point)
  (company-mode +1)
  (setq company-minimum-prefix-length 1))

(require 'use-package)
(use-package tide
  :ensure t
  :config
  (progn
    (company-mode +1)
    ;; aligns annotation to the right hand side
    (setq company-tooltip-align-annotations t)
    (add-hook 'typescript-mode-hook #'setup-tide-mode)
    (add-to-list 'auto-mode-alist '("\\.ts\\'" . typescript-mode))
  ))

;; use web-mode + tide-mode for javascript instead
(use-package js2-mode
  :ensure t
  :config
  (progn
    (add-hook 'js2-mode-hook #'setup-tide-mode)
    ;; configure javascript-tide checker to run after your default javascript checker
    (setq js2-basic-offset 2)
    (flycheck-add-next-checker 'javascript-eslint 'javascript-tide 'append)
    (add-to-list 'interpreter-mode-alist '("node" . js2-mode))
    (add-to-list 'auto-mode-alist '("\\.js\\'" . js2-mode))))

;; (add-to-list 'interpreter-mode-alist '("node" . js2-mode))

(use-package json-mode
  :ensure t
  :config
  (progn
    (flycheck-add-mode 'json-jsonlint 'json-mode)
    (add-hook 'json-mode-hook 'flycheck-mode)
    (setq js-indent-level 2)
    (add-to-list 'auto-mode-alist '("\\.json" . json-mode))))

(use-package web-mode
  :ensure t
  :config
  (progn
    (add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))
    (add-to-list 'auto-mode-alist '("\\.js"     . web-mode))
    (add-to-list 'auto-mode-alist '("\\.html"   . web-mode))
    ;; this magic incantation fixes highlighting of jsx syntax in .js files
    (setq web-mode-content-types-alist
          '(("jsx" . "\\.js[x]?\\'")))
    (add-hook 'web-mode-hook
              (lambda ()
                (setq web-mode-code-indent-offset 2)
                (when (string-equal "tsx" (file-name-extension buffer-file-name))
                  (setup-tide-mode))
                (when (string-equal "jsx" (file-name-extension buffer-file-name))
                  (setup-tide-mode))
                (when (string-equal "js" (file-name-extension buffer-file-name))
                  (progn
                    (setup-tide-mode)
                    (with-eval-after-load 'flycheck
                      (flycheck-add-mode 'typescript-tslint 'web-mode)
                      (flycheck-add-mode 'javascript-tide 'web-mode))))))
    ))
    ;; enable typescript-tslint checker
    
  

Popular posts from this blog

npm run build base-href

Using NPM to specify base-href When building an Angular application, people usually use "ng" and pass arguments to that invocation. Typically, when wanting to hard code "base-href" in "index.html", one will issue: ng build --base-href='https://ngx.rktmb.org/foo' I used to build my angular apps through Bamboo or Jenkins and they have a "npm" plugin. I got the habit to build the application with "npm run build" before deploying it. But the development team once asked me to set the "--base-href='https://ngx.rktmb.org/foo'" parameter. npm run build --base-href='https://ngx.rktmb.org/foo did not set the base href in indext.html After looking for a while, I found https://github.com/angular/angular-cli/issues/13560 where it says: You need to use −− to pass arguments to npm scripts. This did the job! The command to issue is then: npm run build -- --base-href='https://ngx.rktmb.org/foo&

Emacs Pulumi LSP

Install Pulumi Emacs Mode The source code is on https://github.com/pulumi/pulumi-lsp. At the very bottom of the page are the instructions on how to install. You Need to have make installed. $ make install emacs-client mkdir -p ./bin go build -ldflags "-X github.com/pulumi/pulumi-lsp/sdk/version.Version=v0.2.3-6-gec49054" -o ./bin -p 10 ./cmd/... go: downloading github.com/pulumi/pulumi/sdk/v3 v3.53.1 ... ... ... go install -ldflags "-X github.com/pulumi/pulumi-lsp/sdk/version.Version=v0.2.3-6-gec49054" ./cmd/... mkdir -p editors/emacs/bin cd editors/emacs && emacs -Q --batch --eval "(progn (setq package-user-dir \"$(pwd)/bin\" \ package-archives '((\"melpa\" . \"https://melpa.org/packages/\") \

emacs29 intelephense

Emacs 29 and PHP Intelephense I use to use Emacs and PHP Intelephense for PHP development. I recently upgraded to Emacs 29 and PHP Intelephense stopped working. I found a solution on Reddit Based on that, I rewrote my .emacs file to use eglot instead of lsp-mode, and this is the result. (use-package eglot :ensure t) (add-hook 'php-mode-hook 'eglot-ensure) (use-package php-mode :ensure t :mode ("\\.php\\'" . php-mode)) (add-to-list 'auto-mode-alist '("\\.php$" . php-mode)) (provide 'lang-php) (use-package company :ensure t :config (setq company-idle-delay 0.3) (global-company-mode 1) (global-set-key (kbd "M- ") 'company-complete)) (require 'eglot) (add-to-list 'eglot-server-programs '((php-mode :language-id "php") . ("intelephense" "--stdio" :initializationOptions (:licenseKey "98989898989898989898"