Reproduced Sublime Text 3 Build react.js development environment

[Reprint]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 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

2. Eslint for Sublime

Compared to JSLint, jshint and other such detection tools, eslint the greatest attraction is to support JS, JSX, ES6 (es2015) and other code detection.

Installation

1. Installationnode.js
2. Installing Eslint and Babel-eslint
   

1 npm Install-2 npm install-g babel-eslint

3. On PC ctrl+shift+p (Mac Cmd+shift+p ) Open Panel input sublimelinter-contrib-eslint (dependent sublimelinter)

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 (Mac Cmd+shift+p ) Open panel input emmet installation

How to use

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

1 {2"Keys": [3"Super+e"4       ],5"Args": {6"Action": "Expand_abbreviation"7       },8"Command": "Run_emmet_action",9"Context": [{Ten"Key": "Emmet_action_enabled.expand_abbreviation" One       }] A     }, -     { -"Keys": ["tab"], the"Command": "Expand_abbreviation_by_tab", -"Context": [{ -"Operand": "Source.js", -"operator": "Equal", +"Match_all":true, -"Key": "selector" +       }, { A"Key": "Preceding_text", at"Operator": "Regex_contains", -"Operand": "(\\b (A\\b|div|span|p\\b|button) (\\.\\w*|>\\w*)? ( [^}] *?} $)?)", -"Match_all":true -       }, { -"Key": "Selection_empty", -"operator": "Equal", in"Operand":true, -"Match_all":true to       }] +}

Use super+e Trigger Emmet, regular judgment with A,div,span,p,button tag 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:

1 {2   true , 3   // Jsformat Options 4   true , 5 }

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.

  1 npm install-g Babel

• use ctrl+shift+p in sublime Open Panel input babel transform automatically compiled into react.js files

• 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

  1 /**2 * Babel3  */4 varGulp = require (' Gulp ')),5Babel = require (' Gulp-babel '));6Gulp.task (' Babel ',function() {7   returnGulp.src ('./src/**/*.jsx '))8 . Pipe (Babel ())9. Pipe (Gulp.dest ('./dist ')));Ten});

  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

• 1 /**2 * Babel3  */4 varGulp = require (' Gulp ')),5Babel = require (' Gulp-babel ')),6BS = require (' Browser-sync '). Create (),7Reload =Bs.reload,8Runsequence = require (' run-sequence ')). Use (gulp),9src = ' src ',//Source directory pathTendist = ' dist ';//Output Path OneGulp.task (' Babel ',function() { A   varOnError =function(err) { - Notify.onerror ({ -Title: "Gulp", theSubtitle: "Failure!", -Message: "Error: <%= error.message%>", -Sound: "Beep" - }) (err); +   }; -  +   returnGULP.SRC (src + '/**/*.jsx ') A. pipe (Cached (' react '))//put everything in the cache and compile only the modified files at a time at. Pipe (Plumber ({//The gulp process is not interrupted when an error occurs, and the Notify message prompt is triggered - Errorhandler:onerror -     })) - . Pipe (Babel ()) - . Pipe (Gulp.dest (Dist)); - }); in  - //Start the server toGulp.task (' BS ',function() { +   varfiles; -  theFiles = [ *src + '/**/*.+ (html|php|js|css|png|jpg|svg|gif) ' $   ];Panax Notoginseng  - Bs.init (Files, { the server: { + Basedir:src, A    } the   }); + }); -  $Gulp.task (' Server ', [' Babel ', ' BS '),function() { $Gulp.watch (src + '/**/*.jsx ',function() { -Runsequence (' Babel ', reload); -     }); the})

  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:

1 {2     "Shell_cmd": "Gulp server--cwd $file _path"3 }

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

Reproduced Sublime Text 3 Build react.js development environment