您的位置：首页 > Web前端 > React

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

2016-04-11 21:42 656 查看
sublime有很强的自定义功能，插件库很庞大，针对新语言插件更新很快，配合使用可以快速搭建适配语言的开发环境。

1.babel

支持ES6，React.js,jsx代码高亮，对JavaScript,jQuery也有很好的扩展。关于babel的更多介绍可以看这里：为什么说Babel将推动JavaScript的发展安装PC：
Ctrl+shift+p
Mac：
Cmd+shift+p
打开面板输入
babel
安装

配置

打开.js,.jsx后缀的文件;打开菜单
view
，
Syntax->Openallwithcurrentextensionas...->Babel->JavaScript(Babel)
，选择babel为默认javascript打开syntax士大夫似的

2.sublimeLinter-jsxhint

JSX代码审查，实时提示语法错误,帮助快速定位错误点.

安装

PC上
ctrl+shift+p
（Mac
Cmd+shift+p
）打开面板输入
sublimeLinter-jsx
安装(依赖于
sublimeLinter
)安装
node.js
安装jsxhint
npminstall-gjsxhint
3.修改Emmet兼容jsx文件
emmet作为前端开发必备插件之一非常方便快捷，通过修改默认的sublime就可以在jsx文件中快速通过emmet编写自定义组件。
安装
PC上
ctrl+shift+p
（Mac
Cmd+shift+p
）打开面板输入
emmet
安装
使用方法
打开
preferences->Keybindings-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。注：supre+e在PC上指的是
win+e
（pc建议修改为emmet默认按键
ctrl+e
）,在mac上指的是
cmd+e
以上规则来源于StackOverflow，正则小有修改
4.JsFormat格式化js代码
jsformat是sublime上js格式化比较好用的插件之一，通过修改它的
e4x
属性可以使它支持jsx。
安装
PC上
ctrl+shift+p
（Mac
Cmd+shift+p
）打开面板输入
JsFormat
安装.
使用
打开
preferences->PackageSettings->JsFormat->Setting-Users
,输入以下代码：
{"e4x":true,//jsformatoptions"format_on_save":true,}
即可保存时自动格式化，并支持jsx类型文件.
5.编译jsx
使用babel-sublime带有编译jsx的命令babelbuild。使用babel编译jsx也由React项目官方引用。该命令依赖于node包babel。babel同时也支持ES6的新语法经过编译在浏览器中运用。
npminstall-gbabel
在sublime中使用
ctrl+shift+p
打开面板输入
babeltransform
自动编译成react.js文件使用自动化构建工具（gulp|grunt等）以gulp为例(依赖gulp,需提前安装)：
npminstallgulp-babel
/***babel*/vargulp=require('gulp'),babel=require('gulp-babel');gulp.task('babel',function(){returngulp.src('./src/**/*.jsx').pipe(babel()).pipe(gulp.dest('./dist'));});在命令行中输入gulpbabel运行配合BrowserSync使用可以实时监测改动并同步刷新多平台上得浏览器。
在命令行中输入gulpbabel运行配合BrowserSync使用可以实时监测改动并同步刷新多平台上得浏览器。
npminstallgulp-babelgulp-plumbergulp-notifygulp-cachedbrowser-syncrun-sequence
/***babel*/vargulp=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(){varonError=function(err){notify.onError({title:"Gulp",subtitle:"Failure!",message:"Error:<%=error.message%>",sound:"Beep"})(err);};returngulp.src(src+'/**/*.jsx').pipe(cached('react'))//把所有东西放入缓存中，每次只编译修改过的文件.pipe(plumber({//发生错误时不会中断gulp的流程，同时触发notify消息提示errorHandler:onError})).pipe(babel()).pipe(gulp.dest(dist));});//Starttheservergulp.task('bs',function(){varfiles;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);});})在命令行中输入gulpserver运行。或者使用sublime自带的build工具，选择
Tools->BuildSystem->NewBuildSystem
输入:
{"shell_cmd":"gulpserver--cwd$file_path"}
并保存为gulpBabel.sublime-build(名称随意，保持.sublime-build后缀名)，存放到
Packages-Users
文件夹里面，在sublime中使用
ctrl+shift+b
（或
Tools->BuildWith..
）打开build面板，选择刚刚输入的名称，在这里是
gulpBabel
运行。

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航