web-dev-qa-db-ja.com

Sublime Text 3では、JSXファイルのEmmetをどのように有効にしますか？

以前は Allan HortleのJSXパッケージ を使用していましたが、構文の強調表示の処理方法に問題が発生するまでは。それから、公式パッケージ sublime-react があることに気付きました。

Allan Hortleのパッケージで、彼はスニペットをPreferences > Key Bindings – User次のようなEmmet機能を有効にします。

{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [
        {
            "operand": "source.js.jsx", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        }
    ]
}

このスニペットは、公式のsublime-reactパッケージでは機能しないようです。キーバインディングで変更するもののようですが、Sublimeのドキュメントを最初に読んでも主題については明らかになりませんでした。助けて？

reactjssublimetext3react-jsxemmet
59
btholt

ファイルにshift+super+pと入力すると、左下に現在の選択のコンテキストが表示されます。

最初のWordは常にベースファイルタイプです。 （source.js、text.html） [〜＃〜] jsx [〜＃〜] の場合これをsource.js.jsxに変更します。これは、コンパイルされる前のJSXは実際にはjavascriptではないが、かなり似ているためです。 JSXではなくJSXで行いたい完成度と崇高な砂糖がたくさんあります。 sublime-react 一方、古いsource.jsを使用します。

このスニペットは正しいので、source.js.jsxをsource.jsに置き換えるだけです

16
Allan Hortle

2015年4月 Emmetはjsxのサポートを追加しました ですが、デフォルトでは機能しません。驚いたことに、実際にcontrol + Eショートカットですが、TABキーを使用して展開したかったのです。 公式の指示 に従って、私のためにトリックを行いました。

基本的に、ユーザーキーバインディングファイル（Preferences> Key Bindings — User）：

{ "keys": ["tab"], "command": "expand_abbreviation_by_tab", "context":
    [
        { "operand": "source.js", "operator": "equal", "match_all": true, "key": "selector" },
        { "match_all": true, "key": "selection_empty" },
        { "operator": "equal", "operand": false, "match_all": true, "key": "has_next_field" },
        { "operand": false, "operator": "equal", "match_all": true, "key": "auto_complete_visible" },
        { "match_all": true, "key": "is_abbreviation" }
    ]
}

これは、すべてのコメントがなく、正しいSCOPE_SELECTOR 所定の位置に。

112
rafaelbiten

JSX-SublimeText Package readmeから：

Emmetのデフォルトでは、JSファイルはサポートされません。そのため、JSXファイルのタブ補完にキーボードショートカットを追加する必要があります。

開くPreferences > Key Bindings - userそして、このエントリを追加します。

{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [
        {
            "operand": "source.js.jsx", 
            "operator": "equal", 
            "match_all": true, 
            "key": "selector"
        },
        {   
            "key": "selection_empty", 
            "operator": "equal", 
            "operand": true,
            "match_all": true 
        }
    ]
}
16
Giant Elk

この答えを拡張するだけです。
あなたが書いたすべての文字をhtmlに展開できるようにしたくない場合があります。コンテキストに別の追加オブジェクトを設定して、タブ補完が適用されるタイミングを制限できます。このコードは this Gist で見つかりましたが、正規表現を少し改善するために修正しました。

{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab", 
    "context": [{
        "operand": "source.js", 
        "operator": "equal", 
        "match_all": true, 
        "key": "selector"
    },{
        "key": "preceding_text", 
        "operator": "regex_contains", 
        "operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?)", 
        "match_all": true
    },{
        "key": "selection_empty", 
        "operator": "equal", 
        "operand": true, 
        "match_all": true
    }]
}

また、span.classを取得して<span className="class"></span>に変換するために、Gistで推奨されているパッケージRegReplaceおよびChain of Commandをインストールする必要もあります。
リスンする要素をさらに追加する場合は、それらをリストに追加するだけです。つまり、(a\\b|div|span|p\\b|button|strong)
\\bはWordの境界を参照し、以下がabcを<abc></abc>に展開するのを停止します

2
Richard Herries

単にctrl+e（cmd+e on mac）emmetをjsx内で動作させるために、タブの代わりに。たとえば、（ctrl+e）

render(){
        return(
            .modal>.btn.btn-success{Click Me}   
        )
    }

その後、私は得る

render(){
        return(
            <div className="modal">
                    <div className="btn btn-success">Click Me</div>
                </div>  
        )
    }
1
Anish K.