如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能？

Question

我曾经在 NetBeans 8 (JavaFX 8) 上编写 CSS JavaFX，但自动完成“-fx”CSS 前缀在带有 JavaFX17 的 Apache NetBeans 17 上不再可用。我在 Linux 上使用 Visual Studio Code 1.77 以及 JavaFX 17 和 Java JDK 17 Coretto，但似乎也没有。有没有办法启用 JavaFX CSS 自动完成？

Answer 1

公告：有人使用了这个答案帖子并应用它来创建 VS Code 扩展：bernardoamorim7.javafx-css-support-vscode。我与此扩展没有任何关系，也不对其正确性或是否会在添加新 CSS 属性时保持最新状态做出任何承诺。仅供参考，它存在，您可能会发现它使用起来很方便，而不是进行我在下面解释的手动设置。

您可以使用VS Code 的 CSS 自定义数据工具获得一些基本的东西。这个设施相当有限。目前似乎没有办法限制每个自定义属性的允许值^{_{（cssLanguageTypes.ts提及restrictions和values字段，但由于我不知道的原因，这些值不在自定义数据 JSON 架构中）}}，而且它没有似乎有一种方法可以限制属性与哪些选择器相关（但话又说回来，我不认为 VS Code 的内置 CSS 具有这样的功能）。

在工作区中创建一个名为“javafx-css-vscode-customdata.json”的文件，然后在其中输入以下内容：

{
  "$schema": "https://github.com/microsoft/vscode-css-languageservice/raw/main/docs/customData.schema.json",
  "version": 1.1,
  "properties": [

  ]
}

然后打开您正在使用的 JavaFX 版本的 CSS 参考文档（例如https://openjfx.io/javadoc/20/javafx.graphics/javafx/scene/doc-files/cssref.html），然后运行在浏览器的开发工具中输入以下 JavaScript 代码：

console.log([...document.querySelectorAll("tr:has(th.propertyname)")]
  .filter(tr => tr.children[0].textContent.startsWith("-fx-"))
  .map(tr => {
    const clean = c => c.textContent.trim().replaceAll("\"","\\\"").replaceAll(/\n +/g," ");
    const descParts = [...tr.children].slice(1).map(clean);
    const headers = [...tr.parentElement.parentElement.querySelector("thead > tr").children].slice(1).map(clean);
    const description = headers.map((header,index) => `${header}: ${descParts[index]}`).join("\\n\\n");
    return `{\n  "name": "${tr.children[0].textContent}",\n  "description": "${description}"\n}`;
  })
  .join(",\n")
);

复制该代码的输出并将其粘贴到propertiescustomdata JSON 文件中的数组中。

然后，在工作区的.vscode/settings.json文件中，输入以下内容：

"css.customData": [
   "./javafx-css-vscode-customdata.json"
]

以下是上述脚本的部分输出示例：

{
  "name": "-fx-opacity",
  "description": "**Values**: <number>\n\n**Default**: 1\n\n**Range**: [0.0 ... 1.0]\n\n**Comments**: Opacity can be thought of conceptually as a postprocessing operation. Conceptually, after the node (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering."
},

您可能需要重新启动 VS Code 才能看到新更改生效。

我将包含一个示例自定义数据 JSON 文件，但它太大，无法满足 Stack Exchange 的帖子大​​小限制。

请注意，如果您只是希望属性没有“无法识别的属性”警告，那么您可以使用该css.lint.validProperties设置。