EmacsでTypeScript環境を整える

ScalaにつづいてTypeScriptも勉強しようと思ったので、まずはエディタのセットアップをした。

typescript-mode

とりあえずtypescript-modeというのがあるので、それを入れる。M-x package-list-packagesしてtypescript-modeをインストールする。その後以下の設定を入れておけば良い。

(require 'typescript-mode)
(add-to-list 'auto-mode-alist '("\\.ts\\'" . typescript-mode))

flycheck、補完、型情報の表示、定義ジャンプ

tss.elとtide.elというのがあった。tide.elは公式が提供しているtsserverのインターフェースに則って補完や定義ジャンプができるので、こちらを利用することにした。まずpackage-list-packagesでcompanyとtideをインストールした後、以下の様な設定をする。

(require 'tide)
(add-hook 'typescript-mode-hook
          (lambda ()
            (tide-setup)
            (flycheck-mode t)
            (setq flycheck-check-syntax-automatically '(save mode-enabled))
            (eldoc-mode t)
            (company-mode-on)))

またtideはcompanyでの補完を利用しているので、このあたりもセットアップしておく(セットアップの仕方は後述)。

これでさまざまな機能が追加される。

flycheck

エラーになっている部分を表示してくれて、カーソルを合わせるとエラー情報を出してくれる。

補完

型情報に応じた補完をしてくれる。また、javascriptでのAPIの補完も行ってくれる。

型情報の表示

カーソル位置の型情報をeldocで表示してくれる。

定義ジャンプ

定義元にジャンプする。M-.で可能。

companyの設定

補完機能はcompanyを利用して実現されている。いつもはauto-completeを使っていて、微妙な挙動の違いや色がダサいみたいなのに悩まされたのでセットアップしてみた。

(require 'company)
;;; C-n, C-pで補完候補を選べるように
(define-key company-active-map (kbd "M-n") nil)
(define-key company-active-map (kbd "M-p") nil)
(define-key company-active-map (kbd "C-n") 'company-select-next)
(define-key company-active-map (kbd "C-p") 'company-select-previous)
;;; C-hがデフォルトでドキュメント表示にmapされているので、文字を消せるようにmapを外す
(define-key company-active-map (kbd "C-h") nil)
;;; 1つしか候補がなかったらtabで補完、複数候補があればtabで次の候補へ行くように
(define-key company-active-map (kbd "<tab>") 'company-complete-common-or-cycle)
;;; ドキュメント表示
(define-key company-active-map (kbd "M-d") 'company-show-doc-buffer)

(setq company-minimum-prefix-length 1) ;; 1文字入力で補完されるように
 ;;; 候補の一番上でselect-previousしたら一番下に、一番下でselect-nextしたら一番上に行くように
(setq company-selection-wrap-around t)

;;; 色の設定。出来るだけ奇抜にならないように
(set-face-attribute 'company-tooltip nil
                    :foreground "black"
                    :background "lightgray")
(set-face-attribute 'company-preview-common nil
                    :foreground "dark gray"
                    :background "black"
                    :underline t)
(set-face-attribute 'company-tooltip-selection nil
                    :background "steelblue"
                    :foreground "white")
(set-face-attribute 'company-tooltip-common nil
                    :foreground "black"
                    :underline t)
(set-face-attribute 'company-tooltip-common-selection nil
                    :foreground "white"
                    :background "steelblue"
                    :underline t)
(set-face-attribute 'company-tooltip-annotation nil
                    :foreground "red")