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 denotsファイルを作成し、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のロジック検証が簡単にできるようになりましたし、エンジニアらしくなったように思います。
最高です。
コメント