Как я могу получить автозаполнение для свойств CSS JavaFX в VS Code?

Раньше я писал CSS JavaFX в NetBeans 8 (JavaFX 8), но префикс CSS автозаполнения «-fx» больше не доступен в Apache NetBeans 17 с JavaFX17. Я использую Visual Studio Code 1.77 в Linux с JavaFX 17 и Java JDK 17 Coretto, но, похоже, его тоже нет. Есть ли способ включить автозаполнение CSS JavaFX?

Автодополнение CSS, включая разновидность JavaFX, работает в Idea, но я думаю только в платной версии, остальные функции разработки JavaFX в Idea, такие как мастера создания проектов и поддержка FXML, включены в бесплатную версию сообщества.

jewelsea 06.04.2023 05:47

@user Извините за путаницу, я не знаю, как автозаполнение определяется в VSCode. Я предположил, что потребуется выполнить синтаксический анализ, чтобы понять, как автозаполнять, чтобы узнать, какие варианты доступны и где.

jewelsea 06.04.2023 07:02

@user Но я думаю, что базового синтаксического анализатора CSS достаточно, и вы можете получить некоторое автозаполнение, определив -fx атрибуты CSS в пользовательском формате данных json, который предоставит возможность автозаполнения -fx атрибутов CSS. Я предполагаю, что было бы недостаточно знать, чтобы предоставлять только атрибуты, применимые в данном контексте, например, знать, что -fx-background применяется только к областям, а не к тексту, или понимать искомые цвета или параметры формата линейного градиента, которые я обычно ожидаю в интеллектуальный редактор, но, вероятно, пользовательский формат данных — это простой способ получить некоторую поддержку.

jewelsea 06.04.2023 07:02
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
5
3
239
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете получить что-то базовое с помощью средства пользовательских данных CSS VS Code . Это средство довольно ограничено. Кажется, в настоящее время у него нет способа ограничить допустимые значения для каждого пользовательского свойства ( cssLanguageTypes.ts mentions restrictions and values fields, but those aren't in the customdata JSON schema for reasons I don't know), и, похоже, у него нет способа ограничить, какие селекторы релевантны свойству (но опять же, я не думаю, что VS В любом случае встроенный CSS кода имеет такую ​​функцию).

Создайте в своей рабочей области файл с именем вроде «javafx-css-vscode-customdata.json» и поместите в него следующее:

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

  ]
}

Затем откройте справочную документацию по CSS для версии JavaFX, которую вы используете (например, https://openjfx.io/javadoc/20/javafx.graphics/javafx/scene/doc-files/cssref.html), и запустите следующий код JavaScript в инструментах разработки вашего браузера:

console.info([...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")
);

Скопируйте вывод этого кода и вставьте его в массив properties в JSON-файле customdata.

Затем в файле .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.

очень хорошо объяснил, я следовал шаг за шагом, и это работает (версия vscode: 1.77.1)

Giovanni Contreras 06.04.2023 21:53

Другие вопросы по теме