sublime 玩转react+es6

Posted 意念

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了sublime 玩转react+es6相关的知识，希望对你有一定的参考价值。

Sublime3玩转ES6+ReactJs

标签： JavaScriptreact
2016-08-22 18:04 5751人阅读 评论(0) 收藏 举报
技术分享 分类：

原文 (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//保存立即格式化，看个人喜好
}
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

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
  }]
}]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

看下效果：

技术分享

自动补全的是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 eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react
npm install -g jsxhint
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

3.以ES6语法检查为例，在项目工程根目录新建.eslintrc,输入

{
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
},
"rules": {
    "semi": ["error", "always"]
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

详细配置参考 http://eslint.org/docs/user-guide/configuring

4.打开Sublime3，菜单->Tools->SublimeLinter->Toggle Linter…就可以打开js、jsx、es6检查规则。注意：当使用es6开发时务必把jshint关掉，否则报一堆警告错误。

总结

到此基本可以欢乐地用Sublime开撸ES6和ReactJs了。





以上是关于sublime 玩转react+es6的主要内容，如果未能解决你的问题，请参考以下文章

sublime +react+es6开发环境

sublime3 支持jsx es6语法

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

Sublime Text3自定义代码片段

如何在Sublime Text中添加代码片段

sublime代码片段