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

你可以用VS Code's CSS Custom Data facility英镑买到一些基本的东西.这个设施相当有限.它目前似乎没有办法限制每个自定义属性的允许值^{_{(cssLanguageTypes.ts提到restrictions和values个字段，但由于我不知道的原因，这些字段不在CustomData JSON模式中)}}，它似乎也没有办法限制属性与哪些 Select 器相关(但话又说回来，我认为VS代码的内置CSS无论如何都没有这样的功能).

在您的工作区中创建一个类似于"JavaFX-css-vscode-stomdata.json"的文件，并在其中放入以下内容:

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

  ]
}

然后打开您正在使用的JavaFX版本(Ex.https://openjfx.io/javadoc/20/javafx.graphics/javafx/scene/doc-files/cssref.html)，并在浏览器的DevTool中运行以下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")
);

复制该代码的输出并将其粘贴到定制数据JSON文件中的properties数组中.

然后，在你的workspace's .vscode/settings.json file分中，写下以下内容:

"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代码以使您的新更改生效.

我将包含一个示例定制数据JSON文件，但它太大了，无法满足Stack Exchange的POST大小限制.

请注意，如果您只想让属性不出现"无法识别的属性"警告，则可以使用css.lint.validProperties设置.