web-dev-qa-db-ja.com

jsxのHTMLタグの自動補完（崇高なテキスト）

React/jsxコードでhtmlタグのオートコンプリートを使用できるようにしたいと思います。 htmlファイルでも同じように機能します。 jsxファイルのタグのオートコンプリートを有効にするために崇高なテキスト3を構成できますか？

autocompletereactjssublimetext3sublimetextreact-jsx
48
Igor Okorokov

/に付属するDefault.sublime-packageのキーバインドをコピーしてわずかに変更することにより、JSXでSublimeの組み込みタグをより近く有効にできることに注意してください。カスタムキーマップに次を追加します。

{ "keys": ["/"], "command": "close_tag", "args": { "insert_slash": true }, "context":
  [
    { "key": "selector", "operator": "equal", "operand": "(text.html, text.xml, meta.jsx.js) - string - comment", "match_all": true },
    { "key": "preceding_text", "operator": "regex_match", "operand": ".*<$", "match_all": true },
    { "key": "setting.auto_close_tags" }
  ]
}

Babelパッケージを使用していると仮定すると、セレクタmeta.jsx.jsはJSX構文に一致し、タグを閉じる動作を有効にします。他のパッケージではスコープ名が異なる場合があります。その場合、 ScopeHunter を使用して、好みのJSX構文で適用されるスコープを検査できます。

72
Daniel Shannon

インストール：babel＆Emmet

次に、これをキーバインディングに追加します-ユーザー

{
    "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context": [
        {
            "operand": "source.js", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        },
        {   
            "key": "selection_empty", 
            "operator": "equal", 
            "operand": true,
            "match_all": true 
        }
    ]
},
{ "keys": ["tab"], "command": "next_field", "context":
    [
        { "key": "has_next_field", "operator": "equal", "operand": true }
    ]
}
27
Ryan Jeremiah Freeman

入力時に括弧が自動的に閉じられることはありませんが、Sublimeの組み込みタグをcommandoption. macの場合、またはalt.ウィンドウの場合。

21
myoung

babel-sublime と emmet の組み合わせを強くお勧めします。 「JavaScript（Babel）」を構文として指定すると、両方のパッケージが連携して動作し、必要に応じてemmetが適切に「className」と「htmlFor」を生成します。

唯一の欠点は、TABでは機能せず、CTRL + Eで機能することです。これは、TABがJavaScriptで他の多くの用途を持っているためです。

8
Martin

ダニエルの答えに基づいて、私はこれのためだけにプラグインを作成しました。

ソース： https://github.com/FMCorz/AutoCloseTags

インストールするには：

  1. Package Control: Add repositoryで上記のリポジトリを追加します
  2. コマンドPackage Control: Install packageを実行します
  3. AutoCloseTagsを選択します
6
FMCorz

崇高のためにbabelがインストールされている場合、.jsファイルと.jsxファイルを開いて、表示>構文>現在のすべてで開く..> babel> javascript（babel）に移動して、正しい構文の強調表示を表示し、CTRL + Eを使用して、 ur .jsx内の完全なhtmlタグ

1
Syahmi Nawi

他の人が示唆したように：installBabelandEmmet！

Emmet Abbreviationのリスト（ demo here ）（および チートシートここ ）
山括弧を入力する必要はありません。エメットがそれを行い、終了タグなどを入力します！

使用CtrlE略語を展開します。

Emmet docs：略語の説明に優れています。ただし、説明に失敗しました「略語を展開する」方法-少なくとも、見つけられませんでした.

崇高から、私
- 開く： Preferences -> Package Settings -> Emmet -> Key Bindings - Default
- 検索 expand_abbreviation
-見つかりましたctrl+e

幸福-チャームのように機能します:-)

I alsoインストールを推奨AutoCloseTags、 FMcorz および ダニエルシャノン 。

この組み合わせは
-（ネスト規則により解釈されるタグ）の自動クローズ、単に</、その場で素晴らしい、一方、エメットは
-Crtl-E。これは、スケルトンを作成するのに最適です。

1
SherylHohman