Nova

Nova 是 Panic（Coda 背后的团队）推出的一款新的（坚决地仅限 macOS）代码编辑器。它就像“Coda 3”，只不过这次进行了重大重写，因此他们为它起了一个全新的名字。

我在他们构建过程中使用了一些 Beta 版本。在正式发布时我获得了一些折扣，因此我购买了它，并且在一些场合使用它。以下是我的一些想法！

像许多其他人一样，我正在使用 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 中添加了一些小巧的功能。我还没有错过任何一个。如果 Nova 的默认行为非常好，以至于不需要那么多第三方调整（除了我前面提到的两个主要功能之外），对我来说将是一个额外的好处。例如，我不需要插件来使我的缩进全部彩虹化，因为它们已经是彩虹化的了！

---

“在项目中查找”是我每天至少要执行十几次的操作，因此对于我来说，这需要非常完美地工作。到目前为止，我唯一的问题是它似乎经常卡在“索引文件…”上（或者感觉卡住了，因为它导致风扇旋转）。也就是说，它似乎返回了良好的搜索结果。

Nova 的 Mac 特性非常非常强。对“在项目中查找”搜索结果进行范围限定（例如仅返回 *.js 文件）需要创建一个新的搜索范围。我可以使用自定义名称保存该范围，这是一个不错的主意，但它使用了 macOS Finder 中非常冗长的 UI 重型搜索范围，而不是一个我可以快速键入 *.js 来限定结果的快速输入字段。换句话说，这仅仅是强调 Mac 特性而不是实用性的一个例子。

---

另一个超级 Mac 特性是右键单击文件夹以打开文件浏览器：这与在 Finder 中右键单击文件夹完全一样。在某种程度上这令人欣慰，因为该菜单中包含许多强大的功能。

但它也缺少可能在上下文中很有用的功能。例如，我想念“在终端窗口中打开此文件夹”的选项。

---

UI 细节非常棒。选择编码字体首选项非常棒。小地图看起来很棒，带有表示您代码的小彩色矩形。窗口和编辑器主题做得非常好。UI 的一切都很优雅。

---

它仍然是 Coda 的继任者，因此如果您需要 SFTP 到远程服务器并进行直接编辑，它就在那里。我前几天不得不这样做来编辑一个我故意不包含在 git 中的文件，因此该功能有时仍然很方便。

否则我会使用 Coda 来完成此操作，甚至不必为 Nova 设置它，因为 Panic Sync 带来了所有这些身份验证信息。

---

我确实有点喜欢内置浏览器（当然，是 Safari）。我想知道我是否可以养成肌肉记忆，以便能够只在一个应用程序中工作而无需进行太多窗口切换。这意味着文件浏览器、代码编辑器、终端、浏览器和 DevTools。

一次看到这么多东西，但……有点酷？我希望它可以选择使用内置的 Chromium，因为我碰巧更熟悉这些 DevTools。也有一些粗糙的边缘，例如我在终端中的小型 tmux 会话没有响应点击事件。

---

有趣的是，Swift 不是内置语言。鉴于它的 Mac 特性，我原本以为 Panic 甚至用 Swift 编写了 Nova 的至少一部分。

---

如果没有别的，您应该查看 Nova 着陆页 以了解所有 CSS 技巧！说明 Nova 主题的图像上的动画 clip-path 超级酷（我听说 clip-path 动画在 Safari 中是硬件加速的，这很棒！）。它只是将一些图像叠加在一起，所有图像都共享相同的动画，并错开。

@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; }

不过 <hr>……太漂亮了

哦，并查看 display-p3 颜色格式的使用！