Sublime Text3关于react的插件

1. 安装Babel语法高亮和react-native-snippets快捷代码片段

Sublime Text 3 是一款广泛使用的代码编辑器，支持 Windows、Mac OS X、Linux 三大桌面平台，它是付费应用，但目前可以无限期的试用。它支持多种编程语言的语法高亮、拥有优秀的代码自动完成功能，还拥有代码片段（Snippet ）的功能，可以将常用的代码片段保存起来，在需要时随时调用，极大的提高编程效率。

Sublime Text 3 强大功能的支撑在于它的插件机制，通过 Package Control 功能，开发者可以安装各种需要的插件，默认情况下，Sublime Text 3 没有集成 Package Control，我们需要自己安装。Package Control 有命令安装和手动安装两种方式，建议优先选择命令安装，可以参考官网安装指南。本文我们介绍命令安装方式，在 Sublime Text 3 中通过 View->Show Console 打开命令行，执行如下命令：

import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

上面的命令会创建安装所需的包目录，并下载 Package Control.sublime-package 到目录中。安装完成后，可以在 Preferences 菜单下找到 Package Settings 和 Package Control 两个子菜单。

在 Sublime Text 3 中，React Native 开发相关的插件主要有：

• babel-sublime：支持 Javascript，ES6 和 JSX 语法高亮

• react-native-snippets：支持 React Native 代码片段

在 Package Control 对话框中选择 Package Control:Install Packages 并在弹出的对话框中输入 Babel，即可找到 babel-sublime：

安装完成之后，需要启用它，如下图所示菜单操作即可：

react-native-snippets 插件同样通过 Package Control 进行安装，在 Install Package 对话框中搜索 react-native-snippets 安装即可：

安装完成之后，在代码编辑器中输入代码片段的缩写，例如我们新建一个名为 UserDetail.js 的文件，在其中输入 rncc 来创建一个 React Native 的类，智能提醒如下所示：

按下 Enter 键，插件自动生成如下样板代码，节省了很多手动输入所需花费的时间：

除了 rncc，其他常见的代码片段如下所示，更多内容参见插件的 Github 首页。

2. ——react语法提示&代码格式化

背景: 最近因为项目准备迁移切换技术栈到react~所以研究了一波sublime关于react的插件，很多推荐已经写得很详细，这里就补充一下语法提示和代码格式化的插件。

1.sublime-react-es6： react  es6 语法提示

同sublime-react一样，作为react语法提示，但是sublime-react-es6支持es6语法。

安装：

1.安装Sublime  Package Manager。通过命令行打开: ⌘+shift+p（MacOS/Linux）

2.输入install, 选中Package Control: Install Package

3.输入React, 选中React ES6 Snippets

安装以后即可使用，如图所示：

其他代码段提示参见github：sublime-react-es6

2.sublime-jsfmt ：jsx语法代码格式化

虽然HTML-CSS-JS Prettify和jsformat都支持jsx格式化，但是因为某些特殊字符处一定会有换行让人难以接受，例如import时：

jsformat格式化后

类似的问题会导致代码校验时无法通过，并且在代码简洁程度上也让人难以接受。而sublime-jsfmt能够帮助搞定这个问题。上图格式化后会变成如下效果：

jsfmt格式化后效果

所以这里强烈推荐安装sublime-jsfmt。

安装方法：

1.打开命令面板Package Control: Install Package -> 输入jsfmt选中。

2.修改设置Preferences -> Package Settings -> Sublime JSFMT：

{
    // autoformat on save
    "autoformat": false,

    // array of extensions for autoformat
    "extensions": ["js", "sublime-settings"],

    // options for jsfmt
    "options": {
        "preset": "jquery",
        "indent": {
            "value": "    "
        },
        // plugins included
        "plugins": [
            // "esformatter-quotes",
            // "esformatter-semicolons",
            // "esformatter-braces",
            // "esformatter-dot-notation"
        ]
    },
    "options-JSON": {
        "plugins": [
            "esformatter-quotes"
        ],
        "quotes": {
            "type": "double"
        }
    },
    "alert-errors": true,
    // path to nodejs
    "node-path": "node",
    // if true it will format the whole file even if you have a selection active
    "ignore-selection": false
}

 

代码复制请到sublime-jsfmt Setting中

3.设置代码快捷键：

a. Preferences -> Key Bindings - User

b.添加配置：   {"keys":["ctrl+q"],"command":"format_javascript"}

设置后即可选中代码再通过快捷键格式化代码~