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
Open a. js,. jsx suffix file;
Open the menu, view
Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)
Select Babel for default JavaScript to open syntax
2. Sublimelinter-jsxhint
JSX code review, real-time prompt syntax error, help to quickly locate the error point.
Installation
On PC ctrl+shift+p
(Mac Cmd+shift+p
) Open Panel input sublimeLinter-jsx
install (dependent sublimeLinter
)
Installationnode.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
(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": < Span class= "hljs-string" > "Regex_contains", "operand": match_all ": true}, {" Span class= "Hljs-attribute" >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:
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
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 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", subtitle:"failure!", Message:"Error: <%= error.message%>", Sound:"Beep"}) (err); };return GULP.SRC (src +'/**/*.JSX '). Pipe (Cached (' React '))Put everything in the cache and compile only the modified files at a time. Pipe (Plumber ({The gulp process is not interrupted when an error occurs, and the Notify message prompt Errorhandler:onerror}) is triggered. Pipe (Babel ()). Pipe (Gulp.dest (Dist));});//Start the Servergulp.task (' BS ', function() { var files; files = [src + '/**/*.+ (html|php|js|cs s|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 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