Honmushi blog
VimでReact NativeとTypeScript向けの設定に「tsuquyomi」を利用2020/01/14

VimでReact NativeとTypeScript向けの設定に「tsuquyomi」を利用

React Nativeのアプリを作っていて、すこしずつTypeScriptの利用を進めています。

せっかくTypeScriptを使っているので、静的な型チェックなど便利な機能を使いたいです。 普段使っているエディタVimの設定をカスタマイズしました。

同じような環境で作業している方の参考になればと思います。

結論を先に言うと

いくつか試してみて簡単に動かせた、「tsuquyomi」というVimプラグインを利用しました。 さまざまなところでおすすめされているのを見かけるので良さそうです。

https://github.com/Quramy/tsuquyomi

概要

  • プラグインのインストール
  • tsconfig.jsonの設置
  • 利用を見送ったプラグイン

プラグインのインストール

NeoBundleを利用しているのであればvimrcにて以下を記述。依存で必要なプラグインがあるのでそちらも一緒にインストールしましょう。

NeoBundle 'Quramy/tsuquyomi'

npm などを使いTypeScriptをインストールしておきtsserverを動作できるようにしておく必要があると思います。他にも@types/react@types/react-nativeもインストールしました。

tsconfig.jsonの設置

tsconfig.jsonを設置することでビルド時の設定を変更できます。正常にビルドチェックが発生しない場合はこれを見直すといいです。

いくつかチェックのルールも変更できますので、共通の設定を作った上でチームに配布等すれば簡単にコーディングルールを配布できます。

サンプル

現在利用しているtsconfigのサンプルです。各パラメータの意味などはTypeScriptの「compiler-options」のドキュメントに載っているので参考に設定します。

https://www.typescriptlang.org/docs/handbook/compiler-options.html

{
 "compilerOptions": {
   "target": "esnext",
   "module": "esnext",
   "lib": ["esnext"],
   "jsx": "react-native",
   "noEmit": true,
   "moduleResolution": "node",
   "strict": true,
   "esModuleInterop": true,

   "noFallthroughCasesInSwitch": true,
   "noImplicitReturns": true,
   "noUnusedLocals": true,
   "noUnusedParameters": true,
   "resolveJsonModule": true,

   "allowUnreachableCode": false,
   "allowUnusedLabels": false,

   "noImplicitAny":false_
  },
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

利用を見送ったプラグイン

  • vim-lsp
  • vim-lsp-typescript
    tsconfig.jsonを設置して型チェックの動作はできたました。しかしチェック内容が正常でなかった様子?なのと設定が難しそうだったので早めに諦めました。

おわりに

とりあえず.tsxファイルの保存時にコンパイルチェックが行われ、エラーが報告されます。tsconfigの設定などまだまだよくわかっていないので、少しずつ最適化していこうと思います。

定義へのジャンプや補間なども用意されているのでかなり便利になりました。また便利な設定やコツなど見つけたら紹介します。

  • このエントリーをはてなブックマークに追加