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.