Emmet: Эммет для CSS-in-JS

@renatorib Вы уже нашли решение использовать emmet для CSS-inJS?

Неа

Если вы используете Atom, ознакомьтесь с https://atom.io/packages/atom-emmet-css-in-js.

для vscode есть два пакета:

• js-сниппеты
• CSS-в-JS

У второго больше установок, но я не смог заставить его работать :/

Работаю над этим как часть Emmet v2: https://github.com/emmetio/emmet/tree/v2
Можете ли вы предоставить некоторые характеристики желаемого поведения (лично я не использую CSS-in-JS)?

@sergeche поведение будет очень похожим:

например, внутри файла .jsx нажатие bgc<TAB> расширится до ` backgroundColor: '#' с курсором после # .

Уведомление:

1. недвижимость в верблюжьем корпусе
2. значение в этом случае является строкой
3. значение также может быть числом, например, для opacity , поэтому мы опустим кавычки, т.е. нажатие op<TAB> расширится до opacity:

Что вы думаете?

@goldylucks да, текущая реализация работает так: https://github.com/emmetio/emmet/blob/master/test/stylesheet.ts#L167
Я думал, что есть некоторые причуды, например, несколько значений должны быть массивами ( margin: 10px 20px → margin: [10, 20] ) или что-то в этом роде.

Если это в основном JSON-подобный вывод свойств CSS, то он уже реализован в новом Emmet.

@sergeche должны ли градиентные аббревиатуры CSS lg() работать в css-in-js? Я не могу заставить его работать.

@tayler-ramsay должен работать. Используете ли вы последнюю RC-версию Emmet (v2.0.0rc-5)?

@sergeche спасибо за быстрый ответ. Я работаю в коде VS. Есть ли способ убедиться в используемой версии?

Я думаю, что это только v2. Я мог бы просто установить это как зависимость, которая хороша. Просто интересно, могу ли я обновить его в коде VS. Извините за редактирование моего ответа ;/

О, тогда он еще не доступен. Новая версия Emmet доступна только в новом плагине Sublime Text.

Ваше здоровье!
С наилучшими пожеланиями,

Тайлер Рэмзи ({

• ({Разработчик} && "Дизайнер")*
• возвращение {*
  [ Телефон: (717) 578-3243,
  www.tayler.co http://www.taylerramsay.com/ ]
• }*
• });*

«Это такая тонкая грань между глупым и умным».

В среду, 30 октября 2019 г., в 10:15 Сергей Чикуёнок[email protected]
написал:

О, тогда он еще не доступен. Новая версия Emmet доступна только в
новый плагин Sublime Text

—
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/emmetio/emmet/issues/512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGO9ment2HI#iss
или отписаться
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
.

Поддержка литералов шаблонов css тоже была бы отличной.

Например

const style = css`
  background-color: red;
  /* Auto-expand css props */
`;

Редактировать: не обращайте внимания, мне просто нужно было установить расширение vscode-styled-components .

Спасибо!

Отлично! Пожалуйста, @sergeche , дайте мне знать, если я могу чем-то помочь с этой функцией.

Вчера я выложил Emmet 2.0 в открытый доступ (сама основная часть), он доступен в редакторах Sublime Text, CodeMirror и Nova. Вы можете дать мне несколько фрагментов кода с реальными вариантами использования, чтобы я мог настроить редактор для лучшего определения контекста.

Например, в JS(X) аббревиатуры должны начинаться с префикса < , чтобы не отвлекать пользователей ложными совпадениями. Например, вы должны написать что-то вроде <div.my-class . Я могу сделать собственный префикс, чтобы вы могли четко указать, что аббревиатура, которую вы вводите, должна быть расширена как литерал объекта CSS. Что-то вроде |m10+p5

Это потрясающе! Что касается фрагментов, это зависит от используемого вами CSS-in-JS (и даже от того, как вы его настроили). Хорошим примером является исходный пример из этого выпуска (я подправил margin ):

{
  display: 'flex',
  fontSize: '16px',
  margin: '10px 5px',
}

Вы также можете сделать что-то подобное и получить те же результаты (по крайней мере, в JSS):

{
  display: 'flex',
  fontSize: 16,
  margin: [[5, 10]],
}

Поскольку существует множество разновидностей CSS-in-JS, я думаю, что самым безопасным по умолчанию было бы использование значений в кавычках, как в первом примере.

Есть ли шанс попробовать это в VS Code?

В ближайшем будущем я планирую переписать расширение VSCode для поддержки всех функций Emmet.

Отправлено с iPhone

2 мая 2020 г., в 15:25, Томас уведомления@github.com (написал):

В
Есть ли шанс попробовать это в VS Code?

—
Вы получаете это, потому что вас упомянули.
Ответьте на это письмо напрямую, просмотрите его на GitHub или отмените подписку.

Привет 👋
Основываясь на приведенном выше разговоре, похоже, что Emmet поддерживает синтаксис объектов CSS в файлах .js , но это еще не поддерживается в VS Code.

Это точно? ☝️

Я искал Google, но я не мог найти прямого ответа.
@sergeche Большое спасибо за вашу работу над этой функцией!

Да, новая версия Emmet (уже в VSCode) уже поддерживает вывод в виде свойств JSON. Требует дополнительной поддержки от самого плагина

Эй, это здорово! Я пока не понял, как заставить его работать.

Требует дополнительной поддержки от самого плагина

☝️ Можете ли вы немного подробнее рассказать об этом или указать мне правильное направление? Есть ли где-нибудь документы о том, как заставить его работать?
Еще раз спасибо!

Установка emmet.includeLanguages в "javascript": "css" дает мне стандартный CSS (не синтаксис объекта).
Установка его в "javascript": "javascriptreact" пытается превратить CSS в JSX.

Есть ли другой параметр, который я должен использовать для получения синтаксиса объекта CSS? Нигде не могу найти список возможных вариантов. Здесь вы можете увидеть мои settings.json и проблему, с которой я столкнулся:

https://user-images.githubusercontent.com/19367659/113518218-ebbfbb00-9552-11eb-8963-eadef0b15f06.mp4

Чтобы было ясно, я надеюсь ввести это в свой файл .js :
d:f+jc:c+ai:c+mt10

И получите этот вывод:

display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,

Для этого параметра необходимо установить значение true : https://github.com/emmetio/emmet/blob/51757fc77ee2477c2e2cc6abeff44e64c8a85eec/src/config.ts#L257 .

Не знаю, как установить параметры Emmet в плагине VSCode (я не сопровождаю)

Я думаю, что вы правы @sergeche , вы нашли способ добавить конфиг в VSCode?

@josegutierro еще не пробовал. Я предполагаю, что это не просто опция в плагине VSCode, она должна правильно поддерживаться плагином, чтобы работать.

Спасибо @sergeche за то, что сейчас я использую это расширение nativeEmmet . На самом деле это не Эммет, но есть много фрагментов с завершением табуляции. Вот полный список