sublime67linter-php,Sublime Text 3 搭建 React.js 开发环境
Sublime有很強(qiáng)的自定義功能，插件庫很龐大，針對新語言插件更新很快，配合使用可以快速搭建適配語言的開發(fā)環(huán)境。
支持ES6， React.js, jsx代碼高亮，對 JavaScript, jQuery 也有很好的擴(kuò)展。關(guān)于 babel 的更多介紹可以看這里：為什么說Babel將推動JavaScript的發(fā)展
安裝
PC：Ctrl+shift+p
Mac：Cmd+shift+p
打開面板輸入babel安裝
配置
打開.js, .jsx 后綴的文件;
打開菜單view， Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel)，選擇babel為默認(rèn) javascript 打開syntax
2. 代碼審查(jsxhint或eslint)
es6正式發(fā)布后，加上facebook官方將react的編譯器轉(zhuǎn)成了babel，react+es6的簡明寫法成了開發(fā)者首選，linter也由jshint向eslint轉(zhuǎn)換。airbnb的react開發(fā)代碼規(guī)范也是得到許多開發(fā)者的點(diǎn)贊，這里也使用這個(gè)比較大眾的語法規(guī)范。
安裝
使用npm安裝：npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint;
terminal(建議在開發(fā)根目錄)輸入eslint --init, 按提示選擇后，生成.eslintrc:
當(dāng)然.eslintrc文件也可以手動調(diào)整參數(shù)：
{
"extends": "airbnb",
"env": {
"browser": true,
"jQuery": true,
"node": true
},
"plugins": [
"react"
],
"globals": {
"jQuery": 1
},
"rules": {
"no-var": 0,
comma-dangle: ["error", "never"]
}
}
常用于編寫默認(rèn)react語法的JSX 代碼審查，實(shí)時(shí)提示語法錯(cuò)誤, 幫助快速定位錯(cuò)誤點(diǎn).
安裝
PC上ctrl+shift+p(MacCmd+shift+p)打開面板輸入sublimeLinter-jsx安裝(依賴于 sublimeLinter)
安裝 node.js
install -g jsxhint
3. 修改 Emmet 兼容jsx 文件
emmet 作為前端開發(fā)必備插件之一非常方便快捷，默認(rèn)情況下使用快捷鍵ctrl+e可以自動擴(kuò)展成適應(yīng)于react的className形式。而使用tab來默認(rèn)拓展則需要通過修改sublime快捷鍵，如下所示：
安裝
PC上ctrl+shift+p(MacCmd+shift+p)打開面板輸入emmet安裝
使用方法
打開 preferences -> Key bindings - Users，把下面代碼復(fù)制到[]內(nèi)部。
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
// put comma-separated syntax selectors for which
// you want to expandEmmet abbreviations into "operand" key
// instead of SCOPE_SELECTOR.
// Examples: source.js, text.html - source
"context": [
{
"operand": "source.js",
"operator": "equal",
"match_all": true,
"key": "selector"
},
// run only if there's no selected text
{
"match_all": true,
"key": "selection_empty"
},
// don't work if there are active tabstops
{
"operator": "equal",
"operand": false,
"match_all": true,
"key": "has_next_field"
},
// don't work if completion popup is visible and you
// want to insert completion with Tab. If you want to
// expand Emmet with Tab even if popup is visible --
// remove this section
{
"operand": false,
"operator": "equal",
"match_all": true,
"key": "auto_complete_visible"
},
{
"match_all": true,
"key": "is_abbreviation"
}
]
},
4. JsFormat 格式化 js 代碼
jsformat 是 sublime 上 js 格式化比較好用的插件之一，通過修改它的e4x屬性可以使它支持 jsx。
安裝
PC上ctrl+shift+p(MacCmd+shift+p)打開面板輸入JsFormat安裝.
使用
打開preferences -> Package Settings -> JsFormat -> Setting - Users,輸入以下代碼：
{
"e4x": true,
// jsformat options
"format_on_save": true,
}
即可保存時(shí)自動格式化，并支持 jsx 類型文件.
5. 編譯 jsx
使用babel-sublime
帶有編譯 jsx 的命令 babel build。使用 babel 編譯 jsx 也由 React 項(xiàng)目官方引用。該命令依賴于 node 包 babel。babel 同時(shí)也支持 ES6的新語法經(jīng)過編譯在瀏覽器中運(yùn)用。
npm install -g babel
在 sublime 中使用ctrl+shift+p打開面板輸入babel transform自動編譯成 react.js 文件
使用自動化構(gòu)建工具(gulp|grunt 等)
以 gulp 為例(依賴 gulp,需提前安裝)：
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'));
});
在命令行中輸入 gulp babel 運(yùn)行
配合 BrowserSync 使用可以實(shí)時(shí)監(jiān)測改動并同步刷新多平臺上得瀏覽器。
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', //源目錄路徑
dist = 'dist'; //輸出路徑
gulp.task('babel', function() {
var onError = function(err) {
notify.onError({
title: "Gulp",
subtitle: "Failure!",
message: "Error: ",
sound: "Beep"
})(err);
};
return gulp.src(src + '/**/*.jsx')
.pipe(cached('react')) //把所有東西放入緩存中，每次只編譯修改過的文件
.pipe(plumber({ //發(fā)生錯(cuò)誤時(shí)不會中斷 gulp 的流程，同時(shí)觸發(fā) notify 消息提示
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);
});
})
在命令行中輸入 gulp server 運(yùn)行。
或者使用 sublime 自帶的 build 工具，選擇Tools -> Build System -> New Build System
輸入:
{
"shell_cmd": "gulp server --cwd $file_path"
}
并保存為 gulpBabel.sublime-build(名稱隨意，保持.sublime-build后綴名)，存放到Packages - Users文件夾里面，在 sublime 中使用ctrl+shift+b(或Tools -> Build With ..)打開 build 面板，選擇剛剛輸入的名稱，在這里是gulpBabel運(yùn)行。
總結(jié)
以上是生活随笔為你收集整理的sublime67linter-php,Sublime Text 3 搭建 React.js 开发环境的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 氩气的用途有哪些（氩气的用途）
- 下一篇： 直角三角函数公式表（直角三角函数公式）