kintone-cliを使って、現時点で最強と思われるkintoneカスタマイズ環境を考えてみました。
Macで、VS-Codeを利用していますが、PCでもいけるかと思います。（未確認）

事前準備

kintone-cliのインストール

バージョンの確認

$ kintone-cli --version
0.2.2

グローバルインストール時のアップデート

$ npm update -g kintone-cli

1. プロジェクトの生成(初期化)

プロジェクト名をパラメーターで渡して、kintoneカスタマイズプロジェクトを生成します。

ヘルプは $ kintone-cli init -h で確認できます。

-p の後に、プロジェクト名を指定します。
※下記では sample01 です。

$ kintone-cli init --install -p sample01

$ kintone-cli init --install -p sample01
Welcome to kintone-cli!
Please, input below information so we can get started!
? Version 0.0.1
? Description kintone customization project
? Author
? License MIT
? Do you want to use @kintone/kintone-ui-component? Yes
? Do you want to use @kintone/kintone-js-sdk? Yes

ここは、EnterとyでOK

作成されたプロジェクトフォルダに移動します。

$ cd sample01

2. テンプレートの生成

kintoneカスタマイズテンプレートを自動生成します。

kintone-cli create-template -t Customization -s -w -l -i 100 -n sample01

オプションパラメータは下記の通り

-t Customization カスタマイズテンプレート
-s typescriptを使う
-w webpackを使う
-l cybozu eslint rulesを使う
-i カスタマイズする appID を指定（仮でOK）
-n appNameを指定

$ kintone-cli create-template -t Customization -s -w -l -i 100 -n sample01
? Do you want to set authentication credentials ? No
? Do you want to use React ? No
? What is the entry for webpack ? index.ts
? What is the scope of customization ? ALL
Creating app...

ヘルプは $ kintone-cli create-template -h で確認できます。

Usage: create-template [options]

Options:
  -q, --quick                Use default template
  --yes                      Use default template
  --preset <preset>          Preset for generating template
  -t, --type <type>          Set app type
  -a, --set-auth             Set authentication credentials
  -d, --domain <domain>      Set kintone domain
  -u, --username <username>  Set username
  -p, --password <password>  Set password
  -n, --app-name <appName>   Set app name
  -s, --use-typescript       Use typescript or not
  -r, --use-react            Use React or not
  -w, --use-webpack          Use webpack or not
  --entry <entry>            Webpack entry
  -i, --app-id <appID>       Set app ID for customization
  -l, --use-cybozu-lint      Use cybozu eslint rules
  --proxy <proxyURL>         Proxy URL
  -h, --help                 output usage information

Reactを使うときは下記。

$ kintone-cli create-template -t Customization --preset ReactTS -s -r -w -l -i 100 -n sample01

3. Gitコミットする

2.でテンプレート他もろもろが自動生成された、ディレクトリをIDEで開きます。

一旦Gitコミットしておきます。

$ git status
$ git add .
$ git commit -m "コメント"

$ ls -la
total 752
drwxr-xr-x    8 kazoo  staff     256  8 18 23:04 .
drwxr-xr-x    4 kazoo  staff     128  8 19 05:53 ..
drwxr-xr-x   10 kazoo  staff     320  8 18 13:26 .git
-rw-r--r--    1 kazoo  staff      31  8 18 23:03 .gitignore
drwxr-xr-x  676 kazoo  staff   21632  8 18 23:04 node_modules
-rw-r--r--    1 kazoo  staff  376816  8 18 23:04 package-lock.json
-rw-r--r--    1 kazoo  staff    1235  8 18 23:03 package.json
drwxr-xr-x    9 kazoo  staff     288  8 18 23:03 sample01
$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore
        package-lock.json
        package.json
        sample01/

nothing added to commit but untracked files present (use "git add" to track)
$ git add .
$ git commit -m "Initial commit"
[master (root-commit) 9f55035] Initial commit
 10 files changed, 9633 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 package-lock.json
 create mode 100644 package.json
 create mode 100644 sample01/.babelrc
 create mode 100644 sample01/.eslintrc.js
 create mode 100644 sample01/config.json
 create mode 100644 sample01/source/global.d.ts
 create mode 100644 sample01/source/index.ts
 create mode 100644 sample01/tsconfig.json
 create mode 100644 sample01/webpack.config.js
$ git status
On branch master
nothing to commit, working tree clean

4. プロジェクトのビルド

プロジェクトをビルドします。

$ kintone-cli build --app-name <アプリ名>

$ kintone-cli build -h
Usage: build [options]

Options:
  --app-name <appName>  App name
  -h, --help            output usage information
$ kintone-cli build --app-name sample01

> sample01@0.0.1 build-sample01 /Users/local/sample01/sample01
> webpack --config sample01/webpack.config.js

Hash: 0cc5eeb26fe392c36638
Version: webpack 4.44.1
Child
    Hash: 0cc5eeb26fe392c36638
    Time: 1280ms
    Built at: 2020-08-19 6:09:34
              Asset      Size  Chunks             Chunk Names
    sample01.min.js  1.04 KiB       0  [emitted]  main
    Entrypoint main = sample01.min.js
    [0] ./sample01/source/index.ts 168 bytes {0} [built]
    
    WARNING in configuration
    The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
    You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

Build app complete.
To set auth info, use:

     kintone-cli auth --app-name sample01

5. 手動デプロイ

ビルドされたファイルをkintoneにアップします。
ここは安全を見て手動です。

distの下の、sample01.min.js をアップロードします。

$ tree ./sample01 -L 2 -a
./sample01
├── .babelrc
├── .eslintrc.js
├── config.json
├── dist
│   └── sample01.min.js
├── source
│   ├── css
│   ├── global.d.ts
│   ├── index.ts
│   └── js
├── tsconfig.json
└── webpack.config.js

6. ライブラリのアップデート

kintone-cliでパッケージされるライブラリは最新のものでは無いことがあるので、確認してアップデートします。

@kintone/kintone-ui-component を最新版にアップデートします。

インストール済みのnpmパッケージの更新状況を確認
$ npm outdated

$ npm outdated
Package                        Current  Wanted  Latest  Location
@kintone/kintone-ui-component    0.6.0   0.6.0   0.7.3  sample01

package.jsonを最新版に書き換えます。

  "dependencies": {
    "@kintone/kintone-js-sdk": "^0.7.4",

npm installを実行します。
$ npm install @kintone/kintone-ui-component --save

その他のパッケージもアップデートしておきます。
$npm update

7. テストフレームワーク導入

ユニットテストフレームワークの Jest をインストールします。

https://jestjs.io/docs/en/getting-started

npm install --save-dev jest

BabelやWebpackを使ってコンパイル、パッケージングを利用しない場合は、下記拙稿を参考にしてください。
kintone ユニットテストの基本

注意

自動アップデートはセットアップしていません。ここは必要に応じて各自セットアップすると良いかと思います。
認証系のファイルも生成していません。

参考