sublimeText3如何配置以支持jsx语法

最新推荐文章于 2025-01-01 09:19:42 发布

高丽菜猫小姐

最新推荐文章于 2025-01-01 09:19:42 发布

阅读量1.1w

点赞数

文章标签： jsx语法代码高亮 html代码提示 sublimetext react

本文链接：https://blog.csdn.net/sinat_33811032/article/details/54710192

版权

对于前端小白的我而言，还不知道如何选择一款适合自己的编辑器或IDE，之前在网上也看过很多推荐，所以在前期选择的Hbuilder，Hbuilder确实也是一个比较方便的工具，集成了很多功能，不过呢，最近在学reactjs用到jsx语法，Hbuilder用起来并不那么顺手啊，代码没有高亮，并且也完全没有提示，纯粹靠手打，总之很心累，果断换编辑器——sublime。

sublime也是需要配置的，这里借鉴了网友的做法：

第一步：ctrl+shift+p进入插件库，安装一个babel插件就行了。使用时文件类型选择javascript(babel)即可，此时代码已经有jsx语法提示了，但是很恶心的发现jsx包裹的html不支持联想和emmet，那么继续下面的步骤

第二步：安装RegReplace和Chain Of Command两款插件

第三步：在KeyBinding – Users中插入下面这段代码

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