Emmet: CSS-in-JSのEmmet

@renatorib CSS-inJSにemmetを使用するためのソリューションをもう見つけましたか？

いいえ

Atomを使用している場合は、 https：//atom.io/packages/atom-emmet-css-in-jsを確認してください。

vscodeには、次の2つのパッケージがあります。

• jsスニペット
• CSS-in-JS

2つ目はインストール数が多いのですが、動作させることができませんでした：/

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] ）か何かでなければならないなどの癖があると思いました。

それが主にCSSプロパティのJSONのような出力である場合、それはすでに新しいEmmetに実装されています

@sergeche lg（）グラデーションCSSの略語はcss-in-jsで機能する必要がありますか？ 私はそれを動かすことができないようです。

@ tayler-ramsayが機能するはずです。 Emmetの最新のRCバージョン（v2.0.0rc-5）を使用していますか？

@sergeche迅速な対応に感謝します。 VSコードで作業していますが、使用しているバージョンを確認する方法はありますか？

v2だけだと思います。 私はちょうどインストールすることができます良い依存関係としてです。 VSコードでアップグレードできるかどうか疑問に思っています。 回答を編集して申し訳ありません; /

ああ、それはまだ利用できません。 新しいEmmetバージョンは、新しいSublimeTextプラグインでのみ使用できます

乾杯！
よろしくお願いします、

テイラー・ラムゼイ（{

• （{開発者} && "デザイナー"）*
• 戻る {*
  [電話：（717）578-3243、
  www.tayler.co http://www.taylerramsay.com/ ]
• } *
• }）; *

「それは愚かなことと賢いことの間のとても細い線です。」

2019年10月30日水曜日午前10時15分[email protected]
書きました：

ああ、それはまだ利用できません。 新しいEmmetバージョンはでのみ利用可能です
新しいSublimeTextプラグイン

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/emmetio/emmet/issues/512?email_source=notifications&email_token=ABIQ3EJ6D2Z4ZLBO4UEWQ4DQRGJH5A5CNFSM4DYL4R72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXH
または購読を解除する
https://github.com/notifications/unsubscribe-auth/ABIQ3EIQ3SNIWMCE4WE3ZADQRGJH5ANCNFSM4DYL4R7Q
。

cssテンプレートリテラルのサポートも素晴らしいでしょう。

例えば

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

編集：気にしないでください。vscode-styled-components拡張機能をインストールする必要がありました。

ありがとう！

これは素晴らしい！ @sergecheさん、この機能についてサポートが必要な場合はお知らせください。

私は昨日Emmet2.0を公開しました（コア部分自体のみ）。SublimeText、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でこれを試すチャンスはありますか？

近い将来、すべてのEmmet機能をサポートするためにVSCode拡張機能を書き直す予定です。

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

2月2020日、15：25、 Thomasnotifications @github.comнаписал（а）：

。
VS Codeでこれを試すチャンスはありますか？

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示するか、登録を解除してください。

こんにちは👋
上記の会話に基づくと、Emmetは.jsファイル内のCSSオブジェクト構文をサポートしているようですが、これはVSCodeではまだサポートされていません。

これは正確ですか？ ☝️

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

VSCodeプラグインでEmmetオプションを設定する方法がわからない（私はメンテナーではありません）

私はあなたが正しい@sergecheだと思います、あなたは設定をVSCodeに追加する方法を見つけましたか？

@josegutierroはまだ試していません。 VSCodeプラグインの単なるオプションではなく、プラグインが機能するためには適切にサポートされている必要があります。

この拡張機能nativeEmmetを使用している間、@ sergecheに感謝します。 実際にはエメットではありませんが、タブ補完のあるスニペットがたくさんあります。 これが完全なリストです