[转载]Sublime Text 3 搭建 React.js 开发环境

Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境。

1. babel-sublime

支持ES6, React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展。关于 babel 的更多介绍可以看这里:为什么说Babel将推动JavaScript的发展

安装

  • PC:Ctrl+shift+p

  • Mac:Cmd+shift+p

打开面板输入babel安装

配置

  1. 打开.js, .jsx 后缀的文件;

  2. 打开菜单view, Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel),选择babel为默认 javascript 打开syntax

2. eslint for sublime

相比jslint、jshint等这些检测工具来说,eslint最大的吸引力就在于可以支持js、jsx、es6(es2015)等代码的检测。

安装

  1. 安装 node.js
  2. 安装eslint和babel-eslint
 npm install -g eslint
npm install -g babel-eslint

3.  在项目根目录编写配置文件: .eslintrc

 {
"env": {
"browser": true,
"node": true,
"es6": true
},
"parser": "babel-eslint",
"ecmaFeatures": {
"jsx": true
},
"rules": {
"semi": [2, "always"],
"quotes": [2, "single"]
}
}

4.  PC上ctrl+shift+p(Mac Cmd+shift+p)打开面板输入SublimeLinter-contrib-eslint(依赖sublimeLinter)

3. 修改 Emmet 兼容jsx 文件

emmet 作为前端开发必备插件之一非常方便快捷,通过修改默认的 sublime就可以在 jsx 文件中快速通过 emmet 编写自定义组件。

安装

PC上ctrl+shift+p(Mac Cmd+shift+p)打开面板输入emmet安装

使用方法

打开 preferences -> Key bindings - Users,把下面代码复制到[]内部。

 {
"keys": [
"super+e"
],
"args": {
"action": "expand_abbreviation"
},
"command": "run_emmet_action",
"context": [{
"key": "emmet_action_enabled.expand_abbreviation"
}]
},
{
"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
}]
}

使用super+e触发 emmet;正则判断用 a,div,span,p,button标签默认tab 触发;默认 class 修改为 className。

注:

  1. supre+e 在 PC 上指的是win+e(pc 建议修改为emmet 默认按键 ctrl+e),在 mac 上指的是cmd+e

  2. 以上规则来源于StackOverflow,正则小有修改

4. JsFormat 格式化 js 代码

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

安装

PC上ctrl+shift+p(Mac Cmd+shift+p)打开面板输入JsFormat安装.

使用

打开preferences -> Package Settings -> JsFormat -> Setting - Users,输入以下代码:

 {
"e4x": true,
// jsformat options
"format_on_save": true,
}
即可保存时自动格式化,并支持 jsx 类型文件.

5. 编译 jsx

  • 使用babel-sublime
    带有编译 jsx 的命令 babel build。使用 babel 编译 jsx 也由 React 项目官方引用。该命令依赖于 node 包 babel。babel 同时也支持 ES6的新语法经过编译在浏览器中运用。

     npm install -g babel
  • 在 sublime 中使用ctrl+shift+p打开面板输入babel transform自动编译成 react.js 文件

  • 使用自动化构建工具(gulp|grunt 等)
    以 gulp 为例(依赖 gulp,需提前安装):

    npm install gulp-babel
     /**
    * babel
    */
    var gulp = require('gulp'),
    babel = require('gulp-babel');
    gulp.task('babel', function() {
    return gulp.src('./src/**/*.jsx')
    .pipe(babel())
    .pipe(gulp.dest('./dist'));
    });
    在命令行中输入 gulp babel 运行

    配合 BrowserSync 使用可以实时监测改动并同步刷新多平台上得浏览器。

    npm install gulp-babel gulp-plumber gulp-notify gulp-cached browser-sync run-sequence
  •  /**
    * babel
    */
    var gulp = require('gulp'),
    babel = require('gulp-babel'),
    bs = require('browser-sync').create(),
    reload = bs.reload,
    runSequence = require('run-sequence').use(gulp),
    src = 'src', //源目录路径
    dist = 'dist'; //输出路径
    gulp.task('babel', function() {
    var onError = function(err) {
    notify.onError({
    title: "Gulp",
    subtitle: "Failure!",
    message: "Error: <%= error.message %>",
    sound: "Beep"
    })(err);
    }; return gulp.src(src + '/**/*.jsx')
    .pipe(cached('react')) //把所有东西放入缓存中,每次只编译修改过的文件
    .pipe(plumber({ //发生错误时不会中断 gulp 的流程,同时触发 notify 消息提示
    errorHandler: onError
    }))
    .pipe(babel())
    .pipe(gulp.dest(dist));
    }); // Start the server
    gulp.task('bs', function() {
    var files; files = [
    src + '/**/*.+(html|php|js|css|png|jpg|svg|gif)'
    ]; bs.init(files, {
    server: {
    baseDir: src,
    }
    });
    }); gulp.task('server', ['babel','bs'], function() {
    gulp.watch(src + '/**/*.jsx', function() {
    runSequence('babel', reload);
    });
    })

    在命令行中输入 gulp server 运行。

