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. 代码审查(jsxhint或eslint)

A. 使用eslint(SublimeLinter-eslint)

es6正式发布后,加上facebook官方将react的编译器转成了babelreact+es6的简明写法成了开发者首选,linter也由jshint向eslint转换。airbnb的react开发代码规范也是得到许多开发者的点赞,这里也使用这个比较大众的语法规范。

安装

  1. 使用npm安装:npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint;

  2. terminal(建议在开发根目录)输入eslint --init, 按提示选择后,生成.eslintrc:

当然.eslintrc文件也可以手动调整参数:

{"extends": "airbnb","env": {"browser": true, "jQuery": true, "node": true }, "plugins": [ "react" ], "globals": { "jQuery": 1 }, "rules": { "no-var": 0, comma-dangle: ["error", "never"] } }

B. 使用sublimeLinter-jsxhint

常用于编写默认react语法的JSX 代码审查,实时提示语法错误, 帮助快速定位错误点.

安装

  1. PC上ctrl+shift+p(MacCmd+shift+p)打开面板输入sublimeLinter-jsx安装(依赖于 sublimeLinter)

  2. 安装 node.js

  3. 安装 jsxhint

  4. install -g jsxhint

3. 修改 Emmet 兼容jsx 文件

emmet 作为前端开发必备插件之一非常方便快捷,默认情况下使用快捷键ctrl+e可以自动扩展成适应于react的className形式。而使用tab来默认拓展则需要通过修改sublime快捷键,如下所示:

安装

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

使用方法

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

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

注:以上规则来源于emmet-sublime文档。

4. JsFormat 格式化 js 代码

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

安装

