• 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元素使用自动补全功能了

     1 [
     2     {
     3         "keys": [
     4             "super+e"
     5         ],
     6         "args": {
     7             "action": "expand_abbreviation"
     8         },
     9         "command": "run_emmet_action",
    10         "context": [
    11             {
    12                 "key": "emmet_action_enabled.expand_abbreviation"
    13             }
    14         ]
    15     },
    16     {
    17         "keys": [
    18             "tab"
    19         ],
    20         "command": "expand_abbreviation_by_tab",
    21         "context": [
    22             {
    23                 "operand": "source.js",
    24                 "operator": "equal",
    25                 "match_all": true,
    26                 "key": "selector"
    27             },
    28             {
    29                 "key": "preceding_text",
    30                 "operator": "regex_contains",
    31                 "operand": "(\b(a\b|div|span|p\b|button)(\.\w*|>\w*)?([^}]*?}$)?)",
    32                 "match_all": true
    33             },
    34             {
    35                 "key": "selection_empty",
    36                 "operator": "equal",
    37                 "operand": true,
    38                 "match_all": true
    39             }
    40         ]
    41     }
    42 ]

      补充:

      在贴了上述代码之后,只有部分标签用tab键能够自动补全,但是还有很多标签只能用ctrl+e补全,比如h1,Route等,经查阅,将上述代码替换为下面的代码,则能解决这个问题

     1 [{
     2     "keys": ["tab"],
     3     "command": "expand_abbreviation_by_tab",
     4 
     5     // put comma-separated syntax selectors for which 
     6     // you want to expandEmmet abbreviations into "operand" key 
     7     // instead of SCOPE_SELECTOR.
     8     // Examples: source.js, text.html - source
     9     "context": [{
    10             "operand": "source.js",
    11             "operator": "equal",
    12             "match_all": true,
    13             "key": "selector"
    14         },
    15 
    16         // run only if there's no selected text
    17         {
    18             "match_all": true,
    19             "key": "selection_empty"
    20         },
    21 
    22         // don't work if there are active tabstops
    23         {
    24             "operator": "equal",
    25             "operand": false,
    26             "match_all": true,
    27             "key": "has_next_field"
    28         },
    29 
    30         // don't work if completion popup is visible and you
    31         // want to insert completion with Tab. If you want to
    32         // expand Emmet with Tab even if popup is visible -- 
    33         // remove this section
    34         {
    35             "operand": false,
    36             "operator": "equal",
    37             "match_all": true,
    38             "key": "auto_complete_visible"
    39         }, {
    40             "match_all": true,
    41             "key": "is_abbreviation"
    42         }
    43     ]
    44 }]
  • 相关阅读:
    30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)(转载)
    JavaScript事件流原理解析
    Java中this和super的用法和区别
    Java多态面试题案例几解题思路
    Java多态的向上转型和向下转型
    Java方法的重载和重写
    Java冒泡具体的原理,以及下标的变化
    Java中的冒泡排序和选择排序
    使用Java实现对一个数组的增删改查以及初始化
    Java中构造函数传参数在基本数据类型和引用类型之间的区别
  • 原文地址:https://www.cnblogs.com/Kailey/p/9698595.html
Copyright © 2020-2023  润新知