SublimeText 3 搭建 React.js 开发环境
转载来源
Sublime Text 3 搭建 React.js 开发环境
Sublime有很强的自定义功能,插件库很庞大,针对新语言插件更新很快,配合使用可以快速搭建适配语言的开发环境。
babel-sublime
支持ES6, React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展。关于 babel 的更多介绍可以看这里:为什么说Babel将推动JavaScript的发展
安装
-
PC:Ctrl+shift+p
-
Mac:Cmd+shift+p 打开面板输入babel安装
配置
-
打开.js, .jsx 后缀的文件;
-
打开菜单view, Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel),选择babel为默认 javascript 打开syntax
sublimeLinter-jsxhint
JSX 代码审查,实时提示语法错误, 帮助快速定位错误点. 安装
-
PC上ctrl+shift+p(MacCmd+shift+p)打开面板输入sublimeLinter-jsx安装(依赖于 sublimeLinter)
-
安装 node.js
-
安装 jsxhint
|
|
修改 Emmet 兼容jsx 文件
emmet 作为前端开发必备插件之一非常方便快捷,通过修改默认的 sublime就可以在 jsx 文件中快速通过 emmet 编写自定义组件。 安装
- PC上ctrl+shift+p(MacCmd+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。
注:
-
supre+e 在 PC 上指的是win+e(pc 建议修改为emmet 默认按键 ctrl+e),在 mac 上指的是cmd+e
-
以上规则来源于StackOverflow,正则小有修改
JsFormat 格式化 js 代码
jsformat 是 sublime 上 js 格式化比较好用的插件之一,通过修改它的e4x 属性可以使它支持 jsx。
安装
- PC上ctrl+shift+p(MacCmd+shift+p)打开面板输入JsFormat安装. 使用
打开preferences -> Package Settings -> JsFormat -> Setting - Users,输入以下代码:
|
|
即可保存时自动格式化,并支持 jsx 类型文件.
编译 jsx
- 使用babel-sublime
- 带有编译 jsx 的命令 babel build。使用 babel 编译 jsx 也由 React 项目官方引用。该命令依赖于 node 包 babel。babel 同时也支持 ES6的新语法经过编译在浏览器中运用。
|
|
在 sublime 中使用ctrl+shift+p打开面板输入babel transform自动编译成 react.js 文件
|
|
|
|
- 在命令行中输入 gulp babel 运行 配合 BrowserSync 使用可以实时监测改动并同步刷新多平台上得浏览器。
|
|
|
|
{ “shell_cmd”: “gulp server –cwd $file_path” }``` 并保存为 gulpBabel.sublime-build(名称随意,保持.sublime-build后缀名),存放到Packages - Users文件夹里面,在 sublime 中使用ctrl+shift+b(或Tools -> Build With ..)打开 build 面板,选择刚刚输入的名称,在这里是gulpBabel运行。
- 原文作者:星辰
- 原文链接:/post/sublime-text-3%E6%90%AD%E5%BB%BA-react.js-%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/
- 版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议. 进行许可,非商业转载请注明出处(作者,原文链接),商业转载请联系作者获得授权。