Vim 插件可处理自定义 HTML 标签和 SCSS

Question

我的 Vim 级别大约是中级 - 我已经使用它大约 10 年了，但处于“新手”级别 - 查找文件、删除某些内容、添加某些内容、保存并退出。 现在我决定让 Vim 成为我唯一的代码编辑器。 我正在使用 Ionic 框架（它是 Angular + SCSS），我对一些有用的东西有疑问：

1. 有没有办法将所有非标准的 HTML 标签添加到 Syntastic？它突出显示了所有 Ionic 标签，例如<ion-list>、<ion-button>、<ion-radio> 等。如果我的 google 技能足够好，没有完整的 Ionic 插件，它将添加 sn-ps、合成检查器等。
2. 有没有办法查找和添加从 HTML 到 SCSS 以及从 SCSS 到 HTML 的类？我的意思是，如果我在 SCSS 文件中写入.my-very-important-class，然后转到 HTML 文件（位于同名的同一目录中，但 .html 或 .scss 不同）并在class="" 属性中开始输入“我的“我将获得该课程的自动完成建议。是真的制作还是有人已经制作了？
3. 还有一个用于主题化应用程序的主文件，名为variables.scss。我需要扫描这个文件并匹配颜色（在这个文件中有一个颜色部分，我可以在其中放置所有颜色，我需要在应用程序中，以及在任何页面的 .scss 文件中，我可以得到我需要的颜色color: color($colors, colorname) 其中colorname 是颜色变量的名称。这是一个很棒的功能，除了代码中没有颜色突出显示。因此，获得颜色映射然后在页面的 .scss 文件中以正确的颜色突出显示会很棒。

我没有找到任何插件。如果我错过了一些现有的插件 - 我很乐意尝试。如果不是 - 我会很高兴自己制作一个（如果不是很难的话）。无论如何，我认为这不仅对我有用。

UPD: #1 已修复 - 我不确定具体如何，但现在它在 HTML 中很好，并且我没有来自语法错误标签的错误或警告。我感觉是新手，但好像我忘了安装 Vim-ionic2 插件 - 刚刚将它添加到我的 .vimrc 中。

#2 似乎得到了回答 - 满足我的需要。

Answer 1

关于第一点，我会说 vim 本身并没有突出显示所有 HTML 元素（main、header 等），因为默认的 html.vim 文件有点过时了。但是，我刚刚创建了一个存储库，在其中添加了要突出显示的所有剩余元素。 如果您遇到您正在使用的语言中的某些内容没有突出显示，您应该创建一个 .vim 文件，添加您想要突出显示的关键字。我把我讲过的仓库分享给你：github repo

人们可以做出贡献会很好，这样我们就不必创建重复的 vim 文件了。

您可以在此处阅读有关语法的更多信息：vimdocumentation

Answer 2

1. Syntastic 是多个 linter 的前端。找到 Syntastic 使用的 linter，并寻找一种方法让它接受这些自定义标签。

2. 如果您打开了 CSS 文件，<C-n> 应该可以让您完成 CSS 类。

   你可能需要像set iskeyword+=- 这样的东西来让 Vim 完成整个类名。

3. 我认为这完全没用。也就是说，如果你没有找到这样的东西……就写吧。

Answer 3

首先，我真的建议您将其分成三个单独的问题。我觉得他们可以很容易地得到没有真正联系的专门答案。有人可能对其中一个有很好的建议，但对其他人却没有。就我而言，我只能给你关于 2) 和 3) 的建议。

对于 2)，您可以使用 romainl 的建议来完成关键字。您还可以尝试使用 ctags 为您的 CSS 文件生成标签。这是一种可能的方法：https://github.com/rstacruz/ctags-css。一旦你有了标签，你就可以使用标签完成。请参阅:help ins-completion，尤其是“标签”部分。不过，最好通读整个部分，以了解可能的情况。

对于 3)，这里有插件。试试这个：https://github.com/lilydjwg/colorizer