美文网首页大前端开发
sublime text 3 ,React,html元素自动补全

sublime text 3 ,React,html元素自动补全

作者: 遇侎粒_duyuqin | 来源:发表于2019-04-28 21:12 被阅读127次
    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等,经查阅,将上述代码替换为下面的代码,则能解决这个问题

    [{
        "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"
            }
        ]
    }]
    

    才疏学浅,若有错误或考虑不周之处,欢迎指正,感谢!

    相关文章

      网友评论

        本文标题:sublime text 3 ,React,html元素自动补全

        本文链接:https://www.haomeiwen.com/subject/chtsnqtx.html