web-dev-qa-db-ja.com

Visual Studio 2015 JSX / ES2015構文ハイライト

JSX for ES2015コードでVisual Studio 2015で適切な構文強調表示を取得するにはどうすればよいですか？

ES2015 code

importキーワードとexportキーワードを削除すると問題なく動作します： Without import/export

Visual Studio 2015 Enterprise Update 1に更新しましたが、それでも変わりません。

visual-studio-2015intellisenseecmascript-6react-jsx
63
user3900456

更新（2017-02）

Node Tools for Visual Studio（NTVS）はv1.2以降Salsa分析エンジンを使用しており、NTVSを使用することがJSXサポートの抵抗が最も少ないパスです。

https://github.com/Microsoft/nodejstools

詳細については、この回答を読んで（そして投票して）： https://stackoverflow.com/a/41996170/9324

元の回答

同じ問題にぶつかり、ReSharperを使用するソリューションとVisual Studioの外部Webツールを変更するソリューションの2つを見つけました。

ソリューション1

ReSharper 10の場合：

  • Optionsダイアログを開きます
  • Code Editing> JavaScript> Inspectionsの下で、JavaScript言語レベルドロップダウンでECMAScript 6を選択します
  • 。JSファイルでJSX構文を有効にするオプションも選択されていることを確認します（JSX構文を使用する場合）。
  • また、次のようにVisual StudioでJavaScript構文エラーを無効にする必要があります。
    • ツール>オプション>テキストエディタ> JavaScript> IntelliSenseに移動します
    • Show syntax errorsボックスのチェックを外してOKをクリックします。
  • vSソリューションをリロードする

ソリューションをリロードした後、赤い波線が消えました。ただし、JSXの構文強調表示は機能しません。 render関数で宣言した要素の開始セグメントには適切な色が付いていませんが、無視するのは簡単です。

また、JavaScriptファイルには。js拡張子が必要であることに言及する必要があります。それらに。jsx拡張子を付けると、最初のimportステートメントで赤い波線が表示されます。エラーメッセージはJSX Parser: illegal import declarationになります。 （これは、以下の解決策2を使用して修正できます）

UPDATE：この回避策の@SntsDevに感謝します。jsxファイルを。js：

  • visual Studioで、Options> Text-editor> File Extensionに移動します
  • jsxを追加してJavascript Editorに割り当てます

ソリューション2

好奇心が私を良くしてくれたので、ReSharper以外のソリューションがあるかどうかを調べたかったのです。 Visual Studioは、react-serverという名前のローカルで実行されるノードサーバーモジュールを使用して、JSXをその場で解析します。このモジュールは次の場所にあります。

C:\Program Files (x86)\Microsoft Visual Studio
14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\react-server

Visual Studio 2015 Update 3の更新コメント/更新の@ TheQuickBrownFoxに感謝します。 Update 3では、react-serverコマンドの場所は次のファイルにあります。

C:\Program Files (x86)\Microsoft Visual Studio 
14.0\Web\External\vs-task-server\react-commands.js

前述のフォルダーからserver.jsまたはreact-commands.jsファイルをさらに調べると、transformJsxFromPostまたはtransformJsxという名前の関数があります。このメソッドには、var transformed = reactTools.transformWithDetails(code, { elementMap: true });という行が含まれています。これはreact-toolsモジュール（ https://www.npmjs.com/package/react-tools ）への参照であり、ES6の解析に使用できるオプションがさらにあります。

したがって：

  • 次の行を置き換えます。

    var transformed = reactTools.transformWithDetails(code, { elementMap: true });

  • 次のように：

    var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

    --es6moduleおよび--harmonyフラグが追加されていることに注意してください。これらのフラグは、着信コードをES6として扱うようreact-toolsに指示します。

  • 次のようにVisual StudioでJavaScript構文エラーを無効にします。

    • visual Studioで、Tools> Options> Text Editor> JavaScript> IntelliSenseに移動します
    • 構文エラーを表示ボックスのチェックを外してOK

  • 重要：Visual Studioを再起動します。 ES6コードを含む.jsxファイルのES6コードに赤い波線が表示されなくなります。

注：

  • 解決策2でserver.jsファイルに説明されている変更が非ES6コードに影響するかどうかはわかりません。したがって、自己の責任において実装してください。
  • また、Visual Studioの最新の更新で変更が上書きされる可能性が非常に高いです。
  • react-tools内のreact-serverの使用をBabel CLIで置き換えるのはクールで楽しいでしょう。 UPDATE：@NickDewittのおかげで、彼はこの仕事をすることができたようです： https://stackoverflow.com/a/36321109/9324
75
Adam Weber

VS2015 Update-3およびNTVS 1.2がインストールされている場合、ファイル拡張子jsxのデフォルトエディターとしてTypeScript Editorを設定するだけで、私。

1）Tools> Options> Text Editor> File Extensionを開きます。

2）拡張機能でjsxと入力し、エディターとしてTypeScript Editorを選択し、適用をクリックします。

enter image description here

25
Chebyr

EDIT：Visuals studio 15はVisual Studio 2017に名前が変更されました：RCはこちらから入手できます： https：// www。 visualstudio.com/vs/visual-studio-2017-rc/

今後の解決策：

