React development environment Construction

---restore content starts---

To use react, you need to install:

1) Babel-sublime;

function: Compile ES6, Support ES6, React.js, JSX code highlighting, and highlight the compiled code.

Installation steps: Find the babel-sublime download zip file in github (https://github.com/ruanyf/react-babel-webpack-boilerplate). Unzip, put Babel-sublime-master folder, put in packages.

2) configuration Sublime-react

Function: Similar to Emmet automatic extension code plug-in, can automatically complement the full react, JSX code.

Installation steps: Find Sublime-react in GitHub (https://github.com/facebookarchive/sublime-react), download the Sublime-react-master file, Put it in the packages.

3) Modify Emmet compatible JSX code

Role: Emmet as one of the front-end development of the necessary plug-in is very convenient and fast, by modifying the default sublime you can quickly write custom components in JSX files through Emmet.

How to use: Open preferences -> Key bindings - Users , copy the following code to [] inside. (PS: Be sure to put the following code in [], I just started to install, I thought [] useless, directly copy and paste, the result is wrong, found several times, only to find the error. ）

  {      "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) Install Jsformat

Function: Format the JS code.

Installation steps: Enter Jsformat on github, download the Jsformat-master package, unzip it and put it under sublime Packages folder.

Open preferences -> Package Settings -> JsFormat -> Setting - Users , enter the following code:

{  true,  //  jsformat options  true, }

You can automatically format your code when you save it, and support the JSX type file.

5) Sublimelinter-jsxhint

Role: Try to prompt and locate code syntax errors.

Installation steps: First install node. js.

Second, the global installation Jsxhint

NPM install-g Jsxhint

Use: In cmd, navigate to the project folder to check if the INDEX.JSX code has syntax errors for example.

After entering the following code in CMD, press ENTER. If the code has a syntax error, the error point is prompted/positioned in the cmd/sublime.
Jsxhint INDEX.JSX

Cons: Unable to persist ES6 code. For this disadvantage, sublimelinter-eslint. Find and download on GitHub and place Sublimelinter-eslint-master under the package folder under the sublime installation path.

After the above steps are complete, you need to install the eslint globally in cmd

NPM install-g Eslint

If you are using Eslint for the first time, you need to set up a configuration file that you can generate using the--INIT option in the project root directory:

The following steps are located at the root of the project and are installed in the project root directory
If the project root directory does not have a Package.json file, you need to initialize a Package.json
NPM init   //results: Generate a Package.json file in the project and directory

Configuration. Eslintrc.js
Eslint--init   //There will be a press-fit prompt, according to the needs of the selection according to the   loading

              A. eslintrc.js file is generated in the project root directory.

Then through Preferences->Package Settings->SublimeLinter->Settings - User the integration:

{    "User": {        "Debug":true,//Turn on Debug option"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"//Set node path],"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    }}

When the above steps are complete, restart the sublime.

The above is my react configuration of the road, the configuration process is a bit tortuous.

Installation problem point:

1) Babel compile no results. The reason is that I did not configure Babel.cmd.

2) at the end of all installation, with Babel compile, the old error.

Workaround: NPM babel-preset-react. and enter the following code in the. Bablerc.

{  "presets": ["es2015", "React"],  "Plugins": []}

Above, is purely small white installation road, for reference only.

Reference: Sublime Text in configuration ESLint http://www.jianshu.com/p/e826e13c67ec

React development environment Construction