javascript - vs code 修改 emmet 兼容JSX 文件

 骨感小男人2502861673_698 发布于 2022-11-12 22:11

在使用 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?1.2.1",
        "operator": "equal",
        "match_all": true,
        "key": "selector"
      }, {
        "key": "preceding_text",
        "operator": "regex_contains",
        "operand": "(//b(a//b|p|span|p//b|button)(//.//w*|>//w*)?([^}]*?}$)?)",
        "match_all": true
      }, {
        "key": "selection_empty",
        "operator": "equal",
        "operand": true,
        "match_all": true
      }]
    }

使用super+e触发 emmet ;正则判断用 apspanpbutton 标签默认 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

2 个回答
  • 楼上正解,太感谢了 大赞

    2022-11-12 22:11 回答
  • "emmet.syntaxProfiles": { "javascript": "html" },
    
    // 更推荐下面的方式:支持 className
    
    "emmet.syntaxProfiles": { "javascript": "jsx" },
    2022-11-12 22:11 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有