Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

やぬてつです。

この記事では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で公式にサポートされるといいなー

easy_easy
Easy Easy はエンジニアリングを愛する全ての人の為のコミュニティです! 「みんな知っていることが前提になっている技術」を軸に、再度基礎を学ぶことをしていきましょう!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away