Sublime Text3 React开发常用插件

Yangder 发布于2019-08-22 17:04 / 1737人阅读

摘要：主要是针对语法的，用来快速编写组件中的部分。配置该插件不需要额外配置，在打开或后缀的文件，直接选择为对应的语法就可以了。是上格式化比较好用的插件之一，通过修改它的属性可以使它支持。配置打开菜单，将下面代码贴进去保存。

主要是针对jsx语法的，用来快速编写组件中的html部分。

安装

command+shift+p -> install package -> 对应的模块名称

Emmet

可以自动扩展react的className，这点不要太爽～
我们要做的，只是安装好它之后稍微做下配置修改，就可以愉快的开撸了。

配置

打开菜单Preferences -> Package Settings -> Emmet -> Key Bindings - User

将下面代码贴进去保存。更详细的规则可以参考emmet-sublime文档

[{
    "keys": ["tab"],
    "command": "expand_abbreviation_by_tab",

    // put comma-separated syntax selectors for which 
    // you want to expandEmmet abbreviations into "operand" key 
    // instead of SCOPE_SELECTOR.
    // Examples: source.js, text.html - source
    "context": [{
            "operand": "source.js",
            "operator": "equal",
            "match_all": true,
            "key": "selector"
        },

        // run only if there"s no selected text
        {
            "match_all": true,
            "key": "selection_empty"
        },

        // don"t work if there are active tabstops
        {
            "operator": "equal",
            "operand": false,
            "match_all": true,
            "key": "has_next_field"
        },

        // don"t work if completion popup is visible and you
        // want to insert completion with Tab. If you want to
        // expand Emmet with Tab even if popup is visible -- 
        // remove this section
        {
            "operand": false,
            "operator": "equal",
            "match_all": true,
            "key": "auto_complete_visible"
        }, {
            "match_all": true,
            "key": "is_abbreviation"
        }
    ]
}]

babel

支持ES6、React.js、jsx代码语法高亮。

配置

该插件不需要额外配置，在打开.js或.jsx后缀的文件，直接选择Babel为对应的语法就可以了。

jsFormat

jsformat是sublime上js格式化比较好用的插件之一，通过修改它的e4x属性可以使它支持jsx。

配置

打开菜单Preferences -> Package Settings -> JsFormat -> Settings - User，将下面代码贴进去保存。

{
  "e4x": true,
  // jsformat options
  "format_on_save": true,
}```

私有云服务器托管 sublime插件 react开发神器 docker react 开发 webrtc音视频开发react

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94825.html

Sublime Text3插件安装及问题处理

摘要：软件下载安装官网可直接下载安装，可免费使用解决安装问题安装在线安装因为网络原因可能失败。常规插件安装步骤以安装汉化插件为例。使用Sublime Text3，没有别的原因，总结起来就两条：好看，快。当然它不像Webstorm那样贴合前端开发，需要下载一些插件来辅助。刚开始学前端的时候，觉得下插件实在是太麻烦了，都想放弃了，但一来更受不了Webstorm启动的龟速，二来舍不得Sublim...

bang590 2019-08-23 15:12 评论0 收藏0
个人常用的软件-前端

摘要：今天重装系统，切换到作业，记录下个人常用的软件，工具软件版本管理工具图形管理工具版本管理工具前端切图必备需要动画的时候用有道云笔记有模式，笔记写代码很方便调试接口抓包工具一款编译的软件，官网下载建议迅雷下载。今天重装系统，切换到win10作业，记录下个人常用的软件， 1.工具软件 git ：版本管理工具 tortoisegit ：git图形管理工具 tortoisesvn ：...

vibiu 2019-08-01 18:17 评论0 收藏0
个人常用的软件-前端

摘要：今天重装系统，切换到作业，记录下个人常用的软件，工具软件版本管理工具图形管理工具版本管理工具前端切图必备需要动画的时候用有道云笔记有模式，笔记写代码很方便调试接口抓包工具一款编译的软件，官网下载建议迅雷下载。今天重装系统，切换到win10作业，记录下个人常用的软件， 1.工具软件 git ：版本管理工具 tortoisegit ：git图形管理工具 tortoisesvn ：...

iKcamp 2019-08-29 14:06 评论0 收藏0
个人常用的软件-前端

摘要：今天重装系统，切换到作业，记录下个人常用的软件，工具软件版本管理工具图形管理工具版本管理工具前端切图必备需要动画的时候用有道云笔记有模式，笔记写代码很方便调试接口抓包工具一款编译的软件，官网下载建议迅雷下载。今天重装系统，切换到win10作业，记录下个人常用的软件， 1.工具软件 git ：版本管理工具 tortoisegit ：git图形管理工具 tortoisesvn ：...

oysun 2019-08-21 18:23 评论0 收藏0