Sublime Text3 build React native

Sublime Text 3 build react.js development environment

Sublime 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-sublime

Support for ES6, React.js, JSX code highlighting, JavaScript, JQuery also has a good extension. More about Babel can be seen here: Why Babel will drive JavaScript's development

  installation

Pc:ctrl+shift+p

Mac:cmd+shift+p

Open panel input Babel installation

  configuration

Open a. js,. jsx suffix file;

Open the menu view, Syntax, open all with the current extension as ... Babel, JavaScript (Babel), select Babel to open for default JavaScript Syntax

  2. Sublimelinter-jsxhint

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

installation

PC Ctrl+shift+p (maccmd+shift+p) Open panel input SUBLIMELINTER-JSX installation (dependent on sublimelinter)

Install node. js

Installing Jsxhint

NPM install-g Jsxhint

3. Modify Emmet compatible JSX files

Emmet is quick and easy to use as one of the front-end development prerequisites, and you can quickly write custom components through Emmet in JSX files by modifying the default sublime. 

installation

On PC Ctrl+shift+p (maccmd+shift+p) Open panel input Emmet installation 

use method

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 to trigger Emmet, regular judgment with A,div,span,p,button label default tab trigger, default class modified to ClassName.

Note:

Supre+e on the PC refers to the Win+e (PC is recommended to modify the Emmet default button Ctrl+e), on the Mac refers to the Cmd+e

The above rules are derived from StackOverflow, which are minor changes

  4. Jsformat Formatting JS Code

Jsformat is one of the most useful plugins on sublime JS format, so it can support JSX by modifying its E4x property.

  installation

On PC Ctrl+shift+p (maccmd+shift+p) Open panel input 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

Use Ctrl+shift+p in sublime to open panel input Babel transform automatically compile into React.js file

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

/**
 * Babel
 *
/var gulp = require (' Gulp '),
  Babel = require (' Gulp-babel ');
Gulp.task (' Babel ', function () {
  return gulp.src ('./src/**/*.jsx ')
    . Pipe (Babel ())
    . Pipe (Gulp.dest ('./ Dist ');
});

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", Sub
  Title: "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 Gul
The process of P, while triggering notify message errorhandler:onerror}). Pipe (Babel ()). Pipe (Gulp.dest (dist));

});

  Start the server Gulp.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 ', Reload);
  }); })

On the command line, enter Gulp server to run.

Or, using the build tool that comes with sublime, select tools, build system, and New build system
Input:

{
    "shell_cmd": "Gulp server--cwd $file _path"
}

and Save as Gulpbabel.sublime-build (name at random, keep. sublime-build suffix), store in Packages-users folder, use Ctrl+shift+b in sublime (or tools- > Build with. Open the Build panel and select the name you just entered, here is Gulpbabel run.