sublime 玩转react+es6

Sublime3玩转ES6+ReactJs

标签： JavaScriptreact

2016-08-22 18:04 5751人阅读 评论(0) 收藏 举报

分类：

javasctipt（61） react（1） sublime（2） 开发工具（3）

原文 (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:UsersyournameAppDataRoamingSublime Text 3Installed 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了。