vim/nvimを使った単体のTypeScriptファイルの実行環境を構築する

TypeScript

tsファイル単体でもTypeScriptの実行ができるようになります。
ChromeのDevtoolでJavaScript書いて、それをプロジェクトに移行させてTypeScriptで実装し直す、みたいなのがなくなりました。

vim-lspを導入する

このプラグインを導入する事で、そのプログラミング言語について詳しくない人でもコマンド1発で入力補完や定義位置ジャンプやソースコード整形といった「IDE 機能」を得る事ができる様になります。

私はGolangでの開発なども行っていたので、vim-goなどを使用していましたが、このプラグインに変えてからはvim-goは不要になり、重すぎる環境から解放されました

参考: Vim をモダンな IDE に変える LSP の設定

vim-lsp-settingsを入れる

このプラグインを使用することで、ファイルを開いた際に自動でファイルに適した Language Serverが使用できるようになります。
何をインストールするかの指定も基本的には不要ですし、指定したい場合も簡単にできます。

参考: vim-lsp の導入コストを下げるプラグイン vim-lsp-settings を書いた。

deno をインストールする

今回構築する環境にはdenoを使用しますので、インストールします。
いくつか方法がGithubに上がってますが、今回はhomebrewを使った方法を採用します。

参考: https://github.com/denoland/deno

 $ brew install deno

tsファイルを作成し、vim/nvimで立ち上げ, Language Serveのインストール

denoのインストールまで終われば基本的に準備完了です。
適当な場所でtsファイルを作成して、Language Serveをインストールします。

:LspInstallServer deno

そのままそのファイルでTypeScriptでコード実装します。
以下は実装例です

class Foo {
  private _bar: string
  
  constructor(bar: string) {
    this._bar = bar
  }
  
  public buz = () => {
    console.log(this._bar)
  }
}

const foo = new Foo('hoge hoge')
foo.buz()

実行する

適当なTypeScriptの実装まで終われば、あとは実行させるだけです。

:terminal deno run <作成したファイル>.ts

上記のコマンドを実行すると、string hoge hogeが出力されると思います。

これまでJavaScriptの検証はChromeを使って検証していましたが、非常にクールではない感じでしたし、普段はTypeScriptを使ってるのでJavaScriptではOKでも型定義で弾かれてコード修正が必要だったりということも多々ありました。

これで面倒だったTypeScriptのロジック検証が簡単にできるようになりましたし、エンジニアらしくなったように思います。

最高です。

コメント

タイトルとURLをコピーしました