美文网首页代码Unity游戏开发入门前端
把SublimeText配置成ReactNative的IDE

把SublimeText配置成ReactNative的IDE

作者: 超级大柱子 | 来源:发表于2016-06-09 03:14 被阅读5846次

    2017年5月19日更新:经过近7个月的使用,如果您使用的语言是Javascript、JSX、Golang、Python,强烈推荐用VSCode代替SublimeText

    首先下载SublimeText3,并且安装插件包管理器
    https://packagecontrol.io/installation


    让SublimeText尽可能接近IDE

    代码提示,代码检测,语法高亮,这类插件属于必安插件,如果不安装这些插件,会影响实际开发的效率

    安装Babel (接近IDE:10%)

    javascript(ES6)及jsx的代码高亮,安装之后记得把默认文件设置成javascript-babel


    窗口右下角 JSX语法高亮

    安装SublimeLinter-contrib-eslint (接近IDE:30%)

    这个插件需要用到SublimeLinter插件.
    Eslint属于静态语法检测,如果你希望javascript提示语法有错误,就需要安装它.
    如何配置请参考,我的另外一篇文章:如何配置Eslint检测React代码

    例如多打了一个分号

    安装SublimeCodeIntel (接近IDE:50%)

    这个差距得去github手动下载,不然下载太慢,手动下载之后放在默认的插件文件夹里就可以了。
    这个插件属于代码提示类的插件,有了它才能够提示项目内的提示,方法引用,变量提示,还有引用跳转.

    安装All Autocomplete (接近IDE:65%)

    Sublime的自动补全只能读取当前文件中的关键字, 有了这个这个插件就可以补全其他已打开的文件的关键字.
    具体使用方法:

    1. 例如我们需要用到StatusBar组件的setHidden方法.
    2. cm+t, 打开StatusBar.js文件


    3. AllAutocomplete会读取已打开文件的关键字,此时在项目中拥有了StatusBar组件的代码提示.


    AutoFileName(接近IDE:70%)

    自动补全文件路径,并且会提示图片文件的尺寸


    糖果类的插件(提高体验和乐趣)

    诚然,无论怎么配置SublimeText,它还是不能完成IDE100%的功能.不过我们看重编辑器的轻便和其他小功能的扩展,不然人人都用笨重的IDE了,谁还会用编辑器?
    我推荐几个提高体验的糖果类插件.
    这类插件属于选安插件, 安装之后只是提高Sublime的体验

    安装FileBrowser(5星推荐)

    非常小巧的插件,有了它就不需要Sublime自带的侧边栏了,可以全热键控制项目文件.
    它拥有新建文件夹,新建文件,移动文件,删除文件,重命名文件,打开路径,保存项目路径,快速切换项目,文件预览(使用mac系统的Quicklook),隐藏显示隐藏文件等等一系列功能,并且还是类似Vim的全热键控制.
    使用技巧:

    1. 添加热键打开文件面板;
        {
          "keys": ["super+d"],
          "command": "dired",
          "args": {
            "immediate": true,
            "single_pane": true,
            "other_group": "left",
            "project": true
          }
        },
    
    1. 在文件面板输入"?",查看使用说明
    可以用Vim的模式在文件夹中跳转

    BracketHighlighter

    一个高亮识别成对符号位置的插件,效果如图:


    AdvancedNewFile

    如果还是习惯用自带的侧边栏,那请配上这个插件,热键新建文件

    安装Emmet

    虽然鼎鼎大名,不过这个插件有点大,安装它就会自动安装V8引擎.
    快速输入jsx中的xml代码,但是在js文件中它的tab热键是冲突的,需要改一下热键.
    不过的确用它写标签会提高许多效率.

          {
        "keys": [
            "E", "E"
        ], 
        "command": "rename_tag", 
        "context": [
            {
                "key": "emmet_action_enabled.rename_tag"
            }
        ]
        }, 
        {
          "keys": [
            "super+e"
          ],
          "args": {
            "action": "expand_abbreviation"
          },
          "command": "run_emmet_action",
          "context": [{
            "key": "emmet_action_enabled.expand_abbreviation"
          }]
        },
    

    (具体热键可以自行修改)其中连按两个大写E,就是修改标签名,cmd+e就是自动补全标签,补全格式如下:

    View>Textt     //cmd+e,即可补全成如下
          <View>
            <Text></Text>
          </View>
    

    安装JsFormat

    用于js文件自动排版,如果要适配jsx需要在jsFormat设置中添加:

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

    Terminal

    快捷键打开当前目录的终端,mac下的快捷键为:command+shift+T


    5. 配置设置

    添加了自动换行;在同个窗口打开文件,超过底部可以继续滑动,隐藏指定后缀文件,取消更新检查等等

    {
        "color_scheme": "Packages/User/SublimeLinter/Monokai (SL).tmTheme",
        "file_exclude_patterns":
        [
            "*.meta",
            "._.{*}"
        ],
        "ignored_packages":
        [
            "Vintage"
        ],
        "open_files_in_new_window": false,
        "remember_open_files": true,
        "scroll_past_end": true,
        "translate_tabs_to_spaces": true,
        "update_check": false,
        "word_wrap": true,
        "font_size": 13
    }
    

    6.配置热键文件

    之前配置的所有热键和其他热键汇总

     [{
        "keys": [
            "E", "E"
        ], 
        "command": "rename_tag", 
        "context": [
            {
                "key": "emmet_action_enabled.rename_tag"
            }
        ]
        }, 
        {
          "keys": [
            "super+e"
          ],
          "args": {
            "action": "expand_abbreviation"
          },
          "command": "run_emmet_action",
          "context": [{
            "key": "emmet_action_enabled.expand_abbreviation"
          }]
        },
        { "keys": ["ctrl+n"], "command": "advanced_new_file_new"},
        { "keys": ["super+."], "command": "edit_settings", "args":
        {
          "base_file": "${packages}/Default/Default (OSX).sublime-keymap",
        }
    }]
    

    相关文章

      网友评论

      本文标题:把SublimeText配置成ReactNative的IDE

      本文链接:https://www.haomeiwen.com/subject/sogjdttx.html