react开发环境搭建

---恢复内容开始---javascript

要想用react,须要安装:php

1)babel-sublime;html

做用:编译es6,支持ES6, React.js, jsx代码高亮,并对所编译的代码进行高亮显示。前端

安装步骤:在github(https://github.com/babel/babel-sublime)中找到babel-sublime下载压缩文件。解压,把babel-sublime-master文件夹,放在Packages中。java

2)配置sublime-reactnode

做用:相似于emmet的自动扩展代码插件,可自动补全react、jsx代码。python

安装步骤:在github(https://github.com/facebookarchive/sublime-react)中找到sublime-react,下载sublime-react-master文件,放到Packages中。react

3)修改emmet兼容jsx代码linux

做用:emmet 做为前端开发必备插件之一很是方便快捷,经过修改默认的 sublime就能够在 jsx 文件中快速经过 emmet 编写自定义组件。git

使用方法:打开 preferences -> Key bindings - Users,把下面代码复制到[]内部。(ps:必定要把下面的代码放在[]中,我在刚开始安装时,觉得[]没用,就直接复制粘贴,结果出错,找了好几遍,才发现错误。)

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

 4) 安装JSFORMAT

做用:格式化JS代码。

安装步骤:在github上输入JSFORMAT,下载JsFormat-master压缩包,解压后放到sublime的Packages文件夹下。

打开preferences -> Package Settings -> JsFormat -> Setting - Users,输入如下代码:

{
  "e4x": true,
  // jsformat options
  "format_on_save": true,
}

便可在保存时,对代码进行自动格式化,并支持 jsx 类型文件。

5)sublimelinter-jsxhint

做用:试试提示并定位代码的语法错误。

安装步骤:首先安装node.js。

其次,全局安装jsxhint

npm install -g jsxhint

使用:在cmd中,定位到项目文件夹,以检查index.jsx代码是否有语法错误为例。

//在cmd中输入下述代码后,按回车。若是代码有语法错误,则会在cmd/sublime中提示/定位错误点。
jsxhint index.jsx

缺点:没法坚持es6代码。针对此缺点,SublimeLinter-eslint。在github中查找并下载,将SublimeLinter-eslint-master放在sublime安装路径下的package文件夹下。

以上步骤完成后,需在cmd中全局安装eslint

npm install -g eslint

若第一次使用eslint时,需先设置一个配置文件,你能够在项目根目录下使用 --init选项生成:

//如下步骤均定位到项目根目录下完成,即均装在项目根目录里
//若项目根目录下没有package.json文件,则需初始化一个package.json
npm init //结果:在项目跟目录下生成一个package.json文件

//配置.eslintrc.js
eslint --init //会有按装提示,根据需求进行选择 按装完后
              //项目根目录中会生成一个.eslintrc.js文件。


而后经过 Preferences->Package Settings->SublimeLinter->Settings - User 进行集成:

{
    "user": {
        "debug": true,//开启 debug 选项
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
            "eslint": {
                "@disable": false,
                "args": [],
                "excludes": []
            },
            "jshint": {
                "@disable": false,
                "args": [],
                "excludes": []
            },
            "php": {
                "@disable": false,
                "args": [],
                "excludes": []
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        "paths": {
            "linux": [],
            "osx": [
                "/Users/wang/.nvm/versions/node/v5.0.0/bin" //设置 node 路径
            ],
            "windows": []
        },
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "javascript (babel)": "javascript",
            "magicpython": "python",
            "php": "html",
            "python django": "python",
            "pythonimproved": "python"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

以上步骤完成后,重启sublime便可。

以上就是个人react配置之路,配置过程有点曲折。

安装问题点:

1)babel编译无结果。缘由是,我没配置babel.cmd。

2)在最后所有安装完后,用babel编译时,老出错。

解决办法:npm babel-preset-react。并在.bablerc中输入下述代码。

{
  "presets": ["es2015","react"],
  "plugins": []
}

以上,纯属小白的安装之路,仅供参考。

 

参考:Sublime Text 中配置 ESLint       http://www.jianshu.com/p/e826e13c67ec