PC上ctrl+shift+p(MacCmd+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运行。

转载于:https://www.cnblogs.com/fakeCoder/p/6768668.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488493.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI造假 vs AI打假 终结“猫鼠游戏”不能只靠技术

来源&#xff1a;和讯网人脸识别作为生物识别中的重要手段&#xff0c;成为了近年身份识别中最热门的领域。但与人脸识别技术共同发展的&#xff0c;还有借助机器学习系统、图像视频和音频内容&#xff0c;更改人脸、物体或环境呈现方式的深度伪造技术。随着这一技术的日趋成熟…

你好AI丨重读图灵经典之作,九条反驳意见引人深思

来源&#xff1a; AI科技评论编译 | 丛末、蒋宝尚当一台计算机能够骗过人类&#xff0c;让他们相信它就是一个人的时候&#xff0c;就能够被称作智能。编者按&#xff1a;对于艾伦图灵&#xff0c;相信大家都并不陌生&#xff0c;作为人工智能鼻祖&#xff0c;图灵的诸多观点即…

java 比较源文件_Beyond Compare比较Java源代码文件的操作方法

今天小编就带大家来共同学习BeyondCompare如何比较Java源代码文件希呢?望可以帮助到有需要的小伙伴哦&#xff0c;下面就是详细完整的操作步骤。打开BeyondCompare&#xff0c;在主页面左侧目录下选择文本比较会话&#xff0c;打开会话操作界面。分别单击比较会话界面“打开文…

关于研究的方法

转载于:https://www.cnblogs.com/freedommovie/p/6769717.html

【学术快报】韩世辉课题组在《eLife》发表论文揭示群体冲突中复仇的神经生物学机制...

来源&#xff1a;脑科学在群体冲突中&#xff0c;看到对手伤害自己的队友会激发报复行为&#xff0c;去攻击对手。这一复杂社会行为贯穿人类历史&#xff0c;阐明其机理具有重要科学意义和社会价值。心理学研究提出对“内群体的爱”&#xff08;ingroup love&#xff09;或/和对…

《面向对象程序设计》课程作业二

github链接作业链接编写一个程序&#xff0c;要求根据给定的圆的半径求圆的面积&#xff0c;并将求得的结果打印出来。……建立一个工程&#xff0c;将程序写成两个.cpp和一个.h的形式。 这个问题倒是没什么难的&#xff0c;但对于同学们来说是一个上手模块化的好开端。从现在开…

报告 | 超级智能城市2.0 – 人工智能引领新风尚(附下载)

来源&#xff1a;智慧城市决策参考未来智能实验室是人工智能学家与科学院相关机构联合成立的人工智能&#xff0c;互联网和脑科学交叉研究机构。未来智能实验室的主要工作包括&#xff1a;建立AI智能系统智商评测体系&#xff0c;开展世界人工智能智商评测&#xff1b;开展互联…

icmp协议_ICMP协议【41】

1、回顾TCP/IP协议栈为了更有效地转发IP数据报和提高交付成功的机会......2、ICMP协议的简介(1)ICMP&#xff0c;全称为Internet Control Message Protocol&#xff0c;即网际控制报文协议、网际控制消息协议。(2)它是TCP/IP协议族的一个子协议&#xff0c;用于在IP主机、路由器…

java的字节码无法显示_【java】查看Java字节码文件内容的方法+使用javap找不到类 解决方法...

研究synchronized底层实现&#xff0c;涉及到查看java字节码的需要前提是&#xff0c;你的PC已经成功安装了JDK并别配置了环境变量。查看方法一.javap查看简约字节码方式1.准备一个java文件例如&#xff0c;文件所在目录在此处Student.java文件内容如下&#xff1a;packagecom.…

SparkR

SparkR 支持原创&#xff1a;http://blog.csdn.net/dr_guo/article/details/51377784 突然有个想法&#xff0c;R只能处理百万级别的数据&#xff0c;如果R能运行在Spark上多好&#xff01;搜了下发现13年SparkR这个项目就启动了&#xff0c;感谢美帝&#xff01; 1.你肯定得先…

彻底颠覆神经科学?神经信号可能不是电信号,而是机械波?!

来源&#xff1a;环球科学就职于哥本哈根尼尔斯玻尔研究所的托马斯亨伯格&#xff08;Thomas Heimburg&#xff09;&#xff0c;是一位研究量子力学和生物物理的物理学家。然而&#xff0c;他却希望推翻很多神经科学教科书上的内容。在亨伯格看来&#xff0c;神经元之间通过类似…

java可视化压缩_25个小众的Java库

25年前&#xff0c;James Gosling创建了Java&#xff0c;并永远地改变了编程语言的版图。与许多其他编程语言不同&#xff0c;Java在整个生命周期中都受到业界的高度欢迎和需求。Java具有非常优秀的Core库&#xff0c;提供了许多基本功能。 基于其高度流行性&#xff0c;因此也…

深度解读:人体防御病毒的免疫力究竟是什么?

来源&#xff1a;国际仿生工程学会“免疫力作为机体免除瘟疫的一种能力&#xff0c;已被广大民众广泛使用&#xff0c;特别是本次新型冠状病毒的暴发&#xff0c;更是使得免疫力在新闻媒体中广泛传播。对于这样一个极其抽象模糊的术语&#xff0c;我们需要理解其真实的含义是什…

国自然:信息科学部优先发展领域及主要研究方向(含跨科学部)

来源&#xff1a;科奖多媒体中心“十三五”期间&#xff0c;通过支持我国优势学科和交叉学科的重要前沿方向&#xff0c;以及从国家重大需求中凝练可望取得重大原始创新的研究方向&#xff0c;进一步提升我国主要学科的国际地位&#xff0c;提高科学技术满足国家重大需求的能力…

缓冲区不能为空。 参数名: buffer_Java Nio 之Buffer

了解历史在 java1.4之前java io ,最核心的点是在"流"上&#xff1b;java io 的两大基石InputStream和OutputStream 也就是大家耳熟能祥的输入流和输出流,通过这个两个基石可以实现从外界读取数据到内存&#xff0c;以及将内存中数据写到外界&#xff1b;但是输入流和…

机器人行业疫情之下的“危”与“机”

来源&#xff1a;腾讯网口罩脱销令口罩生产线炙手可热&#xff0c;医护人士紧缺令送药机器人走俏&#xff0c;站场监控让自动测体温机器人成为网红&#xff0c;武汉街头配送出现物流机器人身影……新型冠状病毒感染肺炎疫情&#xff0c;给机器人和智能制造行业带来了意想不到的…

mysql 二进制日志变化_MySQL运维之二进制日志

MySQL二进制日志里保存会造成或可能造成数据变化的SQL语句。通过二进制日志可以完成如实时异地容灾备份、读写分离、数据恢复等功能。下面&#xff0c;我们一起来看看Mysql二进制日志。开启bin-log日志Mysql默认是没有开启bin-log日志的&#xff0c;需要我们自己去添加配置。lo…

影响和改变世界的50件发明专利,猜下中国有几个?

来源&#xff1a;国家知识产权局创新创造未来&#xff0c;专利改变世界。最近几十年究竟有哪些专利真正改变了世界呢&#xff1f;国家识产权局选取了一批具有历史意义的、促进社会经济发展的、对人类社会产生重要影响的中外专利。未来智能实验室的主要工作包括&#xff1a;建立…

js 自动分配金额_JS内存图以及原型与原型链

内存以及内存图在JS中&#xff0c;每一个数据都需要一个内存空间。内存空间又被分为两种&#xff0c;栈内存(stock)与堆内存(heap)。JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量&#xff0c;堆存放复杂对象&#xff0c;池存放常量。JS中的基础…

全球首个AI宇宙模拟器不仅有6亿光年宽度,还“自行”跑出了暗物质

来源&#xff1a;大数据文摘《创世纪》里&#xff0c;神用7天创造了这个世界。而现在&#xff0c;你可能也有机会体验这个过程&#xff0c;创造一个属于自己的宇宙。Space Engine 0.990版本在Steam平台发售不到一天&#xff0c;近300测评全部为最高评价。之后&#xff0c;还得到…