（轉(zhuǎn)）http://www.cnblogs.com/terrylin/p/4942332.html
Sublime有很強(qiáng)的自定義功能，插件庫(kù)很龐大臂港，針對(duì)新語(yǔ)言插件更新很快巷蚪，配合使用可以快速搭建適配語(yǔ)言的開發(fā)環(huán)境帮孔。
支持ES6克胳， React.js, jsx代碼高亮，對(duì) JavaScript, jQuery 也有很好的擴(kuò)展捎拯。
安裝
PC：Ctrl+shift+p
Mac：Cmd+shift+p
打開面板輸入babel安裝
配置
打開.js, .jsx 后綴的文件;
打開菜單view泪幌，Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)，選擇babel為默認(rèn) javascript 打開syntax
JSX 代碼審查署照，實(shí)時(shí)提示語(yǔ)法錯(cuò)誤, 幫助快速定位錯(cuò)誤點(diǎn).
安裝
PC上ctrl+shift+p（MacCmd+shift+p）打開面板輸入sublimeLinter-jsx安裝(依賴于sublimeLinter)
安裝node.js
安裝jsxhint
npm install -g jsxhint
3. 修改Emmet兼容jsx 文件
emmet 作為前端開發(fā)必備插件之一非常方便快捷祸泪，通過(guò)修改默認(rèn)的 sublime就可以在 jsx 文件中快速通過(guò) emmet 編寫自定義組件。
安裝
PC上ctrl+shift+p（MacCmd+shift+p）打開面板輸入emmet安裝
使用方法
打開preferences -> Key bindings - Users建芙，把下面代碼復(fù)制到[]內(nèi)部没隘。
{? ? ? "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觸發(fā) emmet；正則判斷用 a禁荸，div右蒲，span，p赶熟，button標(biāo)簽?zāi)J(rèn)tab 觸發(fā)瑰妄；默認(rèn) class 修改為 className。
注：
supre+e 在 PC 上指的是win+e（pc 建議修改為emmet 默認(rèn)按鍵ctrl+e）,在 mac 上指的是cmd+e
以上規(guī)則來(lái)源于StackOverflow映砖，正則小有修改
4.JsFormat格式化 js 代碼
jsformat 是 sublime 上 js 格式化比較好用的插件之一间坐，通過(guò)修改它的e4x屬性可以使它支持 jsx。
安裝
PC上ctrl+shift+p（MacCmd+shift+p）打開面板輸入JsFormat安裝.
使用
打開preferences -> Package Settings -> JsFormat -> Setting - Users,輸入以下代碼：
{? "e4x":true,? // jsformat options? "format_on_save":true,}
即可保存時(shí)自動(dòng)格式化，并支持 jsx 類型文件.
5. 編譯 jsx
帶有編譯 jsx 的命令 babel build竹宋。使用 babel 編譯 jsx 也由 React 項(xiàng)目官方引用劳澄。該命令依賴于 node 包babel。babel 同時(shí)也支持 ES6的新語(yǔ)法經(jīng)過(guò)編譯在瀏覽器中運(yùn)用蜈七。
npm install -g babel
在 sublime 中使用ctrl+shift+p打開面板輸入babel transform自動(dòng)編譯成 react.js 文件
使用自動(dòng)化構(gòu)建工具（gulp|grunt 等）
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 運(yùn)行
配合 BrowserSync 使用可以實(shí)時(shí)監(jiān)測(cè)改動(dòng)并同步刷新多平臺(tái)上得瀏覽器秒拔。
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'))//把所有東西放入緩存中，每次只編譯修改過(guò)的文件? ? .pipe(plumber({//發(fā)生錯(cuò)誤時(shí)不會(huì)中斷 gulp 的流程飒硅，同時(shí)觸發(fā) notify 消息提示? ? ? errorHandler: onError? ? }))? ? .pipe(babel())? ? .pipe(gulp.dest(dist));});// Start the servergulp.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 運(yùn)行砂缩。
或者使用 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運(yùn)行彬伦。
