web-dev-qa-db-ja.com

React、Emmet、Visual Studio Code、およびCSSモジュール

ReactのCSSモジュールを使用するようにビジュアルスタジオコードでemmetを構成する方法はありますか？

「div.container」と入力してタブを押すと、<div className="container"></div>になります。

ここでの問題は、CSSモジュールを使用していないことです。これになりたいです：<div className={styles.container}></div>

VSコードでこの機能を取得する方法はありますか？

reactjsvisual-studio-codeemmetcss-modulesreact-css-modules
9
MattEnth

はい、できますが、自分でSNIPPETを作成する必要があると思います。 VSCODEドキュメントから：

MACの場合：コード->設定->ユーザースニペットで、好きなように呼び出します

そのスニペットファイルを開くと、次のようになります。

{
    "For_Loop": {
        "prefix": "for",
        "scope": "javascript,TypeScript",
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\t$0",
          "}"
        ],
        "description": "For Loop"
    }
}

多くのプレースホルダーやその他の変数を実行できます。ここにリンクがあります： https://code.visualstudio.com/docs/editor/userdefinedsnippets

この変数を使用してもよいと思います

TM_CURRENT_LINE - The contents of the current line

それが役に立てば幸い

3
Freestyle09

EmmetはまだCSSモジュールをサポートしていないと思います。それでも、エディターが推測できないstylesオブジェクトが必要です。これは非常に実行可能ですが、最善のアプローチはカスタムbabelプラグインを使用することだと思います。

0
David Munoz

emmetプラグインを使用することで、以下の手順に従ってVSコードで問題を解決できます。

1）ホールドctrl+shift+p VSコード内

2）「settings.json」と入力し、「設定を開く（JSON）」を選択します

3）settings.jsonファイルを開いたら、以下の行をファイルに追加します。

    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
     }

それが役に立てば幸い！

0
Kishore Kumar Govindaradjou