2018年10月7日更新：(更新了一些插件) 如果您覺得VSCode開銷過大，需要一個更輕量的編輯器，還是可以使用Sublime的，Sublime的優勢是編輯過程和啟動非常迅速，缺點是需要一些時間配置，所以如果您的工作是固定一個語言，例如Javascript或者Python之類的，可以使用SublimeText，但是如果跨多語言，配置起來非常麻煩是，建議使用VSCode
2017年5月19日更新：經過近7個月的使用，如果您使用的語言是Javascript、JSX、Golang、Python，強烈推薦用VSCode代替SublimeText
首先下載SublimeText3,并且安裝插件包管理器
https://packagecontrol.io/installation
讓SublimeText盡可能接近IDE
代碼提示,代碼檢測,語法高亮,這類插件屬于必安插件,如果不安裝這些插件,會影響實際開發的效率
安裝 Babel (接近IDE:10%)
javascript(ES6)及jsx的代碼高亮,安裝之后記得點擊窗口右下角把默認文件設置成javascript-babel
javascript(ES6)及jsx的代碼高亮,安裝之后記得把默認文件設置成javascript-babel
安裝 Vue Syntax Highlight (如果你是選擇Vue框架) (接近IDE:15%)
安裝SublimeCodeIntel (接近IDE:30%)
這個插件可以去github手動下載，不然下載太慢，手動下載之后放在默認的插件文件夾里就可以了。
這個插件屬于代碼提示類的插件,有了它才能夠提示項目內的提示,方法引用,變量提示,還有引用跳轉.
安裝 SublimeLinter 和 SublimeLinter-eslint (接近IDE:60%)
SublimeLinter-eslint這個插件依賴SublimeLinter插件
Eslint屬于靜態語法檢測,如果你希望javascript提示語法有錯誤,就需要安裝它.
如何配置請參考,我的另外一篇文章:如何配置Eslint檢測React代碼
SublimeLinter-User配置
"linters":
{
// The name of the linter you installed
"eslint":{
"disable": false,
"excludes": ["node_modules", "*/node_modules"],
"selector": "text.html.vue, source.js - meta.attribute-with-value",
},
},
安裝 HTML/CSS/JS Prettify (接近IDE:60%)
用于 js/jsx/vue/html/css 的格式化, 前段開發必備
AutoFileName (接近IDE:70%)
自動補全文件路徑,并且會提示圖片文件的尺寸
安裝All Autocomplete (接近IDE:80%)
Sublime的自動補全只能讀取當前文件中的關鍵字, 有了這個這個插件就可以補全其他已打開的文件的關鍵字.
具體使用方法:
- 例如我們需要用到StatusBar組件的setHidden方法.
-
cm+t, 打開StatusBar.js文件
-
AllAutocomplete會讀取已打開文件的關鍵字,此時在項目中擁有了StatusBar組件的代碼提示.
糖果類的插件(提高體驗和樂趣)
誠然,無論怎么配置SublimeText,它還是不能完成IDE100%的功能.不過我們看重編輯器的輕便和其他小功能的擴展,不然人人都用笨重的IDE了,誰還會用編輯器?
我推薦幾個提高體驗的糖果類插件.
這類插件屬于選安插件, 安裝之后只是提高Sublime的體驗
安裝FileBrowser
非常小巧的插件,有了它就不需要Sublime自帶的側邊欄了,可以全熱鍵控制項目文件.
它擁有新建文件夾,新建文件,移動文件,刪除文件,重命名文件,打開路徑,保存項目路徑,快速切換項目,文件預覽(使用mac系統的Quicklook),隱藏顯示隱藏文件等等一系列功能,并且還是類似Vim的全熱鍵控制.
使用技巧:
- 添加熱鍵打開文件面板;
{
"keys": ["super+d"],
"command": "dired",
"args": {
"immediate": true,
"single_pane": true,
"other_group": "left",
"project": true
}
},
- 在文件面板輸入"?",查看使用說明
BracketHighlighter
一個高亮識別成對符號位置的插件,效果如圖:
AdvancedNewFile
如果還是習慣用自帶的側邊欄,那請配上這個插件,熱鍵新建文件
Terminal
快捷鍵打開當前目錄的終端,mac下的快捷鍵為：command+shift+T
安裝Emmet(個人不推薦)
雖然鼎鼎大名,不過這個插件有點大,安裝它就會自動安裝V8引擎.
快速輸入jsx中的xml代碼,但是在js文件中它的tab熱鍵是沖突的,需要改一下熱鍵.
不過的確用它寫標簽會提高許多效率.
{
"keys": [
"E", "E"
],
"command": "rename_tag",
"context": [
{
"key": "emmet_action_enabled.rename_tag"
}
]
},
{
"keys": [
"super+e"
],
"args": {
"action": "expand_abbreviation"
},
"command": "run_emmet_action",
"context": [{
"key": "emmet_action_enabled.expand_abbreviation"
}]
},
(具體熱鍵可以自行修改)其中連按兩個大寫E,就是修改標簽名,cmd+e就是自動補全標簽,補全格式如下:
View>Textt //cmd+e,即可補全成如下
<View>
<Text></Text>
</View>
個人環境設置
添加了自動換行;在同個窗口打開文件,超過底部可以繼續滑動,隱藏指定后綴文件,取消更新檢查等等
{
"file_exclude_patterns":
[
"*.meta",
"._.{*}"
],
"folders":
[
{
"path": "."
}
],
"font_size": 11,
"ignored_packages":
[
"Vintage"
],
"margin": 4,
"open_files_in_new_window": true,
"remember_open_files": true,
"scroll_past_end": true,
"settings":
{
"SublimeLinter.linters.flake8.disable": true
},
"tab_size": 2,
"translate_tabs_to_spaces": true,
"update_check": false,
"word_wrap": true
}
個人配置熱鍵文件
[
{ "keys": ["super+l"], "command": "sublime_linter_lint" },
{
"keys": ["super+e"],
"command": "htmlprettify"
},
{
"keys": ["super+m"],
"command": "advanced_new_file_new"
},
{
"keys": ["super+."],
"command": "edit_settings",
"args":
{
"base_file": "${packages}/Default/Default (OSX).sublime-keymap",
}
},
{
"keys": ["super+shift+.", "l"],
"command": "edit_settings",
"args":
{
"base_file": "${packages}/User/SublimeLinter.sublime-settings",
}
},
{
"keys": ["super+shift+.", "c"],
"command": "edit_settings",
"args":
{
"base_file": "${packages}/User/SublimeCodeIntel.sublime-settings",
}
},
{
"keys": ["super+alt+b"],
"command": "build"
}, { "keys": ["super+b"], "command": "toggle_side_bar" },]
Tag插件
不需要安裝,現在默認自帶,Ctrl+Shift+W使用
SbulimeTmpl 新建文件模版插件
插件使用方法:http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/
默認熱鍵的新建文件(ctrl+shift+p輸入tmpl可以查看):
ctrl+alt+h html
ctrl+alt+j javascript
ctrl+alt+c css
