Zenn
Closed4

VS Code でiOSアプリ開発 〜SweetPad 拡張機能

iOS
Swift
VS Code
aromariousaromarious

もうVS Codeなしでは生きていけない

ここしばらく VS Code で開発していたら、Xcode に戻れなくなってしまった。Xcode でなきゃという場面もあるが、それ以外は VS Code を使いたい。

結論

https://sweetpad.hyzyla.dev

SweetPad拡張機能を利用することにした。

VS Code だけでなく、Cursorでも使えるとのこと。

やりたいこと

Xcodeで作ったプロジェクトをVS Codeで開き、開発する

環境

以下の環境で開発している

  • Mac: MacbookPro 2021 (Apple M1 Pro)
  • macOS: Sequoia 15.2
  • Xcode: 16.1
  • Visual Studio Code: 1.95.3 (Universal)

やる前の状況

  • Xcodeで iOS アプリのプロジェクトを新規作成
  • そのプロジェクトを VS Code で開く
  • 参照しているクラスなどが解決されず、コード補完が使えない

これを解決しようとして調べたところ、xcode-build-serverというツールがXcodeのビルド情報を提供（BSPをサポート）するということが判明した。インストールしてみると上記の参照エラーが消え、コードが書けるようになった。

SweetPadとの出会い

もう少し調べると、xcode-build-serverを利用したVS Codeの拡張機能に行き当たった。SweetPadというのがそれだ。曰く

Build iOS/Swift apps using Visual Studio Code

コード補完、ビルド＆実行、Swiftコードのフォーマット、シミュレータや実機での実行、CodeLLDBを利用したデバッグ、テスト、それらに必要なツールのインストールを支援してくれるとのこと。親切。

aromariousaromarious

SweetPad拡張機能があれこれ面倒をみてくれる

ではインストールしてみよう。

XCodeでプロジェクトを作成しておく

まずは私と同じように困ってみること（Xcodeでプロジェクトを作成してVS Codeで開いてあーあの気持ちになる）。これは使えませんね、というのを確認する。しましたか？ そうしたら次のインストール手順を実行する。

最低限のインストール手順

  1. SweetPad拡張機能をインストールする。
  2. アクティビティバーでSweetPadを選択する。
  3. Toolsビューから必要なツールをインストールする。Homebrewとxcode-build-serverは必須
  4. コマンドパレットから SweetPad: Generate Build Server Config を選択する。プロジェクトルートにbuildServer.jsonが生成される。

ここまでやれば、コードを書き始められる。インストール前に出ていた参照エラーが解決されたのがわかるはず。

ビルドと実行

ビルドと実行には destination が必要。Xcodeのdestinationと同じで、ビルドのターゲットと実行マシンを選んでおく。

ステータスバーにdestination指定が表示される。まだ指定していない場合はこのような表示がされているだろう。

ここを押すと選択肢が上の方に出る。

シミュレータと実機が並んでいる。実行させるデバイスを選ぼう。

またはSweetpadのDestinationsビューから右クリックで選択してもよい。

コマンドパレット SweetPad: Select destinationからも選択可能。

ビルドと実行はSweetPadのBuildビューの▶️から。

またはコマンドパレットでSweetPad: Build & Run (Launch)から。

ビルドや実行の出力を見やすくするため、xcbeautifyのインストール推奨。Toolsビューからインストールできる。

aromariousaromarious

フォーマッタ設定

prettierはswiftをサポートしていないので、フォーマッタもSweetPadが面倒を見てくれる。

Apple 公式が出している swift-format フォーマッタコマンドを利用しているので、まずそれをToolsビューからインストールする。

次に.vscode/settings.jsonに下記のように設定する:

{
  "[swift]": {
    "editor.defaultFormatter": "sweetpad.sweetpad",
    "editor.formatOnSave": true,
  },
}

…と書いたが、実は手元でこのformatOnSaveがうまく動いていない。

defaultFormatter の設定は効いていて、⇧⌥F（Format Document）のフォーマットは問題なく動くので、そちらを利用している。

テスト

テストはここから実行する。

このスクラップは2日前にクローズされました