本節(jié)索引
-
sublime Text3 插件的安裝
-
代碼編輯非常有用的5個(gè)插件
-
配置React 開(kāi)發(fā)環(huán)境所需要的插件支持
首先 請(qǐng)查看你的sublime Text3 上是否安裝了Package Control ,
安裝 Package Ctrol： 使用 ctrl + ～ 打開(kāi)控制臺(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./' + pf.replace(' ','%20')).read())
1. 代碼格式化的插件 (格式化HTML+CSS+JS+JSON代碼的插件)
HTML-CSS-JS Prettify 是一個(gè)可以格式化HTML,、CSS、Javascript和JSON的sublime插件,，有著很棒的格式化效果,。不過(guò)建議大家學(xué)習(xí)常用的代碼編輯格式盡量寫(xiě)到符合標(biāo)準(zhǔn)的代碼
-
安裝過(guò)程如下：
1. 在Sublime Text中，按下Ctrl+Shift+P調(diào)出命令面板;
2. 輸入install 調(diào)出 Install Package 選項(xiàng)并回車(chē);
3. 輸入pretty,，并在列表中選擇HTML-CSS-JS Prettify后回車(chē)即可安裝
-
可能遇到的問(wèn)題以及解決方案（全部安裝正確但格式化不能使用）
1,、Node.js路徑配置不對(duì)（首先確保安裝了Node.js），修改一下HTML-CSS-JS Prettify的用戶(hù)配置即可（Preferences -> Package-settings -> HTML/CSS/JS Prettify -> Set Prettify Preferences）：
2,、如果路徑?jīng)]有問(wèn)題,，查看是不是sublime打開(kāi)的文件路徑中有中文，由于HTML-CSS-JS Prettify不支持utf-8，打開(kāi)文件路徑如果有中文,，也會(huì)報(bào)Node.js路徑錯(cuò)誤,。
解決辦法如下：
1、preferences->Browse Packages（打開(kāi)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")
2.Js和Css語(yǔ)法檢查插件 sublimelinter以及配套的插件
啟動(dòng)Package Control
安裝sublimelinter 插件
安裝sublimelinter-jshint（備選安裝 sublimelinter-jslint）
安裝sublimelinter-csslint
安裝node運(yùn)行環(huán)境
注意不要使用jsxhint,這是針對(duì)于需要支持react語(yǔ)法的插件,想要安裝react語(yǔ)法插件請(qǐng)參照后面的sublime 搭建react開(kāi)發(fā)環(huán)境
-
全局安裝 jshint /csslint
安裝命令:sudo npm install -g jshint 注意插件名稱(chēng)都為小寫(xiě).
:sudo npm install -g csslint
-
將下列代碼復(fù)制到
Preference->package Settings->SublimeLinter->Setttings-User 中
注意下面代碼中的(第五行和第六行 sublimelinter_executable_map)JS和Css的路徑問(wèn)題：
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, //不允許使用空語(yǔ)句塊{}
"eqeqeq": true, //!==和===檢查
"undef": true,
"curly": true, //值為true時(shí),，不能省略循環(huán)和條件語(yǔ)句后的大括號(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 支持的語(yǔ)言截圖(后續(xù)的語(yǔ)言支持需要用戶(hù)自行配置)
 sublimelinte 支持的語(yǔ)言截圖
3. JSFormat 插件(只是針對(duì)于js文件有效,想要格式化HTML等文件,請(qǐng)參照第一點(diǎn))
-
按下快捷鍵 Ctrl+Alt+p 打開(kāi)Package Control命令面板
-
輸入 jsformat 回車(chē)安裝即可.
-
在你寫(xiě)javascript代碼時(shí),選中需要格式化的代碼,，按下 Ctrl+Alt+f 快捷鍵后,js代碼自動(dòng)格式化對(duì)齊,趕快試一試吧!
-
如果上面的快捷鍵使用無(wú)效可以使用命令格式化代碼,你可以選中要格式化的代碼 ,然后按下 Ctrl+Alt+P (mac 系統(tǒng) command + shift +p) 輸入命令: Format:javascript 回車(chē)即可格式化.
4. Emmet 是一個(gè)前端開(kāi)發(fā)的利器 用于自動(dòng)完成HTML的代碼書(shū)寫(xiě)
-
Emmet 的基本用法是：輸入簡(jiǎn)寫(xiě)形式,，然后按 Tab 鍵。
-
關(guān)于 Emmet 的更多用法,，請(qǐng)看官方文檔,，這份速查表可以幫你快速記憶簡(jiǎn)寫(xiě)形式。
-
Emmet安裝：在Package Control中 install Package -> Emmet 安裝Emmet.
-
使用：輸入特定含義的字符 按 Tag 自動(dòng)完成
5. Theme – Soda + sublime Text3 主題修改
- 安裝：
Theme – Soda -
配置：
在 Preferences ->Setting - User 中的[]中括號(hào)中添加,(注意配置文是數(shù)組的形式)
"theme": "Soda Light.sublime-theme" 或
"theme": "Soda Dark.sublime-theme"
6.Sublime Text 3安裝React 開(kāi)發(fā)環(huán)境插件
-
babel-sublime 支持ES6,，React.js, jsx代碼高亮,，對(duì) JavaScript, jQuery 也有很好的擴(kuò)展
-
安裝：PC上ctrl+shift+p（MacCmd+shift+p）打開(kāi)面板輸入babel安裝
-
配置：打開(kāi).js, .jsx 后綴的文件;
打開(kāi)菜單view，
Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel),，
選擇babel為默認(rèn) javascript 打開(kāi)syntax
-
sublimeLinter-jsxhint JSX 代碼審查，實(shí)時(shí)提示語(yǔ)法錯(cuò)誤, 幫助快速定位錯(cuò)誤
-
安裝PC上 ctrl+shift+p（MacCmd+shift+p）打開(kāi)面板輸入sublimeLinter-jsx安裝(請(qǐng)先確保sublimeLinter安裝成功)
-
必須有node.js環(huán)境支持 安裝node.js
-
安裝node中安裝jsxhint
npm install -g jsxhint
-
修改Emmet兼容jsx 文件(使用Tag 快速完成react 代碼書(shū)寫(xiě))
 JSX語(yǔ)法書(shū)寫(xiě)
-
安裝PC上 ctrl+shift+p（MacCmd+shift+p）打開(kāi)面板輸入emmet安裝
-
使用方法 打開(kāi)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
}]
}
- 使用super+e觸發(fā) emmet；
- 正則判斷用 a,，div,，span，p,，button標(biāo)簽?zāi)J(rèn)tab 觸發(fā),；
- 默認(rèn) class 修改為 className 注 supre+e 在 PC 上指的是win+e（pc 建議修改為emmet 默認(rèn)按鍵 ctrl+e）,在 mac 上指的是cmd+e
- 詳細(xì)請(qǐng)參考規(guī)則來(lái)源StackOverflow，正則小有修改
|
