##Sublime 3安裝
###下載安裝
[官方下載地址](http://www.sublimetext.com/3)
###破解
>https://fatesinger.com/100237
加入到hosts文件
127.0.0.1 www.sublimetext.com
127.0.0.1 license.sublimehq.com
Windows : c:/windows/system32/drivers/etc/hosts
Linux : /etc/hosts
Mac : /Private/etc
----- BEGIN LICENSE -----
sgbteam
Single User License
EA7E-1153259
8891CBB9 F1513E4F 1A3405C1 A865D53F
115F202E 7B91AB2D 0D2A40ED 352B269B
76E84F0B CD69BFC7 59F2DFEF E267328F
215652A3 E88F9D8F 4C38E3BA 5B2DAAE4
969624E7 DC9CD4D5 717FB40C 1B9738CF
20B3C4F1 E917B5B3 87C38D9C ACCE7DD8
5F7EF854 86B9743C FADC04AA FB0DA5C0
F913BE58 42FEA319 F954EFDD AE881E0B
------ END LICENSE ------
###主題
大量[第三方主題](https://sublime.wbond.net/browse/labels/theme)
- 安裝方法一：使用Package Control:Install Package安裝
command/ctrl+shift+p打開命令板，輸入install，選擇Install Package並按回車鍵，再輸入主題名字並按回車鍵，即可安裝該主題
- 安裝方法二：
主題文件下載后放到Packages目錄下，在用戶配置文件中
1. tomorrow-theme [下載地址](https://github.com/theymaybecoders/
2. -tomorrow-theme.git)
2. material-theme [下載地址](https://github.com/equinusocio/material-theme)
3. Nuxus-theme [下載地址](https://packagecontrol.io/packages/Theme%20-%20Nexus) 推薦
4. Boxy-theme
###配置
Preferences -> Settings -> User
{
"auto_complete_commit_on_tab": true,
"bold_folder_labels": true,
"default_encoding": "UTF-8",
"draw_minimap_border": false,
"ensure_newline_at_eof_on_save": true,
"fade_fold_buttons": false,
"file_exclude_patterns":
[
".DS_Store",
"*.pid",
"*.pyc"
],
"folder_exclude_patterns":
[
".git",
"__pycache__",
".idea"
],
"font_size": 14,
"ignored_packages":
[
"Vintage"
],
"line_numbers": true,
"line_padding_bottom": 3,
"line_padding_top": 3,
"match_selection": true,
"save_on_focus_lost": true,
"spell_check": false,
"tab_size": 4,
"theme": "Adaptive.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": false,
"update_check": false
}
###安裝插件
>[15個插件推薦](https://www.oschina.net/translate/15-awesome-sublime-text-plugins-for-web-development?cmp)
>[插件庫](https://packagecontrol.io)
#插件安裝
Package Control 快捷鍵 Ctrl + Shift + P 輸入 Install 選擇 Install Package
#中文支持
ChineseLocalizations 漢化，Help -> Language
ConvertToUTF8 將文件編碼從GBK轉換成UTF8，File -> Set File Encoding to / Reload with Encoding
codecs33 ConvertToUTF8在sublime3中無法使用時安裝
#主題
Material Theme Material主題
A File Icon Material主題需要安裝
ColorSublime 主題預覽安裝
MarkdownExtended markdown顯示主題
#界面
SideBarEnhancement 側邊欄增強工具，文件定義引用跳轉
BracketHighlighter 括號、引號匹配高亮顯示
#格式化
Alignment 進行智能對齊，選中代碼，Ctrl+Alt+A
AutoPep8 格式化Python代碼
CodeFormatter 自動格式化代碼，支持多種編程語言，需要指定編程語言路徑（html格式化不好用）
HTML-CSS-JS Prettify 對於html，css，js這個好用
HTMLBeautify 格式化HTML代碼
CSS Format 格式化CSS代碼
JsFormat 格式化JS代碼
#編程
Emmet 前端開發神器
Jedi Python智能代碼補全
DocBlockr 自動補全注釋插件
SublimeLinter 語法檢查工具
SublimeCodeIntel 代碼智能提示
HTML5 HTML snippets(可選)
JQuery JQuery snippets
#Markdown
Markdown Editing 高亮顯示Markdown語法
OmniMarkupPreviewer 預覽markdown 編輯的效果，同樣支持渲染代碼高亮的樣式
#輔助
FileDiffs 對比文件區別
SublimeTmpl 提供常用文件的模板
SublimeREPL 多種腳本語言的執行環境
SFTP FTP工具
GIT GIT工具
####Package Control
- 方法一代碼安裝：
ctrl + ~ 打開控制台，粘貼python代碼進去並按回車鍵執行
#Sublime Text3
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())
#Sublime Text 2：
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')
- 方法二手動安裝：
1. 點擊Preferences > Browse Packages菜單
2. 進入打開的目錄的上級目錄，進入Installed Packages目錄
3. 下載[Package Control.sublime-package](https://sublime.wbond.net/Package%20Control.sublime-package) ，復制到Installed Packages目錄中
4. 重啟Sublime Text
####編程
- SublimeTmpl：提供常用文件的模板
- SublimeCodeIntel：代碼智能提示
"Python": {
"python":"D:/Python27/python.exe",
"pythonExtraPaths":
[
"D:/Python27",
"D:/Python27/DLLs",
"D:/Python27/Lib",
"D:/Python27/Lib/lib-tk",
"D:/Python27/Lib/site-packages"
]
}
"Python3": {
"python3": "/Users/admin/venv36/bin/python",
"codeintel_scan_extra_dir": [
"/Users/admin/venv36",
"/Users/admin/venv36/lib",
"/Users/admin/venv36/lib/site-packages",
"/Users/admin/venv36/lib/python3.6",
],
"codeintel_scan_files_in_project": true,
"codeintel_selected_catalogs": []
},
For Mac OS X:
Jump to definition = Control+Click
Jump to definition = Control+Command+Alt+Up
Go back = Control+Command+Alt+Left
Manual Code Intelligence = Control+Shift+space
For Linux:
Jump to definition = Super+Click
Jump to definition = Control+Super+Alt+Up
Go back = Control+Super+Alt+Left
Manual Code Intelligence = Control+Shift+space
For Windows:
Jump to definition = Alt+Click
Jump to definition = Control+Windows+Alt+Up
Go back = Control+Windows+Alt+Left
Manual Code Intelligence = Control+Shift+space
- Jedi：Python智能代碼補全
- FileDiffs：對比文件區別
- SublimeLinter：語法檢查工具
安裝SublimeLinter-php，配置
{
"paths": {
"linux": [],
"osx": ["/usr/bin/"],
"windows": []
},
"lint_mode": "save",
}
Show all error ctrl+cmd+A
Lint this view ctrl+cmd+L
Goto next error ctrl+cmd+E
Goto prev error ctrl+cmd+shift+E
####界面
- SideBarEnhancement：側邊欄增強工具
- BracketHighlighter：括號、引號高亮
配置括號高亮度顯示
{
"bracket_styles": {
"default": {
"icon": "dot",
// "color": "entity.name.class",
"color": "brackethighlighter.default",
"style": "highlight"
},
"unmatched": {
"icon": "question",
"color": "brackethighlighter.unmatched",
"style": "highlight"
},
"curly": {
"icon": "curly_bracket",
"color": "brackethighlighter.curly",
"style": "highlight"
},
"round": {
"icon": "round_bracket",
"color": "brackethighlighter.round",
"style": "highlight"
},
"square": {
"icon": "square_bracket",
"color": "brackethighlighter.square",
"style": "highlight"
},
"angle": {
"icon": "angle_bracket",
"color": "brackethighlighter.angle",
"style": "highlight"
},
"tag": {
"icon": "tag",
"color": "brackethighlighter.tag",
"style": "highlight"
},
"single_quote": {
"icon": "single_quote",
"color": "brackethighlighter.quote",
"style": "highlight"
},
"double_quote": {
"icon": "double_quote",
"color": "brackethighlighter.quote",
"style": "highlight"
},
"regex": {
"icon": "regex",
"color": "brackethighlighter.quote",
"style": "outline"
}
}
}
- ColorSublime：主題預覽安裝
安裝后輸入colorsublime install即可安裝color scheme
####格式化
- HTMLBeautify：格式化HTML
- AutoPEP8：格式化Python代碼
ctrl+shift+8 進行pep8格式化，ctrl+8 進行預覽
- Alignment：進行智能對齊。
ctrl+command+A 縮進、對齊字符
- CodeFormatter：自動格式化代碼，支持多種編程語言，需要指定編程語言路徑
ctrl+command+F 格式化代碼
HTML的格式化配置需要改為下面內容
"codeformatter_html_options":
{
"syntaxes": "html,blade,asp,xml", // Syntax names which must process HTML formatter
"format_on_save": true, // Format on save
"formatter_version": "regexp", // Which formatter to use. Current options are "bs4" and "regexp". If an error occurs while loading the bs4 formatter, the regexp formatter will automatically be used
"indent_size": 4, // indentation size
"indent_char": " ", // Indentation character
"indent_with_tabs": true, // Indent with one tab (overrides indent_size and indent_char options)
"exception_on_tag_mismatch": false, // If the last closing tag is not at the same indentation level as the first opening tag, there's probably a tag mismatch in the file
"expand_javascript": true, // (Under construction) Expand JavaScript inside of <script> tags (also affects CSS purely by coincidence)
"expand_tags": true, // Expand tag attributes onto new lines
"minimum_attribute_count": 2, // Minimum number of attributes needed before tag attributes are expanded to new lines
"first_attribute_on_new_line": false, // Put all attributes on separate lines from the tag (only uses 1 indentation unit as opposed to lining all attributes up with the first)
"reduce_empty_tags": true, // Put closing tags on same line as opening tag if there is no content between them
"custom_singletons": "" // Custom singleton tags for various template languages outside of the HTML5 spec
},
####命令行
- sublimeREPL：多種腳本語言的執行環境
####前端開發
- Emmet：前端開發神器
>[https://www.w3cplus.com/tools/emmet-cheat-sheet.html](https://www.w3cplus.com/tools/emmet-cheat-sheet.html)
后代：>
nav>ul>li
兄弟：+
div+p+bq
上級：^
div+div>p>span+em^bq
div+div>p>span+em^^bq
分組：()
div>(header>ul>li*2>a)+footer>p
(div>dl>(dt+dd)*3)+footer>p
乘法：*
ul>li*5
自增符號：$
ul>li.item$*5
h$[title=item$]{Header $}*3
ul>li.item$$$*5
ul>li.item$@-*5
ul>li.item$@3*5
屬性（ID、類屬性、自定義屬性）
#header
.title
form#search.wide
p.class1.class2.class3
p[title="Hello world"]
[a='value1' b="value2"]
td[rowspan=2 colspan=3 title]
文本
a{Click me}
p>{Click }+a{here}+{ to continue}
隱式標簽
.class
em>.class
ul>.class
table>.row>.col
####Markdown
- OmniMarkupPreview：網頁中預覽markdown，支持局域網預覽
下面配置中去掉"strikeout"，否則會報錯404
"extensions": ["tables", "strikeout", "fenced_code", "codehilite"]
- MarkdownEditing：markdown語法編輯
- MarkdownExtended：markdown顯示主題
##Sublime使用技巧
>https://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html
###配置技巧
####側邊欄打開多個目錄
Project - Add Folder to Project
###編輯
####基本編輯
ctrl + enter 下面新增一行並跳轉到新行
ctrl + shift + enter 上面新增一行並跳轉到新行
ctrl + ←/→ 逐詞移動
ctrl + shift + ←/→ 逐詞選擇
ctrl + ↑/↓ 移動當前顯示區域
ctrl + shift + ↑/↓ 移動當前行
####選擇（多重選擇）
ctrl + D 選擇當前光標所在詞
ctrl + D 選擇該詞的下一個位置
ctrl + K 跳過
ctrl + U 回退
Esc 退出多重編輯
###窗口&標簽
####窗口
ctrl + shift + N 創建新窗口
ctrl + W 窗口內沒有標簽時，關閉窗口
####標簽
ctrl + N 創建新標簽
ctrl + W 關閉標簽
ctrl + shift + T 恢復剛關閉的標簽
####分屏
alt + shift + 1 單屏
alt + shift + 2 左右2屏
alt + shift + 3 左右3屏
alt + shift + 4 左右2屏
alt + shift + 5 上下左右分屏
alt + shift + 8 上下2屏
alt + shift + 9 上下3屏
##編碼Coding
###編碼規范
// 設置tab的大小為2
"tab_size": 2,
// 使用空格代替tab
"translate_tabs_to_spaces": true,
// 添加行寬標尺
"rulers": [80, 100],
// 顯示空白字符
"draw_white_space": "all",
// 保存時自動去除行末空白
"trim_trailing_white_space_on_save": true,
// 保存時自動增加文件末尾換行
"ensure_newline_at_eof_on_save": true,
