首页 > vs code 修改 emmet 兼容JSX 文件

vs code 修改 emmet 兼容JSX 文件

在使用 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 ;正则判断用 adivspanpbutton 标签默认 tab 触发;默认 class 修改为 className
supre+e 在 PC 上指的是 win+epc 建议修改为emmet 默认按键 ctrl+e),在 mac 上指的是 cmd+e
以上规则来源于 StackOverflow,正则小有修改.

vs code 配置 emmet

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

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

【热门文章】
【热门文章】