EmacsでTypeScript/Angularを快適に開発したい

やぬてつです。

この記事ではMacOSでEmacs24.5を利用し、TypeScript2系、Angular2をターゲットにしています

EmacsでTypeScriptを書くときは何を利用していますか？私はtypescript-modeを利用しています。そんな時に、ng2-modeなるものをみつけました。

ng2-modeなかなかよいのですが、flycheckが動作しなくて、ちょっと不便でした。なんとかflycheckをng2-modeで動作できないか調べてみたんですが、簡単にはできそうにありませんでした。

そこで、逆転の発想で、ng2-modeにあった機能をまるっと移植しようということにしました。

やることはソースコードのカラーと対応するtsフィルとhtmlファイル,specファイルのバッファ切り替えです。

(defun ng2--is-component (name)
  (equal (file-name-extension (file-name-sans-extension name)) "component"))

(defun ng2--is-service (name)
  (equal (file-name-extension (file-name-sans-extension name)) "service"))

(defun ng2--is-pipe (name)
  (equal (file-name-extension (file-name-sans-extension name)) "pipe"))

(defun ng2--is-directive (name)
  (equal (file-name-extension (file-name-sans-extension name)) "directive"))

(defun ng2--is-file (name)
  (cond ((ng2--is-component name) t)
        ((ng2--is-service name) t)
        ((ng2--is-pipe name) t)
        ((ng2--is-directive name) t)))

(defun ng2--counterpart-name (name)
  (if (ng2--is-component name)
      (let ((ext (file-name-extension name))
            (base (file-name-sans-extension name)))
        (if (equal ext "ts")
            (concat base ".html")
          (concat base ".ts")))
    name))

(defun ng2-open-counterpart ()
  (interactive)
  (find-file (ng2--counterpart-name (buffer-file-name))))


(defun ng2--counterpart-spec-name (name)
  (when (not (ng2--is-file name)) name)
  (let ((ext (file-name-extension name))
        (base (file-name-sans-extension name)))
    (if (equal ext "ts")
        (let ((ext2 (file-name-extension base))
              (base2 (file-name-sans-extension base)))
          (if (equal ext2 "spec")
              (concat base2 ".ts")
            (concat base ".spec.ts")))
      (concat base ".ts"))))

(defun ng2-open-counterpart-spec ()
  (interactive)
  (find-file (ng2--counterpart-spec-name (buffer-file-name))))

Emacsはサクッと自分好みにカスタマイズできちゃうところがいいですよね
できればng2-modeで公式にサポートされるといいなー