sublime3 react开发 常用插件

1.安装Package Control插件
使用ctrl+`(tab键上面的按钮)，将以下代码复制后粘贴到打开的对话框的录入区域，然后按Enter(回车)，稍等片刻

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)

如果安装成功，就可以在Preferences菜单下看到Package Settings和Package Control两个菜单。

2.安装emmet插件
使用快捷键ctrl+shift+p，输入ip（install package）回车（可能需要等待几秒钟，在此过程中不能进行任何鼠标/键盘操作），

输入或选择你需要的插件再按Enter（回车）就可以安装插件了（下图以安装Emmet插件为例）

点击菜单Preferences->Browse Packages，在打开的文件夹（Sublime Text 3\Packages，记住这个文件夹，下面说less和sass安装的时候会用到）里面会看到刚才安装完成的emmet插件（所有安装好的插件都会在这个文件夹里，您也可以把GitHub上down下的文件夹直接拖入该文件夹中，就可以在Package Settings菜单中看到你拖入的插件名称），emmet插件可以让你的代码自动补全。
修改 Emmet 兼容jsx 文件：打开 preferences -> Key bindings - Users，把下面代码复制到[ ]内部。（这样使用react写html代码也可以自动补全了)

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

例如输入div.content之后点击tab键，代码就会变成

<div className="content"></div>

3.安装JsFormat插件
仿照安装emmet插件的步骤安装JsFormat插件，安装成功之后即可在JS文件中通过鼠标右键->JsFormat或键盘快捷键Ctrl+Alt+F对JS进行格式化。
通过修改它的e4x 属性可以使它支持 jsx，打开preferences -> Package Settings -> JsFormat -> Setting - Users,输入以下代码：

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

即可保存时自动格式化，并支持 jsx 类型文件.

4.SideBarEnhancements插件
SideBarEnhancements是一款右键菜单增强插件，sublime中选中文件右键，原本只有几个可选菜单，安装完SideBarEnhancements之后，会增加很多可选菜单

5.CssComb插件
该插件安装依赖于Node.js，若您的计算机中尚未安装过Node.js环境
应该到Node.js官网中下载，并安装相应版本的Node.js。
使用方法：菜单Tools->Run CSScomb或在CSS文件中按快捷键Ctrl+Shift+C

6.Autoprefixer插件
这是一款CSS3私有前缀自动补全插件，该插件使用CanIUse资料库，能精准判断哪些属性需要什么前缀，与CssComb插件一样，该插件也需要系统已安装Node.js环境
使用方法：在输入CSS3属性后（冒号前）按Tab键

7.babel-sublime插件
支持ES6， React.js, jsx代码高亮，对 JavaScript, jQuery 也有很好的扩展
配置信息：打开.js, .jsx 后缀的文件;打开菜单view， Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel)，选择babel为默认 javascript 打开syntax（如果页面没有变化，关掉页面重新进入即可）

8.Less&&Sass代码高亮插件
Less下载地址：https://github.com/danro/LESS-sublime/zipball/master
Sass下载地址：https://github.com/kuroir/SCSS.tmbundle/zipball/SublimeText2
将文件解压之后拖入Sublime Text 3\Packages文件夹里面

总结：基本上在sublime上进行react开发常用的插件就这么多，有需要补充的小伙伴可以互相沟通一下，让react开发更简单，更迅速，更方便

微信： zhengyukun521
QQ： 746832747
GitHub：zhengxiaolet