sublime text 3 ,React,html元素自動補全方法(用Emmet寫法寫jsx中的html)

  1. 安裝emmet: Preferences -> Package Control -> Install Package -> emmet
  2. 配置emmet: Preferences -> Package Settings -> Emmet -> Key Bindings - User
    將下方的代碼貼到打開的文件中,然后就可以使用tab鍵對render中的(部分)html元素使用自動補全功能了
[
    {
        "keys": [
            "super+e"
        ],
        "args": {
            "action": "expand_abbreviation"
        },
        "command": "run_emmet_action",
        "context": [
            {
                "key": "emmet_action_enabled.expand_abbreviation"
            }
        ]
    },
    {
        "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
            }
        ]
    }
]

補充:

在貼了上述代碼之后,只有部分標簽用tab鍵能夠自動補全,但是還有很多標簽只能用ctrl+e補全,比如h1,Route等,經(jīng)查閱,將上述代碼替換為下面的代碼,則能解決這個問題

[{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab",

    // put comma-separated syntax selectors for which 
    // you want to expandEmmet abbreviations into "operand" key 
    // instead of SCOPE_SELECTOR.
    // Examples: source.js, text.html - source
    "context": [{
            "operand": "source.js",
            "operator": "equal",
            "match_all": true,
            "key": "selector"
        },

        // run only if there's no selected text
        {
            "match_all": true,
            "key": "selection_empty"
        },

        // don't work if there are active tabstops
        {
            "operator": "equal",
            "operand": false,
            "match_all": true,
            "key": "has_next_field"
        },

        // don't work if completion popup is visible and you
        // want to insert completion with Tab. If you want to
        // expand Emmet with Tab even if popup is visible -- 
        // remove this section
        {
            "operand": false,
            "operator": "equal",
            "match_all": true,
            "key": "auto_complete_visible"
        }, {
            "match_all": true,
            "key": "is_abbreviation"
        }
    ]
}]

才疏學(xué)淺,若有錯誤或考慮不周之處,歡迎指正,感謝!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容