諾瓦

Panic，Coda 的開發團隊，推出了一款全新的macOS 專屬代碼編輯器諾瓦。它可以被視為“Coda 3”，但由於代碼重寫程度巨大，因此採用了全新的名稱。

我體驗過幾個測試版。正式發布後，我以優惠價購買並開始使用它。以下是一些我的想法！

和許多其他人一樣，我也在使用VS Code。 VS Code 非常好，而且免費。我的團隊成員也都在使用VS Code。要改變我的VS Code 使用習慣將會非常困難。我之前寫過關於切換代碼編輯器的文章。簡而言之：

1. 初期使用不能過於繁瑣。也就是說，我可以在過渡之後再學習新功能。
2. 必須有一些殺手級功能才能吸引我。

我非常喜歡Prettier 和Emmet。如果我無法使用它們，我肯定會放棄。幸運的是，它們是最受歡迎的擴展程序之一。

Emmet 的默認展開快捷鍵是Ctrl-E，但它似乎不支持Tab 展開（據我所知），這不太理想。不過，它確實擁有Emmet 的所有高級功能，你可以將它們映射到任何你想要的按鍵。

按鍵綁定設置很棒。我可以映射所有我習慣使用的快捷鍵，例如將Command-T 映射到“快速打開”，這類似於VS Code 中的“轉到文件…”功能。

我啟用了近30 個VS Code 擴展程序。它們都為我個人在VS Code 中添加了一些便利的功能。到目前為止，我還未發現任何缺失的功能。如果諾瓦 的默認行為足夠出色，無需太多第三方調整（除了我前面提到的兩個主要擴展程序），對我來說將是一個額外的好處。例如，我不需要插件來使我的縮進彩虹化，因為它們已經是彩虹化的了！

我每天至少會使用“項目內查找”十幾次，因此這項功能對我來說必須非常高效。到目前為止，我唯一的問題是它似乎經常卡在“索引文件…”上（或者感覺卡住了，因為風扇轉得很快）。也就是說，它似乎可以返回良好的搜索結果。

諾瓦 的macOS 風格非常濃厚。 “項目內查找”搜索結果的範圍限定（例如，只返回*.js 文件）需要創建一個新的搜索範圍。我可以使用自定義名稱保存該範圍，這是一個不錯的想法，但它使用了macOS Finder 中冗長的、UI 繁重的搜索範圍限定方式，而不是一個可以快速輸入*.js 來限定結果的輸入字段。換句話說，這感覺更像是強調macOS 風格而不是實用性。

另一個非常明顯的macOS 風格是右鍵單擊文件夾以打開文件瀏覽器：這與在Finder 中右鍵單擊文件夾完全一樣。從某種程度上來說，這令人感到安心，因為該菜單中有很多強大的功能。

但它也缺少一些可能在上下文中非常有用的功能。例如，我想念“在終端窗口中打開此文件夾”的選項。

UI 細節非常出色。代碼字體首選項的選擇非常棒。小地圖看起來很棒，用彩色小矩形表示你的代碼。窗口和編輯器主題做得非常好。 UI 的各個方面都非常優雅。

它仍然是Coda 的繼承者，因此如果你需要SFTP 到遠程服務器並進行直接編輯，該功能仍然存在。我前幾天不得不使用它來編輯一個我故意不放入git 的文件，因此該功能有時仍然很方便。

否則我會使用Coda 來完成這項工作，甚至不必為諾瓦 設置它，因為Panic Sync 已經導入所有身份驗證信息。

我確實很喜歡它有一個內置瀏覽器（Safari，當然）。我想知道我是否可以養成只在一個應用程序中工作的習慣，而無需進行太多窗口切換。這意味著文件瀏覽器、代碼編輯器、終端、瀏覽器和DevTools。

一次看到這麼多東西，有點……酷？我希望它可以選擇使用內置的Chromium，因為我更熟悉那些DevTools。也有一些不足之處，例如我的tmux 會話在終端中沒有響應點擊事件。

有趣的是，Swift 不是內置語言。考慮到它的macOS 風格，我本以為Panic 甚至至少用Swift 編寫了諾瓦 的一部分。

至少，你應該查看諾瓦 的登錄頁面，看看所有的CSS 技巧！用於演示諾瓦 主題的圖像上的動畫剪輯路徑非常酷（我聽說Safari 中的剪輯路徑動畫是硬件加速的，這很棒！）。它只是一些疊加在一起的圖像，共享相同的動畫，但錯開：

 <code>@keyframes wipe { 0% { clip-path: polygon(-50% 0%, 0% 0%, -50% 101%, -100% 101%) } 100% { clip-path: polygon(150% 0%, 200% 0%, 150% 101%, 100% 101%) } } /* ... */ img#interface1 { animation-delay: -17000ms; } img#interface2 { animation-delay: -15000ms; } img#interface3 { animation-delay: -13000ms; } img#interface4 { animation-delay: -11000ms; }</code>

但是……這簡直太漂亮了：哦，還要看看display-p3 顏色格式的使用！

以上是諾瓦的詳細內容。更多資訊請關注PHP中文網其他相關文章！