How to develop iOS and macOS apps in VS Code

In my previous tutorial I have added ChatGPT 4 into VSCode and Xcode like autocompletion, so I may develop iOS and macOS apps in VSCode.

Today I’m going to show you how you can link the Xcode simulator up with VSCode to have a live preview of the code you write. We’re going to test this out with a SwiftUI project.

Benefits

This combination approach will revolutionize your SwiftUI development process. In addition to the navigation and data fetching capabilities of the simulator, you'll also enjoy the benefits of hot reloading from VSCode.

Implementation

Setting this up is straightforward. Follow along as I guide you through the process step by step.

Step 1: Download Required Files

First, navigate to the repository and download the "Inject" Swift package. This package takes full advantage of Injection III.

Step 2: Create a New Project

Next, create a new Xcode project. I'll name this project "Inject Example".

Step 3: Specify Document Location

You will be asked to specify where you want to save your document. Avoid storing it in the Documents or Desktop folders as Injection III may encounter issues with these locations. Instead, create a new folder outside these directories.

Step 4: Add Swift Package

After setting up the project, add the "Inject" Swift package to the package dependencies.

Step 5: Modify Linker Flags

Copy the -Xlinker -interposable linker flag and add it to the "Other Linker Flags" under "Build Settings" only for "Debug".

Step 6: Download Xcode Injection

Download the latest version of Xcode Injection from its GitHub page and add it to the Applications folder.

Step 7: Run Xcode Injection

Run the Xcode Injection application and select your project directory.

Step 8: Add Import Injection

Add import Inject to all your views and add @ObserveInjection var inject and .enableInjection to the content view. The later one will enable injection on the whole view.

Step 9: Test Hot Reloading

Now, test the hot reloading feature. run the project from Xcode so the simulator would pop up. Now open the project in VSCode and start doing some changes. Hit Command+S to save the changes and the Xcode Simulator will pick up the change!

Step10: Auto-save (optional)

It is quite tedious to hit Command+S to save your file in order to the simulator to get the changes each and every time you time some code. So let’s set up auto save. Go to Settings…/Settings or hit Command+,

In the search bar type in: auto save. Select `afterDelay` in the dropdown and set 1 for the auto save delay.

Here is the final result.

Conclusion

With these steps, you can easily add hot reloading to your SwiftUI simulator and take advantage of the best features of both the preview provider and the simulator. If you need further assistance or want to boost your SwiftUI knowledge, feel free to book a mentoring session with me.