Emacs で TypeScript 開発環境をセットアップ

どうも、たくチャレ(@takuchalle)です。

TypeScript は VSCode で書こうかと思ってるんですけど、一応 Emacs でもセットアップをしておきました。

最低限必要そうな

  • シンタックスハイライト
  • コード補完
  • エラーチェック
  • 型表示
  • 定義ジャンプ

のセットアップします。

シンタックスハイライト

typescript-modeというパッケージがあるのでインストールして.ts拡張子に紐づけます。

僕はパッケージ管理に package.el を使っているので、次のような設定になります。

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

コード補完・エラーチェック・型表示・定義ジャンプ

これらすべてをやってくれるtideパッケージがあります。tsserverと通信しながら色々やっているようです。

Tide - TypeScript Interactive Development Environment for Emacs

flychekcompany-modeも内部的に使ってるようなので、それらを事前にセットアップしておく必要があります。

あとnodetscのインストールもしておく必要があります。

(package-install 'tide)
(require 'tide)
(add-hook 'typescript-mode-hook
		  (lambda ()
			(interactive)
			(tide-setup)
			(flycheck-mode +1)
			(setq flycheck-check-syntax-automatically '(save mode-enabled))
			(eldoc-mode +1)
			(tide-hl-identifier-mode +1)
			(company-mode +1)
			(global-set-key (kbd "M-*") 'tide-jump-back)))

基本的にREADME.mdに書いてある設定をそのまま持ってきました。

定義ジャンプ後に戻る時のキーマップだけにM-*変えています。tideのデフォルトはM-,なのですが、僕のgtagsがその設定なので統一するためです。ちなみに定義にジャンプするときはデフォルト設定だとM-.です。

(おまけ)保存時に自動フォーマット

勝手にフォーマットされることがイヤじゃない人はファイル保存時に自動でフォーマットさせるのもありじゃないでしょうか。

(add-hook 'before-save-hook 'tide-format-before-save)

フォーマットをカスタマイズしたい時はtsfmt.jsonファイルを作成してtsconfig.jsonと同じフォルダに置けばよいみたいです。僕はまだこだわりはないのでデフォルト設定になってます。

まとめ

新しい言語を学ぶ時はまず形(エディタ)から、という言葉もあるように Emacs のセットアップをしました。かなり簡単にセットアップできたので、みなさんやってみてはいかがでしょうか。

VSCode とどっち使おう…

Emacs 関連記事

同じカテゴリの記事