Как использовать синтаксис VSCode css .customData для сообщения css - PullRequest
Новая
       79

Как использовать синтаксис VSCode css .customData для сообщения css

1 голос
/ 20 июня 2020

Я хочу расширить автозаполнение postcss с помощью моих пользовательских цветов / шрифтов / и других c переменных через custom-data-format . Я могу легко сгенерировать JSON вот так в моем UI Kit.

Проблема в том, что я использую postcss в качестве синтаксиса для файлов *.css, поэтому я не могу использовать автозаполнение значения, как они определены для css, только в css.css-data.json. если я выберу синтаксис css для этих файлов - автозаполнение работает нормально, но, очевидно, отключает другие особенности языка Post CSS / выделение синтаксиса et c.

Как мне настроить customData, чтобы все, что я определяю в css.css-data.json будет работать с синтаксисом postcss?

Я пробовал postcss.customData безуспешно. Легко воспроизводится на этом образце рабочего пространства

Любая помощь приветствуется, спасибо!

1 Ответ

0 голосов
/ 23 июня 2020

На данный момент синтаксис сообщения css не поддерживается (вы можете отслеживать эту проблему для информации), вот обходной путь для решения проблемы автозаполнения:

введите описание изображения здесь

Вы можете достичь sort-of-autocomplete с помощью сниппетов - здесь я создал json с именем my-autocomplete.code-snippets и просто поместил его в workspace/.vscode: 

    {
    "my-ui-kit-variables": {
        "scope": "postcss",
        "prefix": "$my-ui-kit",
        "body": "${2|$my-ui-kit-color-white,$my-ui-kit-color-transparent,$my-ui-kit-color-black,$my-ui-kit-color-gray-night-10,$my-ui-kit-color-gray-night-100,$my-ui-kit-color-gray-night-200,$my-ui-kit-color-gray-night-250,$my-ui-kit-color-gray-night-300,$my-ui-kit-color-gray-night-400,$my-ui-kit-color-gray-night-500,$my-ui-kit-color-gray-night-600,$my-ui-kit-color-gray-night-700,$my-ui-kit-color-gray-night-800,$my-ui-kit-color-gray-day-10,$my-ui-kit-color-gray-day-100,$my-ui-kit-color-gray-day-200,$my-ui-kit-color-gray-day-250,$my-ui-kit-color-gray-day-300,$my-ui-kit-color-gray-day-400,$my-ui-kit-color-gray-day-500,$my-ui-kit-color-gray-day-600,$my-ui-kit-color-gray-day-700,$my-ui-kit-color-gray-day-800,$my-ui-kit-color-gray-day-900,$my-ui-kit-color-sonic-100,$my-ui-kit-color-sonic-200,$my-ui-kit-color-sonic-300,$my-ui-kit-color-sonic-400,$my-ui-kit-color-sonic-500,$my-ui-kit-color-sonic-600,$my-ui-kit-color-sonic-700,$my-ui-kit-color-sonic-800,$my-ui-kit-color-sonic-900,$my-ui-kit-color-sonic-night-disabled,$my-ui-kit-color-minion-100,$my-ui-kit-color-minion-200,$my-ui-kit-color-minion-300,$my-ui-kit-color-minion-400,$my-ui-kit-color-minion-500,$my-ui-kit-color-minion-600,$my-ui-kit-color-minion-700,$my-ui-kit-color-minion-800,$my-ui-kit-color-minion-900,$my-ui-kit-color-minion-night-disabled,$my-ui-kit-color-karl-100,$my-ui-kit-color-karl-200,$my-ui-kit-color-karl-300,$my-ui-kit-color-karl-400,$my-ui-kit-color-karl-500,$my-ui-kit-color-karl-600,$my-ui-kit-color-karl-700,$my-ui-kit-color-karl-800,$my-ui-kit-color-karl-900,$my-ui-kit-color-karl-night-disabled,$my-ui-kit-color-candy-100,$my-ui-kit-color-candy-200,$my-ui-kit-color-candy-300,$my-ui-kit-color-candy-400,$my-ui-kit-color-candy-500,$my-ui-kit-color-candy-600,$my-ui-kit-color-candy-700,$my-ui-kit-color-candy-800,$my-ui-kit-color-candy-900,$my-ui-kit-color-candy-night-disabled|}"
    }
}
...