vs code 修改 emmet 兼容JSX 文件

Question

在使用 sublime 搭建 react.js 环境, 可以修改 emmet 兼容 JSX 文件

emmet 作为前端开发必备插件之一非常方便快捷，通过修改默认的 sublime就可以在 jsx 文件中快速通过 emmet 编写自定义组件。

sublime 安装

PC上 ctrl+shift+p（Mac Cmd+shift+p）打开面板输入 emmet 安装

使用方法

打开 preferences -> Key bindings - Users，把下面代码复制到[]内部。

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

使用super+e触发 emmet ；正则判断用 a，div，span，p，button 标签默认 tab 触发；默认 class 修改为 className
注 supre+e 在 PC 上指的是 win+e（pc 建议修改为emmet 默认按键 ctrl+e）,在 mac 上指的是 cmd+e
以上规则来源于 StackOverflow，正则小有修改.

vs code 配置 emmet

在 vs code 插件平台 搜索 emmet 只有 Emmet fix 这货 , 好像不支持 jsx

求大神 vs code 如何 在 jsx 支持 emmet

Answer 1

"emmet.syntaxProfiles": { "javascript": "html" },

// 更推荐下面的方式：支持 className

"emmet.syntaxProfiles": { "javascript": "jsx" },

Answer 2

在设置中添加以下内容：

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true

Answer 3

楼上正解，太感谢了 大赞

Answer 4

你修改之后 就可以在js或者jsx中使用tab快速创建html标签了吗
我的还是不可以