Visual Studio "15" Preview 2は、すぐにJSX en Reactをサポートします。 VS Codeなどの同じ（Salsa）Javascriptサービスライブラリを有効にできます。

ここにリリースノート： https://www.visualstudio.com/en-us/news/releasenotes/vs15/vs15-relnotes

サルサ： https://github.com/Microsoft/TypeScript/wiki/Using-the-Salsa-Preview-in-Visual-Studio-15-Preview

7
Reint Jan Hoiting

ソリューション '3'：

Adamの答えの洞察のおかげで、これは babel で動作し、プラグイン/プリセットです。あなたがこれを試しているなら、最初に彼の答えを読む価値があります。

さらに先に進む前に nodeJs および npm をインストールする必要があります。また、ファイルを変更する前にバックアップすることもできます。

私は react 、 es2015 ここで stage1 プリセットを使用したプラグインを使用していますが、何でも使用できます plugins あなたが好き

  1. C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\react-serverへのPowerShell

  2. 次のパッケージをインストールします。

    npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
npm install babel-preset-react --save-dev
npm install babel-preset-stage-1 --save-dev

  3. 依存関係をserver.js以下childProcessに追加します

    var childProcess = require('child_process'); //already there
var babel = require('babel-core');
var es2015 = require('babel-preset-es2015');
var react = require('babel-preset-react');
var stage1 = require('babel-preset-stage-1');

  4. transformJsxFromPost関数のtry{}catch{}割り当てのreq.on('end'セクションを置き換えます。

    try {

    var transformed = 
        babel.transform(
            code, 
            {
                sourceMaps: true, 
                presets: [
                    es2015, 
                    react, 
                    stage1
                ]
            }
        );

    result = { 
        elementMappings: []
    }
    //I found it least buggy when returning an empty list of elementMappings
    //but i will leave the code i was using to try and dupe it, or 
    //recreate the elementMappings from react-tools
    //
    // result = { 
        // elementMappings: [{
            // 'start': 1,
            // 'end': transformed.code.length,
            // 'generatedCode': transformed.code
        // }], 
        // map: transformed.map, 
        // code: transformed.code
    // }
}
catch (e) {
    //the error that react-tools was returning was slightly different, so
    //map the babel error back to the react-tools error that VS 2015 expects
     result = {
         column: e.loc.column,
         description: e.errorMessage,
         errorMessage: e.message + ".. :-(",
         index: e.pos,
         lineNumber: e.loc.line
     };
}

  5. Visual Studioを再起動し、.jsxファイルをすべて閉じてから開き、babel構文の強調表示をお楽しみください:-)

注
開始後にパーサーにキックする機会を与えます。VisualStudioは、初めて.jsxファイルにロードするときに以下を実行します。

  1. %localappdata%\Temp\にフォルダーを作成し、stderr.txtでエラーのログを見つけることができます。stdout.txtは、サーバーが実行されている{port}を示し、他の情報も記録します。 。
  2. Node_sサーバーを起動し、localhost:{port}でJSXをPOSTとして受け入れ、/transformJsxFromPostでJSXを受け入れ、最初のエラーの行番号と列番号をjsonオブジェクトとしてvisualに返しますスタジオ

Adamが答えのソリューション1で示したように、jsxファイルのjavascriptインテリセンスをオフにする必要がありました。

Visual Studioで、[ツール]> [オプション]> [テキストエディター]> [JavaScript]> [IntelliSense]に移動し、[構文エラーを表示する]ボックスをオフにして[OK]をクリックします。

Javascript intellisenseがオフの場合、vsにパッケージされたreact-serverとここで置き換えるbabelの両方が最初に遭遇したエラーのみを返すため、ファイル全体のすべてのエラーが強調表示されることは期待できませんが、表示されますコードエラーが発生しないようにすると、入力時にアップします。

elementMappingsを適切に取得するだけです。解決策4かもしれません。 :-)

5
user1641172

これを調査しようとしながら、Visual Studioのすべてのバージョンでjsxファイルを操作する簡単な方法を実現しました。それは完璧ではありませんが、私にとってはうまくいきます。

最新のVisual Studioコード[ https://code.visualstudio.com/updates ]をダウンロードし、使用しているVisual Studioのバージョン内のjsxファイルを右クリックして、[開く...]を選択します。 [追加]を選択し、最近ダウンロードしたVisual Studioコードを参照して、これをデフォルトにします。

アップグレードが必要なことを心配している人に役立つことを願っています。

4
Mark Caple

上記のコメントで@TheQuickBrownFoxに言及されていますが、デフォルトでは非表示（表示するにはすべて展開する必要があります）。したがって、最新のVisual Studio 2015 Community Update 3で問題を修正するために行ったことを要約します。

100％fromSolution 1 by Adam Weber： https://stackoverflow.com/a/34110461/163391 （設定ReSharperのJavaScript言語レベルからECMAScript 2016、およびチェック同じウィンドウでJSXを有効にする...+無効にするVS JavaScript IntelliSenseで構文エラーを表示するオプション）

Solution 2 by Adam Weber： https://stackoverflow.com/a/34110461/163391 、ただしわずかに変更。置き換える必要があるターゲットファイル：

これ：var transformed = reactTools.transformWithDetails(code, { elementMap: true });

これで：var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

確かにここにあります：C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\vs-task-server\react-commands.js

vSを再起動すると完了です。

4
Bartosz Lenar