SwiftUI 專欄 #1 來把 Xcode 搞好

SwiftUI 讀完就入坑 2022/06/10

Jun 10, 2022

這週是 Apple 給開發者一年一度的 WWDC，SwiftUI 的更新當然也是重頭戲。不過沒有影響到本專欄的規劃，還請放心照進度看下去。
上一期是 SwiftUI 專欄副刊的第 0 期，還喜歡那樣的風格嗎？如果還沒讀過，請先回去閱讀再接著今天的進度喔。
相信部分讀者看到 13 開始連載這個 SwiftUI 專欄，首先會想到的是「糟糕，又要學新東西了🤯」，伴隨著學不完、學不動的學習焦慮。
其實啊，我在規劃專欄時，最主要目的是想帶給讀者輕鬆認識 SwiftUI 的機會，設計出一條「減少傷害、強化樂趣」的學習路線。畢竟 SwiftUI 還很年輕，絕大部分公司既有專案都還在用 UIKit。現在開始，隨著專欄來接觸 SwiftUI 剛剛好，不用心急。
另一方面，我要多說明「這是個沒有付費牆，但是用付費電子報心態在經營的專欄」這句話的意思。
我做過許多 iOS 技術的分享，許多都滿「獨家」的。比如 Podcast 與電子報做了近三年，市面上都沒有出現類似的東西。
同樣的時間精力，可以做英文內容來接觸全球的開發者、寫 side project，甚至接案賺錢來增加收入。要不然也可以多休息、玩點遊戲等等。選擇在中文 iOS 開發者圈分享，還是因為想回饋這個照顧我許多的社群吧。
這次會開闢 SwiftUI 專欄，是因為我收過許多詢問 SwiftUI 如何入門的問題，也觀察到不少 iOS 開發者不得其門而入。SwiftUI 其實不難，只是學習途徑有它獨特之處。我對 SwiftUI 算是頗有心得，對於「學習 SwiftUI」這件事也有深入思考，相信認真寫起來，一定能幫到一些人。而且我寫出來的東西、鋪陳的方式，你在其他地方看不到。
用經濟學來說，就是市場有需求、我可以供給😂
但是，把這些知識整理成專欄，真的是在我「免費提供」的能力範圍邊緣了。如果這個 SwiftUI 專欄（或是任何人做的任何一項學習資源）對你有幫助，請回饋或是付費給作者。
你可以訂閱我的 Patreon 來支持我。我設定了每個月 $5、$10、$15 美金三種，希望可以累積到 100 位支持者。相對地，你可以提前看到專欄文章。每個月初，Patreon 會扣款，並送到我的 PayPal 帳戶。過程中去除各種手續費後，大概剩下 8 成是真正能運用的金額。通常我是拿來買買遊戲（Steam、Xbox、Switch 皆可，但台灣 PSN 不支援）、軟體服務（像是 GitHub Pro、Setapp）、網路服務、電子書。如果犧牲點匯差的話，訂 Uber Eats 還真的能填飽肚子~~，靠寫作當飯吃~~🤣（更新：Uber Eats 在台灣已不支援 PayPal）
作為早期支持者，如果你曾經捐款過 weak self 或是我個人，即使沒有在 Patreon 上訂閱，我也會把文章提前發給你看（主要是透過 Discord 專屬頻道）。如果你沒收到的話，請記得來跟我索取權限喔。
如果讀了這份專欄有所收穫，但還不想付費的話，我希望你可以把所學知識分享出來。寫 blog、發推特、編電子報，甚至拍影片，都很好。中文 iOS 社群需要更多技術分享。
啊，一個不小心開頭就寫了這麼多。請享受今天的內容～
（看前一期 · 回專欄 · 回首頁）

前言

上一期講的是 SwiftUI 開發環境必要的硬體設備。這一期，我們來講軟體工具的部分。

要撰寫 SwiftUI，我們必須使用 Apple 提供的開發軟體——Xcode。光是選擇正確的 Xcode 版本，以及怎麼取得 Xcode，就是一門學問了。我也會教你設定程式碼自動排版工具。這些都是快樂地玩耍 SwiftUI 非常重要的準備。

沒什麼選擇，只能用 Xcode

我們強調過，SwiftUI 的 Preview 是開發中不可或缺的功能，而這項功能是 Xcode 的一部分，所以我們就只能用 Xcode 了。

你可能會問，iPad 跟 Mac 上那個 Swift Playgrounds 做為替代品行不行？我覺得不行。

