在Sublime Text 3中，如何为JSX文件启用Emmet？

5 回答

• 105

  2015年4月Emmet added support for jsx，但默认情况下不起作用 . 好吧，令我惊讶的是它实际上正在使用 control + E 快捷方式，但我想使用 TAB 键进行扩展 . 继official instructions为我做了诀窍 .

  基本上，我必须在我的用户密钥绑定文件（ 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 .

  回答于 十二月 16, 2018
• 15

  来自JSX-SublimeText Package自述文件：

  Emmet的默认设置是不支持JS文件 . 因此，您需要为JSX文件中的选项卡添加键盘快捷键 . 打开首选项>键绑定 - 用户并添加此条目：

  {
      "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, 2018
• 15

  只需使用 ctrl+e （在Mac上为 cmd+e ）而不是tab来让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>  
          )
      }
  

  回答于 十二月 16, 2018
• 2

  如果在文件中键入 shift+super+p ，它将允许您在左下方看到当前选择的上下文 .

  第一个字始终是基本文件类型 . （ source.js ， text.html ）在JSX的情况下，我选择将其更改为 source.js.jsx . 这是因为在编译之前，JSX确实不是在JSX中发生而是在JS中发生 . sublime-react另一方面使用普通旧 source.js .

  所以你拥有的这个片段是正确的你需要用 source.js 替换 source.js.jsx

  回答于 十二月 16, 2018
• 0

  只是扩展这个答案 .
  您可能不希望您编写的所有字母都可以扩展为html . 您可以在上下文中设置另一个额外对象，以限制何时应用选项卡完成 . 这段代码是在_1076405中找到的，但我修改了Regex要好一些 .

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

  你还需要按照gist中的建议安装RegReplace和Chain of Command软件包，甚至让 span.class 变成 <span className="class"></span>
  如果你想添加更多元素来监听，只需将它们添加到列表即 (a\\b|div|span|p\\b|button|strong)
\\b 引用一个单词边界并阻止以下内容将 abc 扩展为 <abc></abc>

  回答于 十二月 16, 2018