Sublime插件React-Native篇

作為一個(gè)秒開的編輯器，用了就不想換呀，插件庫也很強(qiáng)大，稍作配置就可以用了

本體

Sublime免費(fèi)的，只是偶爾彈窗一下,所以別折騰什么破解版了
官網(wǎng)地址,根據(jù)你的系統(tǒng)選擇下載

Package Control

安裝插件之前要先裝下Package Control

自動(dòng)安裝

使用Ctrl+`快捷鍵或者通過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)安裝

  1. 點(diǎn)擊Preferences > Browse Packages菜單
  2. 進(jìn)入打開的目錄的上層目錄，然后再進(jìn)入Installed Packages/目錄
  3. 下載Package Control.sublime-package并復(fù)制到Installed Packages/目錄
  4. 重啟Sublime Text

插件安裝

Babel

支持ES6， React.js, jsx代碼高亮，對 JavaScript, jQuery 也有很好的擴(kuò)展

安裝

PC：Ctrl+shift+p
Mac：Cmd+shift+p
輸入：pci，選擇Package Control:install package
加載出插件列表后，輸入babel進(jìn)行安裝

配置

  1. 打開.js, .jsx 后綴的文件;
  2. 找到菜單欄的view -> Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel)，選擇babel為默認(rèn) javascript 打開syntax

React ES6 Snippets

為react語法提示，sublime-react-es6支持es6語法, 另一個(gè)類似的插件ReactJS貌似是ES5的，敲出來的代碼塊方法都有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ù)組和對象鍵值對最后一個(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,
    // 禁止對象字面量中出現(xiàn)重復(fù)的 key
    "no-dupe-keys": 2,
    // 禁止重復(fù)的 case 標(biāo)簽
    "no-duplicate-case": 2,
    // 禁止空語句塊
    "no-empty": 2,
    // 禁止在正則表達(dá)式中使用空字符集 (/^abc[]/)
    "no-empty-character-class": 2,
    // 禁止對 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,
    // 禁止對 function 聲明重新賦值
    "no-func-assign": 2,
    //  禁止在嵌套的塊中出現(xiàn) function 或 var 聲明
    "no-inner-declarations": [2, "functions"],
    // 禁止 RegExp 構(gòu)造函數(shù)中無效的正則表達(dá)式字符串
    "no-invalid-regexp": 2,
    // 禁止在字符串和注釋之外不規(guī)則的空白
    "no-irregular-whitespace": 2,
    // 禁止在 in 表達(dá)式中出現(xiàn)否定的左操作數(shù)
    "no-negated-in-lhs": 2,
    //   禁止把全局對象 (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語句之后出現(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ì)算性能鍵對象的文字
    "no-useless-computed-key":0,
    // 要求使用 let 或 const 而不是 var
    "no-var": 0,
    // 要求或禁止對象字面量中方法和屬性使用簡寫語法
    "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語法提示&代碼格式化

Sublime Text 3 搭建 React.js 開發(fā)環(huán)境

詳解 ESLint 規(guī)則，規(guī)范你的代碼

Sublime text3 jsx支持（eslint）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容