Sublime Text 3 Build react.js development environment

Ublime has a strong custom function, the plugin library is very large, for the new language plug-in updates quickly, with the use of the language can quickly build a development environment.

1. Babel

support for ES6, React.js, JSX code highlighting, JavaScript, JQuery also has a good extension. More information about Babel can be found here: Why Babel will drive the development of JavaScript

installation

• Pc:Ctrl+shift+p

• Mac:Cmd+shift+p

Open Panel Input babel installation

Configuration

1. Open a. js,. jsx suffix file;

2. Open the menu, view Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel) Select Babel for default JavaScript to open syntax

3. Scholar-bureaucrat

2. sublimelinter-jsxhint

JSX code review, real-time prompt syntax error, help to quickly locate the error point.

Installation

1. On PC ctrl+shift+p (Mac Cmd+shift+p ) Open Panel input sublimeLinter-jsx install (dependent sublimeLinter )

2. Installationnode.js

3. Installing Jsxhint

npm install -g jsxhint

3. Modify Emmet compatible JSX files

 emmet 作为前端开发必备插件之一非常方便快捷，通过修改默认的 sublime就可以在 jsx 文件中快速通过 emmet 编写自定义组件。

Installation

On PC ctrl+shift+p (Mac Cmd+shift+p ) Open panel input emmet installation

How to use

Open preferences -> Key bindings - Users and copy the following code inside [].

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

　　

Use super+e trigger Emmet, regular judgment with A,div,span,p,button label default tab trigger, default class modified to ClassName.

Note:

1. Supre+e on the PC refers to win+e (the PC is recommended to change to the Emmet default button ctrl+e ), on the Mac refers to thecmd+e

2. The above rules are derived from StackOverflow, while the regular changes are minor.

4. jsformat format JS code

Jsformat is one of the more useful plugins on the sublime JS format, which allows it to support JSX by modifying its e4x  properties.

installation

On the PC ctrl+shift+p (Mac Cmd+shift+p ), open the Panel to enter the JsFormat installation.

Use

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

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

Can be automatically formatted when saved and supports the JSX type file.

5. Compiling JSX

• Using Babel-sublime
  Command Babel build with compiled JSX. Compiling JSX using Babel is also referenced by the React project official. This command relies on Node packet babel. Babel also supports ES6 's new syntax being compiled in the browser.

  npm install -g babel

  ctrl+shift+p babel transform automatically compile into react.js files using the open panel input in sublime

• Using Automated build tools (Gulp|grunt, etc.)
  Take Gulp as an example (dependent on gulp, need to be installed in advance):

  npm install gulp-babel 

  /** * Babel */var gulp = require (' Gulp '),  Babel = require (' Gulp-babel '); Gulp.task (' Babel ', function () {  return gu Lp.src ('./src/**/*.jsx ')    . Pipe (Babel ())    . Pipe (Gulp.dest ('./dist '));}); Enter Gulp Babel run mates on the command line Browsersync use to monitor changes in real time and refresh the browser on multiple platforms simultaneously.

  Enter Gulp Babel run on the command line

  With Browsersync, you can monitor changes in real time and refresh browsers on multiple platforms simultaneously.

  npm install gulp-babel gulp-plumber gulp-notify gulp-cached browser-sync run-sequence

/** * Babel */var gulp = require (' Gulp '), Babel = require (' Gulp-babel '), BS = require (' Browser-sync '). Create (), reload = bs.reload, runsequence = require (' run-sequence '). Use (gulp), src = ' src ',//source directory path dist = ' dist '; Output path Gulp.task (' Babel ', function () {var onError = function (err) {Notify.onerror ({title: "Gulp", subtitle  : "failure!", Message: "Error: <%= error.message%>", Sound: "Beep"}) (err);  }; return gulp.src (src + '/**/*.jsx '). Pipe (Cached (' react '))//Put everything in the cache, compiling only the modified files at a time. Pipe (Plumber ({//) no interruption in error occurs gulp (Notify message prompt Errorhandler:onerror})). Pipe (Babel ()). Pipe (Gulp.dest (dist));  /Start the Servergulp.task (' BS ', function () {var files;  Files = [src + '/**/*.+ (html|php|js|css|png|jpg|svg|gif) ']; Bs.init (Files, {server: {basedir:src,}});}); Gulp.task (' Server ', [' Babel ', ' BS '], function () {gulp.watch (src + '/**/*.jsx ', function () {runsequence (' Babel ', Reloa    D);  }); })

On the command line, enter Gulp server to run.

Or, using the build tool that sublime comes with, selectTools -> Build System -> New Build System
Input:

{    "shell_cmd": "gulp server --cwd $file_path"}

and save it as Gulpbabel.sublime-build (name at random, keep. sublime-build suffix name), store Packages - Users in folder, use ctrl+shift+b (or Tools -> Build With .. ) Open build panel in sublime, Select the name you just entered, here is the gulpBabel run.

Sublime Text 3 build react.js development environment