並不是說 Swift Playgrounds 不能拿來開發 app，有人確實做到了。但是如果要把 SwiftUI 學起來的話，Playgrounds 是不夠用的。

喔對了，VSCode 搭配 HotReloading 或許可以做出類似 Preview 的效果，但這東西太新，我還沒有試過。有興趣的朋友可以玩玩看。

安裝 Xcode 的錯誤與正確姿勢

可能是因為看過很多用 Mac App Store 下載 Xcode 導致傷害的案例，我特別喜歡勸開發者改用別的下載方式。為此寫過至、少、四、篇文章，是不是有誇張到🤣

從 Mac App Store 下載 Xcode，唯一稱得上好處的，是只需要 App Store 帳號。但是把 Apple ID 註冊為 Apple 開發者帳號並不用付錢（跟 Apple Developer Program 不一樣），而且開發者帳號以後一定用得到，所以就不要偷懶了吧。

最陽春的下載方式，是去官網登入開發者帳號以後，在這邊 https://developer.apple.com/download/all/ 挑選版本。下載 .xip 檔以後，自行解壓縮。

如果你有夠快的外接硬碟，也可以分享 .xip 檔案給需要的同事，這是最快取得 Xcode 的方式🤪

而目前最推薦所有認真想要從事 iOS 開發的朋友使用 Xcodes app 這個 app 來下載。原因有：

它採用 aria2，能夠同時多達 16 個連線，下載速度最大化。在我家的 1000/600 光纖，最高曾經跑到 112 MB/s
能夠看到電腦上所有的 Xcode 版本，並顯示所有版本的相容性資訊
一鍵切換目前工具鏈的版本，不用自己打 sudo xcode-select -s
新版還支援 unxip 測試功能，解壓縮速度最快可達 +70%

你可以在 Xcodes 的 GitHub Releases 下載該 app。

Xcode 每隔幾週就會有新版可以下載來踩坑測試，準備好快速的安裝工具絕不吃虧。上一期推坑 M1 呢，也是因為它用來解壓縮 .xip 很快呢😂

要選哪個 Xcode 版本呢

SwiftUI 最早是跟著 Xcode 11 一起推出的。寫下這篇文章的時候，最新版是 Xcode 13.4.1，而我認為 Xcode 13.2.1 是最穩定又不會太舊的版本。

資深 iOS 工程師都會去讀 Release Notes 以及上網看看有沒有「災情」，再決定使用哪個版本。

Xcode 13.3 以上有個坑──SPM Resolved 檔格式與之前的不同。如果用 13.3 以上新增 Package 再用舊版開啟，就會遇到問題。就穩定性來說我比較推薦用 13.2.1 版

在 Xcode 14 正式版推出之前，不反對下載 Xcode 14 beta 玩玩新功能。但我要讓你學到的是能用來上架的開發環境，所以前期教學內容會以 Xcode 13.2.1 為準。

上一期講準備 Mac 時，沒有特別提到硬碟容量。其實一個認真的 iOS 工程師，電腦裡通常會有好幾版的 Xcode，所以千萬不要只選配 256 GB SSD。512 GB 有時候也會覺得緊迫，1 TB 則相當舒服了。

排版非常重要

SwiftUI 如果寫得好，是可以做到讓人看一眼，就大概知道畫面的結構。像這樣：

var body: some View {
  VStack {
    HStack {
      leadingButton
      title
      trailingButton
    }
    .background(Color.secondary)

    content

    footer
      .font(.footnote)
  }
}

但這有個重要前提，就是縮排是正確的。下面是同樣的程式碼，但縮排是亂的：

var body: some View {
VStack {
    HStack {
        leadingButton
        title
        trailingButton
    }
.background(Color.secondary)
content
footer
    .font(.footnote)
}
}

你看得出來 VStack 裡有幾個元素、.background() 是套在哪一層嗎？

SwiftUI 程式碼裡面會有大量的 { }，用來表示畫面元素的階層關係。如果縮排不正確的話，根本就沒辦法理解畫面是長什麼樣子。

Xcode 內建的重新縮排功能，是把程式碼選起來，然後按下 Ctrl+I。

以前不懂事的時候，我都覺得，反正就 Cmd+A 全選、再 Ctrl+I 。還行，還可以接受。

但其實很多 IDE 能在打字或換行的同時，就會自動調整縮排（比如用 VSCode 或 Android Studio 開發 Flutter），根本就不需要開發者多按那幾下啊。Swift Playgrounds 也有類似的效果。從這個角度來看，Xcode 是非常落後的。

