Sublime3玩转ES6+ReactJs
来源:互联网 发布:效果图软件哪个好用 编辑:程序博客网 时间:2024/06/16 12:35
原文 (http://ued.fanxing.com/emmet/)
前言
Webpack+React+ES6无疑是目前最火热的开发模式了,为了与时俱进,开始对它进行探索和学习。工欲善其事必先利其器,众所周知,ES6和JSX都是新的语法,而目前的Sublime2已经力不从心了,作为Sublime的忠实粉丝,换IDE又得重新适应,于是折腾了一番,升级Sublime3,不断找相应插件,这里给大家分享一下必备的语法高亮、格式化、jsx的htlm自动补全、es6语法检查插件和安装时遇到的坑。
1.下载Sublime3
https://www.sublimetext.com/3
2.安装Package Control
在线安装: https://packagecontrol.io/installation 因为网络原因可能失败。
离线安装:
下载地址: https://github.com/wbond/package_control
1.把下载好的zip包解压,重命名为Package Control。
2.打开Sublime3,菜单->Preferences->Browse Packages…然后复制Package Control文件夹到该目录。
3.重启Sublime3,如果菜单->Preferences有Package Setting和Package Control就说明安装成功。
4.Ctrl+Shift+p输入install选中Install Package回车就可以安装插件。
3.安装插件
Babel
Sublime3才有的插件,支持ES6、JSX语法高亮。
菜单->View->Syntax->Open all with current extension as…->Babel->JavaScript(Babel) 高亮了有木有。
JsFormat
刚开始在JSX文件格式化后惨不忍睹,其实配置一个属性就可以支持JSX语法格式化。
菜单->Preferences->Package Settings->JsFormat->Settings-User加入以下代码
{ "e4x": true,//支持jsx格式化 "format_on_save": true//保存立即格式化,看个人喜好}
Emmet
这个html标签自动补全的神插件相信很多人都用上了,非常便捷,现在可以通过配置实现JSX的html内容自动补全。
安装完Emmet后会自动安装一个PyV8的依赖插件,但网络不稳定会失败,可以通过自行下载。
下载地址: https://github.com/emmetio/pyv8-binaries#readme
下载完后新建一个PyV8文件夹,把下载的包解压到该文件夹中,放到 C:\Users\yourname\AppData\Roaming\Sublime Text 3\Installed Packages下,与Emmet同一个文件夹下(Emmet安装完是在Installed Packages下而不是Packages) 。
菜单->Preferences->Key Bindings - User加上以下代码(keys就是触发自动补全的按键,可自定义)
[{ "keys": [ "tab" ], "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 }]}]
看下效果:
自动补全的是className而不是class,so far so good!
(坑:网上有些教程是说复制PyV8文件夹到Packages,当按tab键,死活无效,这时ctrl+`看Sublime3的控制台报了这个错误:
AttributeError: ‘module’ object has no attribute ‘JSContext’
被折腾了很久才知道PyV8必须要和Emmet同目录。)
代码检查
1.首先安装SublimeLinter、SublimeLinter-jshint、SublimeLinter-jsxhint、SublimeLinter-contrib-eslint插件。
2.然后命令行全局安装
npm install -g eslintnpm install -g babel-eslintnpm install -g eslint-plugin-reactnpm install -g jsxhint
3.以ES6语法检查为例,在项目工程根目录新建.eslintrc,输入
{"parserOptions": { "ecmaVersion": 6, "sourceType": "module", "ecmaFeatures": { "jsx": true }},"rules": { "semi": ["error", "always"] }}
详细配置参考 http://eslint.org/docs/user-guide/configuring
4.打开Sublime3,菜单->Tools->SublimeLinter->Toggle Linter…就可以打开js、jsx、es6检查规则。注意:当使用es6开发时务必把jshint关掉,否则报一堆警告错误。
总结
到此基本可以欢乐地用Sublime开撸ES6和ReactJs了。
- Sublime3玩转ES6+ReactJs
- ReactJS入门ES6写法
- ES6写法的reactjs
- ES6语法的reactjs组件babel编译
- ES6的新属性,深入浅出,玩转ECMAScript
- sublime3
- ReactJS学习系列课程(React ES6语法使用)
- 自学react-native之必备知识点(ES6+ReactJS+flexbox)
- reactjs
- ReactJS
- ReactJS
- Reactjs
- Reactjs
- 初级前端自学react-native,必备知识点(ES6+ReactJS+flexbox)
- AngularJs与ReactJS优缺点&适用场景【转】
- Sublime3 快捷键
- Sublime3 注册码
- sublime3快捷键
- 今天给大家分享几个实用AS插件
- Android 四大组件之 Activity生命周期
- ImageView
- QLabel 怎么设置底色和字体颜色
- java之redis篇(spring-data-redis整合)
- Sublime3玩转ES6+ReactJs
- Linux Bash快速入门
- KafkaOffsetMonitor监控工具的安装与使用
- Dubbo Failed to save registry store file, cause: Can not lock the registry cache file
- handlerThread
- UVA401 - Palindromes
- 解决项目中不同进程中使用SharedPreferences存取数据不同步的问题
- golang官方指导练习(go tour exercise)
- 交叉排序