プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

VSCode で kintone の JS カスタマイズを書く際に ESLint のエラーを減らす

VSCode で ESLint を有効にしている状態で Kintone REST API Client を使ったコードを書いてると、こんな感じにエラーになります。

もちろん、 kintone 側の JS カスタマイズの設定で、

こんな感じに Kintone REST API Client を指定しておけば、 kintone にアップロード(または Live Server Extention などを利用)したファイルも正しく動作します。

でも、正しく動作するのに、エラー表示って、いやですよね。

いやなだけでなく、実際面でも、赤く表示が出ていても、 Kintone Rest API Client のエラーだと思い込み、大事なエラーを見逃しく易くなってしまいます。

というわけで、どうにかできないか試してみました。

node 環境に Kintone API Client をインストール

いろいろと考えたのですが、 node で開発を進めようとすると、 node 側にこれらのパッケージをインストールしておくのが一番手っ取り早そうです。

D:\work\tmp\kintone_tutorial\webpack_sample_rest_api_client>npm install --save-dev @kintone/rest-api-client

added 12 packages, and audited 392 packages in 10s

125 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

D:\work\tmp\kintone_tutorial\webpack_sample_rest_api_client>

で、コード側は import を書いておきます。

import {KintoneRestAPIClient} from "@kintone/rest-api-client";

とすると、 node でも正しくライブラリが認識されるので、エラーがでなくなります。

注意点

ただ、この場合 webpack でバンドルした際に、これらのライブラリも含んだ形になります。

webpack の externals というのを使えば、バンドル時に指定したライブラリを除外できるはずなのですが、今回試した範囲でうまく設定できませんでした。

以前は、 kintone のアップロードのサイズ制限が結構厳しかったので、ライブラリまで含めてバンドルするのは微妙なところもあったようなんですが、現在はサイズ制限が緩和された(20MBが上限)みたいで、それほど気にしなくてもよいようです。

制限値一覧 | kintone ヘルプ

ということで、 kintone のアプリの JS カスタマイズ設定で、 Kintone REST API Client を読み込まないようにだけしておきます。

Kintone UI Component も同様に対応すればよさそうです。とりあえずは、これでなんとかなりそうです。