本節(jié)索引
sublime Text3 插件的安裝
代碼編輯非常有用的5個(gè)插件
配置React 開發(fā)環(huán)境所需要的插件支持
首先 請(qǐng)查看你的sublime Text3 上是否安裝了Package Control ,
安裝 Package Ctrol: 使用 ctrl + ~ 打開控制臺(tái),輸入以下代碼:
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
HTML-CSS-JS Prettify 是一個(gè)可以格式化HTML、CSS、Javascript和JSON的sublime插件,有著很棒的格式化效果。不過建議大家學(xué)習(xí)常用的代碼編輯格式盡量寫到符合標(biāo)準(zhǔn)的代碼
安裝過程如下:
1. 在Sublime Text中,按下Ctrl+Shift+P調(diào)出命令面板; 2. 輸入install 調(diào)出 Install Package 選項(xiàng)并回車; 3. 輸入pretty,并在列表中選擇HTML-CSS-JS Prettify后回車即可安裝
可能遇到的問題以及解決方案(全部安裝正確但格式化不能使用
)
1、Node.js路徑配置不對(duì)(首先確保安裝了Node.js),修改一下HTML-CSS-JS Prettify的用戶配置即可(Preferences -> Package-settings -> HTML/CSS/JS Prettify -> Set Prettify Preferences):
2、如果路徑?jīng)]有問題,查看是不是sublime打開的文件路徑中有中文,由于HTML-CSS-JS Prettify不支持utf-8,打開文件路徑如果有中文,也會(huì)報(bào)Node.js路徑錯(cuò)誤。
解決辦法如下: 1、preferences->Browse Packages(打開sublime 的安裝文件) 2、修改 HTML-CSS-JS Prettify 目錄下的 HTMLPrettify.py 文件 3、83行:node_path = PluginUtils.get_node_path() 改為:node_path = PluginUtils.get_node_path().encode("utf-8") 4、85行:file_path = self.view.file_name() 改為:file_path = self.view.file_name().encode("utf-8")
sublimelinter以及配套的插件
啟動(dòng)Package Control安裝sublimelinter 插件安裝sublimelinter-jshint(備選安裝 sublimelinter-jslint)安裝sublimelinter-csslint安裝node運(yùn)行環(huán)境
注意不要使用jsxhint,這是針對(duì)于需要支持react語法的插件,想要安裝react語法插件請(qǐng)參照后面的sublime 搭建react開發(fā)環(huán)境
全局安裝 jshint /csslint
安裝命令:sudo npm install -g jshint 注意插件名稱都為小寫. :sudo npm install -g csslint
將下列代碼復(fù)制到
Preference->package Settings->SublimeLinter->Setttings-User 中
注意下面代碼中的(第五行和第六行 sublimelinter_executable_map)JS和Css的路徑問題: mac中可以再終端用 which node命令 查看node的安裝路徑 windows 中找到實(shí)際的node安裝位置復(fù)制路徑即可。 { "sublimelinter": "save-only", "sublimelinter_popup_errors_on_save": true, "sublimelinter_executable_map": { "javascript": "/usr/local/bin/node", "css": "/usr/local/bin/node" }, "jshint_options": { "strict": false, "quotmark": "single", //只能使用單引號(hào) "noarg": true, "noempty": true, //不允許使用空語句塊{} "eqeqeq": true, //!==和===檢查 "undef": true, "curly": true, //值為true時(shí),不能省略循環(huán)和條件語句后的大括號(hào) "forin": true, //for in hasOwnPropery檢查 "devel": true, "jquery": true, "browser": true, "wsh": true, "evil": true, "unused": "vars", //形參和變量未使用檢查 "latedef": true, //先定義變量,后使用 "globals": { "grunt": true, "module": true, "window": true, "jQuery": true, "$": true, "global": true, "document": true, "console": true, "setTimeout": true, "setInterval": true } }, "csslint_options": { "adjoining-classes": false, "box-sizing": false, "box-model": false, "compatible-vendor-prefixes": false, "floats": false, "font-sizes": false, "gradients": false, "important": false, "known-properties": false, "outline-none": false, "qualified-headings": false, "regex-selectors": false, "shorthand": false, "text-indent": false, "unique-headings": false, "universal-selector": false, "unqualified-attributes": false } }
sublimelinte 支持的語言截圖(后續(xù)的語言支持需要用戶自行配置)
按下快捷鍵 Ctrl+Alt+p 打開Package Control命令面板
輸入 jsformat 回車安裝即可.
在你寫javascript代碼時(shí),選中需要格式化的代碼,按下 Ctrl+Alt+f 快捷鍵后,js代碼自動(dòng)格式化對(duì)齊,趕快試一試吧!
如果上面的快捷鍵使用無效可以使用命令格式化代碼,你可以選中要格式化的代碼 ,然后按下 Ctrl+Alt+P (mac 系統(tǒng) command + shift +p) 輸入命令: Format:javascript 回車即可格式化.
Emmet 的基本用法是:輸入簡寫形式,然后按 Tab 鍵。
關(guān)于 Emmet 的更多用法,請(qǐng)看官方文檔,這份速查表可以幫你快速記憶簡寫形式。
Emmet安裝:在Package Control中 install Package -> Emmet 安裝Emmet.
使用:輸入特定含義的字符 按 Tag 自動(dòng)完成
配置:
在 Preferences ->Setting - User 中的[]中括號(hào)中添加,(注意配置文是數(shù)組的形式) "theme": "Soda Light.sublime-theme" 或 "theme": "Soda Dark.sublime-theme"
babel-sublime 支持ES6,React.js, jsx代碼高亮,對(duì) JavaScript, jQuery 也有很好的擴(kuò)展
安裝:PC上ctrl+shift+p(MacCmd+shift+p)打開面板輸入babel安裝
配置:打開.js, .jsx 后綴的文件;
打開菜單view, Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel), 選擇babel為默認(rèn) javascript 打開syntax
sublimeLinter-jsxhint JSX 代碼審查,實(shí)時(shí)提示語法錯(cuò)誤, 幫助快速定位錯(cuò)誤
安裝PC上 ctrl+shift+p(MacCmd+shift+p)打開面板輸入sublimeLinter-jsx安裝(請(qǐng)先確保sublimeLinter安裝成功
)
必須有node.js環(huán)境支持 安裝node.js
安裝node中安裝jsxhint
npm install -g jsxhint
修改Emmet兼容jsx 文件(使用Tag 快速完成react 代碼書寫)
安裝PC上 ctrl+shift+p(MacCmd+shift+p)打開面板輸入emmet安裝
使用方法 打開preferences -> Key bindings - Users,把下面代碼復(fù)制到[ ]中括號(hào)內(nèi)部(注意配置文件為數(shù)組形式
)。
{ "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":"(\b(a\b|div|span|p\b|button)(\.\w*|>\w*)?({FNXX==XXFN}*?}$)?)", "match_all": true }, { "key":"selection_empty", "operator":"equal", "operand": true, "match_all": true }] }
聯(lián)系客服