我之前就預言 Xcode 14 會有更好的 Swift 格式工具或自動排版功能。果然 Xcode 14 在修改程式碼時，更容易觸發自動調整縮排（例如打 } 時），還推出了 Swift Package plugin 機制，讓開發者自己安裝或開發合適的格式工具。

不論如何，還在用 Xcode 13 的我們，必須要有應對策略。而我覺得會令許多 iOS 開發者相見恨晚的就是採用 SwiftFormat。

SwiftFormat 裝起來

我在 2020 年寫過一篇筆記來推坑 SwiftFormat。它除了縮排以外，還能做很多自動套用 Swift 程式碼格式的事情。我推薦給所有使用 Xcode 寫 Swift 的 iOS 工程師，不論初學還是資深。不過在這個專欄我只說明必要的步驟。

首先，從 SwiftFormat 的 GitHub Releases 下載 SwiftFormat for Xcode app。

解壓縮以後，拖曳到應用程式資料夾，打開。

它的 icon 是這個樣子。

你可以在 app 裡設定各種規則，就留給你自己研究，預設的規則也挺好。

因為它是 Xcode 的「延伸功能」，必須到「系統偏好設定」裡啟用它。

如果你在「延伸功能」找不到 SwiftFormat，那麼可能是 Xcode 向 macOS 註冊來源編輯器方面出了什麼狀況。
已知比較有效的「解法」，是到應用程式資料夾把 Xcode 改個名字再改回來。
對，你沒有看錯…
如果你是用 Xcodes 下載的話，名稱可能會是「Xcode-13.2.1.app」。就隨便改成別的、再改回來。再回到「延伸功能」看看有沒有出現 SwiftFormat。

Xcode 與專案設定

今天這篇結束之前，一定要教大家幾個設定，可以說是我寫 SwiftUI 的密技。

綁定 SwiftFormat

前面設定完 SwiftFormat for Xcode 以後，應該會在 Xcode 的 Editor 選單最下面找到 SwiftFormat。裡面有三個功能，我們要幫 Format File 設定快速鍵。

請到 Xcode Preferences 的 Key Bindings，搜尋 SwiftFormat，並把 Format File 指定為 Ctrl+Shift+I。這組快速鍵與內建的 Ctrl+I 接近，又沒有衝突。（把內建的保留起來，以防萬一你還是要用到。畢竟 SwiftFormat 不支援 Objective-C）

Xcode Preferences > Key Bindings > 搜尋 SwiftFormat > Format File

這樣子，在寫 SwiftUI 時，看到目前檔案的排版不順眼，只要按 Ctrl+Shift+I 就好。不需要先選取程式碼喔。

SwiftFormat 還有許多進階的功能與整合方式，就請參考我之前的推坑筆記了。

修改縮排寬度

Xcode 專案預設的縮排寬度是 4 個 Spaces。根據我學到的經驗，改成 2 個 Spaces 對於看 SwiftUI 程式碼很有幫助。

這是 Indent Width: 4 Spaces。

這是 2 Spaces。對於螢幕的寬度要求輕鬆許多。而且對我來說，還比較容易用眼睛計算縮排的層級數。

請到 Xcode Preferences 的 Text Editing 進行設定。改完之後回到程式碼，按下前面教的 Ctrl+Shift+I，就會立刻看到效果。

Xcode Preferences > Text Editing > Indentation > Indent Width: 2 spaces

至於灰色圓點嘛，我個人是覺得對於減輕眼力負擔頗有幫助。請到 Xcode 選單的 Editor，把 Invisibles 打開。

小結

SwiftUI 就像早期的 Swift，帶給開發者許多令人興奮的功能，但也帶來不少的困擾。希望透過本專欄畫出的路線圖，讓你有一個比較快樂、不挫折的學習經驗。

這期提到 Xcode、SwiftFormat 的準備，請別小看當中的細節。建立好習慣，才會讓之後 SwiftUI 寫起來更順利。

之後我會告訴大家，根據多方嘗試的經驗，什麼樣的「題目」適合用 SwiftUI。如果你有考慮用 SwiftUI 做的專案，歡迎寫信或是使用留言💬功能來與我討論。

喜歡這篇文章的讀者，請到 Patreon 訂閱支持我🙏（希望可以累積到 100 位支持者，目前 11%），並按下愛心❤️、留言💬，也歡迎直接回信✉️與我交流。這些回饋都會直接影響到我繼續寫作的動力與頻率喔。

訂閱支持 13

13 報

Discussion about this post