ASBFAT：Sublime Text 3

龍騎將楊影楓發表於2019-02-09

外掛配置

PackageController （包管理器 基礎中的基礎）

安裝方法:

  • 使用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)複製程式碼

babel-sublime，語法高亮

安裝方法:

  • 按ctrl + shift +p開啟包管理器介面，輸入install 然後選中install package回車，出現輸入框
  • 輸入babel，回車
  • 配置：View -> Synatx -> OpenAllWithCurrent… -> Babel -> JavaScript(babel)

Emmet

github地址：github.com/sergeche/em…

  • 通過ctrl + shift +p開啟包管理器安裝
  • 輸入 Emmet
  • 可以通過輸入 ! 後按快捷鍵 Ctrl + E (或者 Tab ,需要修改配置快速生成HTML.
  • 不好用的話可以這樣配置:
[{
    "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"
        }, {
            "translate_tabs_to_spaces": true
        }
    ]
} ,{
    "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": "regex_contains",
        "operand": "",
        "match_all": true
    }, {
        "key": "selection_empty",
        "operator": "equal",
        "operand": true,
        "match_all": true
    }]
}]複製程式碼

jsformat 主要是用來格式化顯示

安裝方法

  • 呼起 package controller ,輸入 jsformat
  • 下載後 Preference ->　Package Setting -> Jsformat -> Setting-User,開啟新頁面.
  • 輸入:
{
    "e4x": true,
    // jsformat options
    "format_on_save": false, // 注：此值如果改為true則每次儲存的時候自動格式化
}複製程式碼

ReactJS

包括:

  • ReactJS
  • React Tempates
  • React Coffee Snippets
  • React DevelopMent Snippets
  • React ES6 Snipptes
  • ReactJS Snippets
  • React and React Router Snipptes
  • reactjs+react es6 + react template 最精簡版,保證 rcc 可以直接建立類

相關文章