web-dev-qa-db-ja.com

Visual Studio Codeで言語をJSXに変更する

Visual Studio Codeは現在 .8バージョンでJSXをサポート ですが、それをアクティブにする唯一の方法は.jsxファイル拡張子を使用することです。言語モードを手動で変更することはリストにありません。最も近いオプションはJavaScriptReactですが、JSXタグを解析しません。

JSXで.jsファイルがたくさんあるプロジェクトに参加していますが、変更することはできません。

.jsx拡張なしでJSX構文を使用する他の方法はありますか？

react-jsxvisual-studio-code
50
William Grasel

ユーザー設定またはワークスペース設定を次のように変更します。

// Place your settings in this file to overwrite the default settings
{
    "files.associations": {
        "*.js": "javascriptreact"
    }
}

注：VSCodeの再起動が必要になる場合があります。

131
Dionys

できますが、JavaScriptReactモードでは「React JSファイルではない」も表示されます。

  1. ファイルC：\ Program Files（x86）\ Microsoft VS Code\resources\app\plugins\vs.language.javascript\syntaxes\javascriptreact.jsonを開きます（おそらく、管理者権限で開く必要があります）。
  2. 配列「fileTypes」の「jsx」を「js」に変更します。
  3. アプリを再起動し、開いているjsファイルを閉じて、再度開きます。
7
Kohei Sugimura

これを理解するのにしばらく時間がかかりましたが、JSXはすでにVS Codeの一部であるEmmetの一部です。 Emmetに、（追加として）JSXスニペットを通常のJSファイルでも利用可能にするように言いました。

設定ファイルにこれを入れてください：

"emmet.syntaxProfiles": {
    "javascript": "jsx"
}
5
dbochen

Dionysの答えは機能しますが、Visual Studio Codeの最新バージョンではこれを行うより良い方法があります。

File>Prefrences>Settingsに移動し、下にスクロールして[Emmet]を見つけてタブを開くと、次のテキストが表示されます。

  // Enable Emmet abbreviations in languages that are not supported by default. Add a 
  mapping here between the language and emmet supported language.
  //  E.g.: {"vue-html": "html", "javascript": "javascriptreact"}
  "emmet.includeLanguages": {},

そのため、指示に従って"emmet.includeLanguages": { "javascript": "javascriptreact" }を右パネルのjsonに追加します（ユーザー設定を上書きします）。

3
Panos

現在、 VSコード拡張により、.jsファイルを.jsxファイルとして扱うことができます があります。

残念ながら、拡張機能のreadmeも警告しています：

この拡張機能をインストールすると、.jsファイルに提供されている既存の言語サポートがすべて失われます

幸い、VS Codeは Salsaを採用 に非常に近くなりました。つまり、js-is-jsxの問題はすぐに完全に解決されるはずです。

3
Brent Arias

以下はコードをフォーマットする最も簡単な方法だと思います

VS Code Editorの右下のJavascriptをクリックします。

言語モードを選択するオプションが表示されます。ここで、JavaScriptReactを検索して選択できます。それでおしまい。これで問題が解決するはずです。

1 . Check if JavascriptReact is selected??enter image description here

3
Abhilash Reddy