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)
(add-to-list 'package-archives '("gnu"          . "") t)
(add-to-list 'package-archives '("melpa"        . "") t)
(add-to-list 'package-archives '("melpa-stable" . "") t)

;;disable splash screen and startup message

(show-paren-mode t)
(setq inhibit-startup-message t) 
(setq initial-scratch-message nil)
 ;; 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 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 ()
  ;;  (setq tide-tsserver-process-environment '("TSS_LOG=-level verbose -file /tmp/tss.log"))
  (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
    (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
    (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
    (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
    (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))
                (when (string-equal "jsx" (file-name-extension buffer-file-name))
                (when (string-equal "js" (file-name-extension buffer-file-name))
                    (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='' 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=''" parameter. npm run build --base-href=' did not set the base href in indext.html After looking for a while, I found 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='

Emacs Pulumi LSP

Install Pulumi Emacs Mode The source code is on 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" -o ./bin -p 10 ./cmd/... go: downloading v3.53.1 ... ... ... go install -ldflags "-X" ./cmd/... mkdir -p editors/emacs/bin cd editors/emacs && emacs -Q --batch --eval "(progn (setq package-user-dir \"$(pwd)/bin\" \ package-archives '((\"melpa\" . \"\") \

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"