web-dev-qa-db-ja.com

Visual Studio CodeのJSXまたはHTMLオートコンプリート

Visual Studio CodeでコンポーネントまたはHTML補完を使用する方法はありますか？ Bootstrapなどのクラスがある場合は、各文字を手動で入力することはお勧めできません。たとえば、Emmetのような補完：ul>li*2>a

var React = require('react');

var Header = React.createClass({
    render: function () {
        return (

            <nav className="navbar navbar-defaullt">
                <div className="container-fluid">
                    <a href="/" className="navbar-brand">
                        <img width="50" height="50" src="images/logo.png" alt="logo" />
                    </a>
                    <ul className="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/#about">About</a></li>
                    </ul>
                </div>
            </nav>

                );
                }
                });
module.exports  = Header;
reactjsautocompletevisual-studio-codejsxemmet
53
owaishanif786

Visual Studioコードは.jsx拡張子を検出し、デフォルトでemmetサポートを追加します（VSコード1.8.1を使用しています）

ただし、すべての反応ファイルに.js拡張を使用する場合は、VSコードウィンドウの右下隅でJavaScript Reactモードを.jsファイルに関連付けることができます。

ステップごとにこの手順を実行する方法（gif）

enter image description here

53
Andrii.Vandakurov

2019：Reactのわかりやすい回答

ReactプロジェクトでJSX/HTMLオートコンプリートを取得する最も簡単な方法は、これをユーザー設定またはワークスペース設定（<project-path>/.vscode/settings.json）に追加することです。

      "emmet.includeLanguages": {
        "javascript": "javascriptreact"
      },
      "emmet.triggerExpansionOnTab": true

変更を有効にするには、VS Codeを再起動する必要があります。

追伸React.jsプロジェクトでこのマッピングを行っていない場合は、KehkashanFazalの答えがおそらく役立つはずです。

108
Julian Soro

誰かがまだこの問題に苦労している場合：

単純に設定することを発見しました

"emmet.syntaxProfiles": {
     "javascript": "jsx" 
 },

hTML補完を有効にしません。しかし、使用：

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

します。

emmet docs によると：

"emmet.includeLanguages": {}

デフォルトでサポートされていない言語でエメットの略語を有効にします。ここで、言語とサポートされているエメット言語の間にマッピングを追加します。
例：{"vue-html": "html", "javascript": "javascriptreact"}

35
Kehkashan Fazal

画面の右下で適切な言語モードを選択するだけです：JavaScript React。に設定します

21
Donskikh Andrei

これらのソリューションはいずれも機能しませんでした...しかし、自動終了タグ拡張機能は機能します！ https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

8
Cole

2018

VSCode(ver 1.27.2)を使用しています

Reactで作業している場合でも、私の経験に基づいてください。 VSCodeで検出された言語は、まだVanilla JavaScriptです。そして、エメットは機能しませんでした。

  • 再び機能させる方法の1つは、VSCode検出言語をJavaScript Reactに変更することです。これは、単一のJSファイル専用です。

vscode options

  • 一度完全に変更するには、関連付ける必要があります。

two

Configure File Association for .js...をクリックします

three

そしてJSXを選択します。私の場合、これはすでに行っています。

four

  • 職場の設定の場合、およびそれらのどれもあなたのために動作しない場合は最後。 ctrl + , (comma)だけの設定に移動して開きます。

emmetまたはEmmetを入力して検索します。次に、上書きする設定をコピーします。私の場合：

{
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
}

注：jsxのみjavascriptreactを使用しようとしませんでした。

settings

2番目と3番目のステップを実装しました。これで、Emmetを実行できます。

7
RoCk RoCk

2019アップデート

。html、.js、および.jsxのタグを自動的に閉じる

そのまま使用できます。つまり、開始タグに閉じ括弧を入力すると、終了タグが自動的に挿入されます。

。jsxファイルの基本HTMLを使用したエメット

そのまま使用できます。

。jsファイルの基本HTMLを使用したエメット：

次の設定を追加します。これは、Emmetの略語の提案に必要であり、タブ拡張が一貫して機能するために必要です。

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

