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

Vim

React Native

TypeScript

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"]
}