或者使用 sublime 自带的 build 工具,选择Tools -> Build System -> New Build System
输入:

 {
"shell_cmd": "gulp server --cwd $file_path"
}

并保存为 gulpBabel.sublime-build(名称随意,保持.sublime-build后缀名),存放到Packages - Users文件夹里面,在 sublime 中使用ctrl+shift+b(或Tools -> Build With ..)打开 build 面板,选择刚刚输入的名称,在这里是gulpBabel运行。

[转载]Sublime Text 3 搭建 React.js 开发环境的更多相关文章

  1. Sublime Text 3 搭建 React.js 开发环境

    sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境. 1. babel 支持ES6, React.js, jsx代码高亮,对 JavaScr ...

  2. Windows下使用 Sublime Text + MinGW 搭建C/C++开发环境

    下载并安装 Sublime Text 点击此处从官网下载适合自己的Windows系统的Sublime Text 下载好后双击进行安装(一路next就好啦) 下载 MinGW 点击此处下载MinGW 下 ...

  3. Sublime Text 3下C/C++开发环境搭建

    Sublime Text 3下C/C++开发环境搭建 之前在Linux Mint 17一周使用体验中简单介绍过Sublime Text. 1.Sublime Text 3安装 Ubuntu.Linux ...

  4. React Native开发 - 搭建React Native开发环境

    移动开发以前一般都是原生的语言来开发,Android开发是用Java语言,IOS的开发是Object-C或者Swift.那么对于开发一个App,至少需要两套代码.两个团队.对于公司来说,成本还是有的. ...

  5. 翻译:打造基于Sublime Text 3的全能python开发环境

    原文地址:https://realpython.com/blog/python/setting-up-sublime-text-3-for-full-stack-python-development/ ...

  6. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  7. 搭建React Native开发环境

    搭建React Native开发环境 本文档是Mac下搭建的环境,针对的目标平台不同,以及开发 iOS 和 Android 的不同,环境搭建也有差异. Github地址:https://github. ...

  8. 快速搭建 Node.js 开发环境以及加速 npm

    如何快速搭建 node 开发环境 npm 超慢 github 无法打开的问题 于是我觉得应该写一篇文章解答所有这些起步问题,让新同学也能顺顺利利入门. 快速搭建 Node.js 开发环境 如果你想长期 ...

  9. 【转】使用nvm快速搭建 Node.js 开发环境

    原文链接:http://www.cnblogs.com/shuoer/p/7802891.html 快速搭建 Node.js 开发环境 如果你想长期做 node 开发, 或者想快速更新 node 版本 ...

随机推荐

  1. linux下proc目录详解

    proc/pid记录了什么cd /proc/之后,你会发现很多的目录和文件,今天首先来介绍的就是那些以数字命名的目录--它们就是linux中的进程号,每当你创建一个进程时,里面就会动态更新多出一个名称 ...

  2. memcached for windows 修改端口和最大内存

    解压后只要在命令窗口中输入下面命令c:\memcached\memcached.exe -d install  就可以把memcached安装为windows服务了. 启动该服务后,memcached ...

  3. Knockout.Js官网学习(简介)

    前言 最近一段时间在网上经常看到关于Knockout.js文章,于是自己就到官网看了下,不过是英文的,自己果断搞不来,借用google翻译了一下.然后刚刚发现在建立asp.net mvc4.0的应用程 ...

  4. zookeeper典型应用场景之一:master选举

    对于zookeeper这种东西,仅仅知道怎么安装是远远不够的,至少要对其几个典型的应用场景进行了解,才能比较全面的知道zk究竟能干啥,怎么玩儿,以后的日子里才能知道这货如何能为我所用.于是,有了如下的 ...

  5. Redis监控方案

    Redis 监控最直接的方法当然就是使用系统提供的 info 命令来做了,你只需要执行下面一条命令,就能获得 Redis 系统的状态报告. redis-cli info 内存使用 如果 Redis 使 ...

  6. CentOS6.4安装VNC

    http://jingyan.baidu.com/article/ca2d939dd1dabbeb6c31ce24.html 一.安装 VNC 默认情况下,CentOS 6.4 是没有安装的. 检查是 ...

  7. input中如何输入逆写的中文句子

    <input style="text-align:right" /><input type="text" dir="rtl" ...

  8. delphi中的ClientDataSet组件的open和Execute方法各自在什么情况下用?

    ClientDataSet组件本来是给midas用的,也是所谓的borland的三层数据技术,使用这个控件必须发行midas.dll挺麻烦的 open是通过应用的SQL语句为SELECTexecute ...

  9. gRPC Client的负载均衡器

    一.gRPC是什么? gRPC是一个高性能.通用的开源RPC框架,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于ProtoBuf(Protocol Buffers)序列化协 ...

  10. AngularJs记录学习01

    <!doctype html> <html ng-app="myapp"> <head> <meta http-equiv="C ...