。jsファイルと.jsxファイルの両方でカスタムタグ（例：Reactコンポーネント）を使用したエメット

次の設定を追加します。

  "emmet.triggerExpansionOnTab": true,

この設定では、Emmetはすべての単語をカスタムタグとして展開します（Reactコンポーネント名だけでなく）

また、Emmetを使用してReactコンポーネントをカスタムタグとして展開する場合、提案リストから実際にコンポーネント名を選択し、最初にそれを完了する必要があります（または、名前全体を手動で入力し、提案メニューを閉じるにはエスケープキー）。 Wordが展開された後、Emmetにカスタムタグを展開させるには、再度Tabキーを押す必要があります。

アクティブな機能リクエスト があり、この余分なステップを削除する可能性があります（提案を選択すると自動的に展開され、標準のhtmlタグの展開と同じように機能します）。

トラブルシューティング

VSCodeの最新バージョンがあることを確認してください。

次のデフォルト設定を変更していないことを確認してください。

"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"TypeScript.autoClosingTags": true,

// read the GitHub issue listed above if you're curious why this is required).
"editor.wordBasedSuggestions": true,

// you obviously don't want javascript, javascriptreact included in here if you want Emmet to be available in those files
"emmet.excludeLanguages": [
    "markdown"
],
7
jabacchetta

以下の手順に従うだけで問題を解決できました。

  1. VSCodeの左下でJavascriptをクリックします
  2. 次に、上部にリストが表示されます。「 'Javascript'言語ベースの設定を構成する」をクリックします

  3. これらの行をファイルに追加します。

    "emmet.triggerExpansionOnTab": true,
 "emmet.includeLanguages": {
   "javascript": "javascriptreact"
}

詳細を知りたい場合は、 this リンクを確認してください。

5
Esin ÖNER

visual Studio Codeの自動クローズ拡張を使用できます。追伸拡張機能をインストールすると、VS Codeを再読み込みするか、VS Codeを再度開くか、タグ拡張機能を自動的に閉じて[再読み込み]をクリックするまで、オートコンプリートは機能しません。

自動終了タグ 拡張のリンク

4
zakaria kasmi

JSXで自動終了タグを取得するには、2つのステップが必要でした。

  1. "emmet.includeLanguages"の設定については、上記のKehkashan Fazalの指示に従ってください
  2. VSCodeからAuto Close Tag拡張機能をダウンロードします（formulahendry.auto-close-tag）

これで、ニースの自動終了JSXタグができました！

2
bildungsroman

次の2つの手順のみに従ってください。

  1. 言語を検出するVSCodeの下部でクリックします

第1ステップ

  1. 「 'Javascript（Babel）'言語ベースの設定を構成...」またはその他をクリックします

2番目のステップ

  1. 最初にこのコードをカンマ「、」で区切って貼り付けて保存します。

"emmet.includeLanguages": { "javascript": "javascriptreact" }, "emmet.triggerExpansionOnTab": true

番目のステップ

2
Ameer Hamza

React Babelのオートコンプリートは昨日まで正常に機能していました。

これらの答えはどれも役に立たなかったので、コンピューターを再起動しました。魅力のように働いた;）

1
Pixelomo

JSXファイルでのみ機能します。 JSで動作しないようにします。

"files.associations": {
"*.js": "javascript",
"*.jsx": "javascriptreact",
},
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
    "javascriptreact": "javascriptreact"
},
1
Fatih Ertuğral

私はすべての答えを投げに行き、この構成は私のために働いた。言語を含め、syntaxProfileを追加する必要がありました。トリガー拡張なしでは何も機能しませんでしたが、今はTabボタンを押すだけで結果が得られます。

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.triggerExpansionOnTab": true
1
user9083221

私はさまざまなプロジェクトに取り組んでいましたが、大きな設定ファイルがあります。

設定を確認したところ、この設定がすべてを台無しにしていることがわかりました。

"emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly"

それでコメントしました。そして、すべてはReactアプリで完璧に機能します。ありがとう

0
Oleg Shkliaiev