作為一個(gè)秒開的編輯器匣屡，用了就不想換呀化焕，插件庫(kù)也很強(qiáng)大珊擂，稍作配置就可以用了
本體
Sublime免費(fèi)的射富，只是偶爾彈窗一下,所以別折騰什么破解版了
官網(wǎng)地址,根據(jù)你的系統(tǒng)選擇下載
Package Control
安裝插件之前要先裝下Package Control
自動(dòng)安裝
使用Ctrl+`快捷鍵或者通過(guò)View->Show Console菜單打開終端矢门，粘貼如下代碼：
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
如果終端安裝報(bào)錯(cuò)的話盆色，就改用手動(dòng)安裝
手動(dòng)安裝
- 點(diǎn)擊
Preferences > Browse Packages菜單 - 進(jìn)入打開的目錄的上層目錄灰蛙，然后再進(jìn)入
Installed Packages/目錄 - 下載Package Control.sublime-package并復(fù)制到
Installed Packages/目錄 - 重啟Sublime Text
插件安裝
Babel
支持ES6， React.js, jsx代碼高亮隔躲，對(duì) JavaScript, jQuery 也有很好的擴(kuò)展
安裝
PC：Ctrl+shift+p
Mac：Cmd+shift+p
輸入：pci摩梧，選擇Package Control:install package
加載出插件列表后，輸入babel進(jìn)行安裝
配置
- 打開.js, .jsx 后綴的文件;
- 找到菜單欄的view -> Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel)宣旱，選擇babel為默認(rèn) javascript 打開syntax
React ES6 Snippets
為react語(yǔ)法提示仅父，sublime-react-es6支持es6語(yǔ)法, 另一個(gè)類似的插件ReactJS貌似是ES5的，敲出來(lái)的代碼塊方法都有function
安裝
PC：Ctrl+shift+p
Mac：Cmd+shift+p
輸入：pci浑吟，選擇Package Control:install package
加載出插件列表后笙纤，輸入React ES6 Snippets進(jìn)行安裝
支持的代碼片段
cdm→ componentDidMount: fn() { ... }
cdup→ componentDidUpdate: fn(pp, ps) { ... }
cs→ var cx = React.addons.classSet;
cwm→ componentWillMount: fn() { ... }
cwr→ componentWillReceiveProps: fn(np) { ... }
cwu→ componentWillUpdate: fn(np, ns) { ... }
cwun→ componentWillUnmount: fn() { ... }
cx→ cx({ ... })
fdn→ React.findDOMNode(...)
fup→ forceUpdate(...)
gdp→ getDefaultProps: fn() { return {...} }
gis→ getInitialState: fn() { return {...} }
ism→ isMounted()
props→ this.props.
pt→ propTypes { ... }
rcc→ component skeleton
refs→ this.refs.
ren→ render: fn() { return ... }
scu→ shouldComponentUpdate: fn(np, ns) { ... }
sst→ this.setState({ ... })
state→ this.state.
jsfmt
格式化JS代碼，jsformat也支持jsx格式化组力，但是在import的地方老是換行挺煩
安裝
PC：Ctrl+shift+p
Mac：Cmd+shift+p
輸入：pci省容，選擇Package Control:install package
加載出插件列表后，輸入jsfmt進(jìn)行安裝
配置
- 添加jsx的相關(guān)配置
cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/jsfmt/
npm i esformatter@latest esformatter-jsx@latest
- Preferences -> Package Settings -> Sublime JSFMT燎字，添加代碼：
{
// autoformat on save
"autoformat": true,
// array of extensions for autoformat
"extensions": [
"js",
"jsx",
"sublime-settings"
],
// options for jsfmt
"options": {
"preset": "jquery",
"indent": {
"value": " "
},
// plugins included
"plugins": [
"esformatter-jsx",
]
},
"jsx": {
"formatJSX": true,
// change these to your preferred values
// refer to https://github.com/royriojas/esformatter-jsx#best-configuration for more options
"attrsOnSameLineAsTag": false,
"maxAttrsOnTag": 1,
"firstAttributeOnSameLine": false,
"alignWithFirstAttribute": true
},
// other esformatter options
"options-JSON": {
"plugins": [
"esformatter-quotes"
],
"quotes": {
"type": "double"
}
},
"alert-errors": true,
// path to nodejs
"node-path": "node",
// if true it will format the whole file even if you have a selection active
"ignore-selection": false
}
快捷鍵
打開 Preferences -> Key Bindings - User腥椒，添加代碼：
{"keys":["ctrl+q"],"command":"format_javascript"}
SublimeLinter-ESLint
ESLint 由 JavaScript 紅寶書 作者 Nicholas C. Zakas 編寫， 2013 年發(fā)布第一個(gè)版本候衍。 NCZ 的初衷不是重復(fù)造一個(gè)輪子寞酿，而是在實(shí)際需求得不到 JSHint 團(tuán)隊(duì)響應(yīng) 的情況下做出的選擇：以可擴(kuò)展、每條規(guī)則獨(dú)立脱柱、不內(nèi)置編碼風(fēng)格為理念編寫一個(gè) lint 工具
安裝eslint
終端輸入：
npm install -g eslint@latest
npm install -g babel-eslint@latest
npm install -g eslint-plugin-react
驗(yàn)證是否安裝成功：
eslint -v
ESLint配置rules
在home目錄(windows下即為：c:\usrs\用戶名 )下新建 .eslintrc,添加代碼：
{
// I want to use babel-eslint for parsing!
"parser": "babel-eslint",
"env": {
// I write for browser
"browser": true,
// in CommonJS
"node": true
},
// To give you an idea how to override rule options:
"rules": {
////////////////
// 可能的錯(cuò)誤 //
////////////////
// 禁止條件表達(dá)式中出現(xiàn)賦值操作符
"no-cond-assign": 2,
// 禁用 console
"no-console": 0,
// 禁止在條件中使用常量表達(dá)式
// if (false) {
// doSomethingUnfinished();
// } //cuowu
"no-constant-condition": 2,
// 禁止在正則表達(dá)式中使用控制字符 ：new RegExp("\x1f")
"no-control-regex": 2,
// 數(shù)組和對(duì)象鍵值對(duì)最后一個(gè)逗號(hào)， never參數(shù)：不能帶末尾的逗號(hào), always參數(shù)：必須帶末尾的逗號(hào)拉馋，
// always-multiline：多行模式必須帶逗號(hào)榨为，單行模式不能帶逗號(hào)
//"comma-dangle": [1, "never"],
// 禁用 debugger
"no-debugger": 2,
// 禁止 function 定義中出現(xiàn)重名參數(shù)
"no-dupe-args": 2,
// 禁止對(duì)象字面量中出現(xiàn)重復(fù)的 key
"no-dupe-keys": 2,
// 禁止重復(fù)的 case 標(biāo)簽
"no-duplicate-case": 2,
// 禁止空語(yǔ)句塊
"no-empty": 2,
// 禁止在正則表達(dá)式中使用空字符集 (/^abc[]/)
"no-empty-character-class": 2,
// 禁止對(duì) catch 子句的參數(shù)重新賦值
"no-ex-assign": 2,
// 禁止不必要的布爾轉(zhuǎn)換
"no-extra-boolean-cast": 2,
// 禁止不必要的括號(hào) //(a * b) + c;//報(bào)錯(cuò)
"no-extra-parens": 0,
// 禁止不必要的分號(hào)
"no-extra-semi": 2,
// 禁止對(duì) function 聲明重新賦值
"no-func-assign": 2,
// 禁止在嵌套的塊中出現(xiàn) function 或 var 聲明
"no-inner-declarations": [2, "functions"],
// 禁止 RegExp 構(gòu)造函數(shù)中無(wú)效的正則表達(dá)式字符串
"no-invalid-regexp": 2,
// 禁止在字符串和注釋之外不規(guī)則的空白
"no-irregular-whitespace": 2,
// 禁止在 in 表達(dá)式中出現(xiàn)否定的左操作數(shù)
"no-negated-in-lhs": 2,
// 禁止把全局對(duì)象 (Math 和 JSON) 作為函數(shù)調(diào)用 錯(cuò)誤：var math = Math();
"no-obj-calls": 2,
// 禁止直接使用 Object.prototypes 的內(nèi)置屬性
"no-prototype-builtins":0,
// 禁止正則表達(dá)式字面量中出現(xiàn)多個(gè)空格
"no-regex-spaces": 2,
// 禁用稀疏數(shù)組
"no-sparse-arrays": 2,
// 禁止出現(xiàn)令人困惑的多行表達(dá)式
"no-unexpected-multiline": 2,
// 禁止在return、throw煌茴、continue 和 break語(yǔ)句之后出現(xiàn)不可達(dá)代碼
/*
function foo() {
return true;
console.log("done");
}//錯(cuò)誤
*/
"no-unreachable": 2,
// 要求使用 isNaN() 檢查 NaN
"use-isnan": 2,
// 強(qiáng)制使用有效的 JSDoc 注釋
"valid-jsdoc": 1,
// 強(qiáng)制 typeof 表達(dá)式與有效的字符串進(jìn)行比較
// typeof foo === "undefimed" 錯(cuò)誤
"valid-typeof": 2,
//////////////
// 風(fēng)格指南 //
//////////////
//"quotes": [2, "single"],
"eol-last": [0],
"no-mixed-requires": [0],
"no-underscore-dangle": [0],
//////////////
// ES6.相關(guān) //
//////////////
//"arrow-spacing":[2,{ "before": true, "after": true }],
// 強(qiáng)制在子類構(gòu)造函數(shù)中用super()調(diào)用父類構(gòu)造函數(shù)随闺，TypeScrip的編譯器也會(huì)提示
"constructor-super": 0,
// 強(qiáng)制 generator 函數(shù)中 * 號(hào)周圍使用一致的空格
"generator-star-spacing": [2, { "before": true, "after": true }],
// 禁止修改類聲明的變量
"no-class-assign":2,
// 不允許箭頭功能，在那里他們可以混淆的比較
"no-confusing-arrow":0,
// 禁止修改 const 聲明的變量
"no-const-assign":2,
// 禁止類成員中出現(xiàn)重復(fù)的名稱
"no-dupe-class-members":2,
// 不允許復(fù)制模塊的進(jìn)口
"no-duplicate-imports":0,
// 禁止 Symbol 的構(gòu)造函數(shù)
"no-new-symbol":2,
// 允許指定模塊加載時(shí)的進(jìn)口
"no-restricted-imports":0,
// 禁止在構(gòu)造函數(shù)中蔓腐，在調(diào)用 super() 之前使用 this 或 super
"no-this-before-super": 2,
// 禁止不必要的計(jì)算性能鍵對(duì)象的文字
"no-useless-computed-key":0,
// 要求使用 let 或 const 而不是 var
"no-var": 0,
// 要求或禁止對(duì)象字面量中方法和屬性使用簡(jiǎn)寫語(yǔ)法
"object-shorthand": 0,
// 要求使用箭頭函數(shù)作為回調(diào)
"prefer-arrow-callback":0,
// 要求使用 const 聲明那些聲明后不再被修改的變量
"prefer-const": 0,
// 要求在合適的地方使用 Reflect 方法
"prefer-reflect":0,
// 要求使用擴(kuò)展運(yùn)算符而非 .apply()
"prefer-spread":0,
// 要求使用模板字面量而非字符串連接
"prefer-template":0,
// Suggest using the rest parameters instead of arguments
"prefer-rest-params":0,
// 要求generator 函數(shù)內(nèi)有 yield
"require-yield":0,
// enforce spacing between rest and spread operators and their expressions
"rest-spread-spacing":0,
// 強(qiáng)制模塊內(nèi)的 import 排序
"sort-imports":0,
// 要求或禁止模板字符串中的嵌入表達(dá)式周圍空格的使用
"template-curly-spacing":1,
// 強(qiáng)制在 yield* 表達(dá)式中 * 周圍使用空格
"yield-star-spacing":2
},
"plugins":[
"react"
]
}
Sublime配置
安裝插件
PC：Ctrl+shift+p
Mac：Cmd+shift+p
輸入：pci矩乐，選擇Package Control:install package
輸入SublimeLinter進(jìn)行安裝
輸入SublimeLinter-contrib-eslint進(jìn)行安裝
default path設(shè)置
Preferences -> Package Settings -> Sublime Linter.sublime-settings
，添加代碼：
"paths": {
"osx": [
"/usr/local/lib"
]
},
"python_paths": {
"osx": [
"/usr/local/lib"
]
},
參考文章
Sublime Text3關(guān)于react的插件——react語(yǔ)法提示&代碼格式化
Sublime Text 3 搭建 React.js 開發(fā)環(huán)境
