Sublime Text3 是我比較喜歡的一款代碼編輯器,它輕量、簡潔、高效、跨平臺,豐富的插件爲開發提供了許多的便利。css
它在支持語法高亮、代碼補全、代碼片斷(Snippet)、代碼摺疊、行號顯示、自定義皮膚、配色方案等全部其它代碼編輯器所擁有的功能的同時,又保證了其飛快的速度!還有着自身獨特的功能,好比代碼地圖、多種界面佈局以及全屏免打擾模式等。html
下圖是我已經配置好的 Sublime Text3 界面,包含本篇文章所列出的一些插件的安裝與配置。前端
關注微信公衆號「Web前端開發小K」,回覆「sublime」,獲取下載地址與提取碼。 html5
下載成功後解壓文件,運行文件夾下的 sublime_text.exe 文件,便可使用 Sublime Text3。(注意:有些插件依賴於 Node.js,若是你的電腦沒有安裝 Node.js,部分插件可能沒法使用,請先去Node.js 官網下載並安裝 Node.js)。node
下面我來介紹一下它的基本使用和一些經常使用插件的安裝與配置。python
首先去 Sublime Text 官網 下載應用並安裝。css3
插件默認安裝的位置是 C 盤的 AppData 的目錄,例如在個人電腦上:json
C:\Users\LIU\AppData\Roaming\Sublime Text 3\Packages
複製代碼
修改位置:關閉 Sublime,找到想要安裝插件的位置,新建一個 Data 的文件夾,把C盤目錄下的 Packages 文件夾刪除掉,再從新打開sublime → References → Browser Packages, 就發現打開的文件夾就是新建的 Data 文件下的 Packages 了,以後經過 package control 安裝插件都會存在這個路徑下。瀏覽器
以後若是將 Sublime Text 程序目錄移動到其餘電腦上,插件也會帶着。sass
若是遇到 sublime 打開的文件與該文件實際的語法不符合,好比 .css 文件被解析成了 .less 文件(sublime 右下角有當前文件的語法格式),能夠經過如下方式設置:
View → Syntax → Open all with current extension as...
Preferences → Key Bindings。
如下是我本身的一些設置(有些配置須要安裝對應插件),可根據需求自行配置:
[
{"keys": ["ctrl+enter"],"command": "open_in_browser"}, //在瀏覽器中打開
{"keys": ["ctrl+o"],"command": "prompt_open_file"}, //打開所在文件夾
{"keys": ["ctrl+alt+h"],"command": "htmlprettify"}, //html 格式化
{"keys": ["ctrl+alt+j"],"command": "js_format"}, // js 格式化
{"keys": ["ctrl+alt+c"],"command": "css_comb"}, // css 整理
{"keys": ["ctrl+alt+shift+c"],"command": "css_format","args": {"action": "compact"}}, // css格式化
{"keys": ["shift+ctrl+enter"], "command":"run_macro_file", "args":{"file":"Packages/User/comma.sublime-macro"} },
{"keys": ["ctrl+alt+shift+j"], "command": "quote_html"}, // html 轉 js
]
複製代碼
能夠去主題編輯網站 本身搭配主題顏色。
編輯好後下載 .tmTheme 文件,放到 Sublime_Text3\Data\Packages\Color Scheme - Default 文件夾下。
打開 sublime,Preferences → Color Scheme,設置對應配色文件。
打開 References → Settings,添加:
"update_check":false
複製代碼
Preferences → Settings。
如下是我本身的一些設置,可根據需求自行配置:
{
"always_show_minimap_viewport": true,
"bold_folder_labels": true,
"caret_style": "phase",
"color_scheme": "Packages/Color Scheme - Default/liuzhenghe_color_scheme.tmTheme",
"fade_fold_buttons": false,
"font_face": "Consolas",
"font_size": 8,
"ha_style": "filled",
"highlight_line": true,
"highlight_modified_tabs": true,
"icons": true,
"ignored_packages":
[
"Vintage"
],
"line_padding_bottom": 3,
"line_padding_top": 3,
"open_files_in_new_window": true,
"original_color_scheme": "Packages/User/Color Highlighter/themes/liuzhenghe_color_scheme.tmTheme",
"overlay_scroll_bars": "enabled",
"rulers":
[
],
"save_on_focus_lost": true,
"scroll_past_end": true,
"show_definitions": false,
"show_encoding": true,
"show_full_path": false,
"spell_check": false,
"tab_size": 4,
"theme": "Boxy Solarized Dark.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": false,
"word_wrap": true,
"update_check":false
}
複製代碼
Tools → Build System → New Build System...
添加代碼:
{
"cmd": ["node", "$file"],
"selector": "source.js"
}
複製代碼
保存,保存名爲 Node.sublime-build,保存路徑爲Data\Packages\User文件夾下。
新建 js 文件,直接 ctrl+b,就能夠在控制檯輸出結果。
Tools → Developer → New Snippet。
出現如下代碼:
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
複製代碼
在 CDATA[] 中編輯代碼片斷。
$ 符號表示的是代碼補全後光標出現的位置和順序,好比 ${1:this}:意爲光標在此第一次出現,默認值爲 this,且該默認值被選中,若是有多個$1,則光標同時出如今此處,而默認值只按照第一個設置的值出現。
下面定義了 ${2:snippet},因此當修改了 $1 後,按 tab,則直接跳轉到 $2 的位置,另外,若是須要顯示 $ 符號,則須要在符號前面加 ‘\’ 轉義。
去掉 的註釋,在標籤中間添加「觸發前綴」。
Ctrl + s 保存,爲了方便代碼片斷的管理,最好在當前目錄下新建一個 Snippets 文件夾,將文件保存到該目錄下。
tab +「觸發前綴」,代碼段自動補全,例:
<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>hello</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
複製代碼
package control 使用方法:
下面插件推薦中有些插件經過 package control 可能安裝不了,您能夠點擊下載我已經配置好的 Sublime Text3 程序目錄,提取碼:uswl ,直接複製插件出來到對應目錄中去。
也能夠去 packagecontrol 官網地址 查詢下載。
部分插件安裝後沒法使用,可能緣由:沒有安裝NodeJS。
安裝 package control 組件,Ctrl + `,調出 console,粘貼如下代碼並回車:
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。
Ctrl + Shift + P 調出命令面板,查詢並選擇插件進行安裝。
快速生成 html 基本結構。
快速在當前文件夾下打開 cmd 窗口。
快捷鍵: ctrl + shift + t。
生成 html5 的頁面結構。
html5 + tab。
快速新建文件。
Javascript 的代碼格式化插件。
用法:選中 js 代碼,ctrl + alt + f (可自定義快捷鍵)。
代碼格式化。
方法:選中代碼,右鍵,Prettify Code。
該插件基於Google Closure compiler,自動壓縮js文件。
jQuery代碼提示。
生成優美註釋。
用法:
輸入 /*、/** + 回車
複製代碼
快捷輸入文件名。
強大的比較代碼不一樣工具。
右鍵標籤頁,出現 FileDiffs Menu 或者 Diff with Tab… 選擇對應文件比較便可。
側欄右鍵功能加強。
自動補全 css3 屬性前綴。
屬性名 + tab:
直接編輯 FTP 或 SFTP 服務器上的文件。
預覽 Markdown 文件。
編輯好 Markdown 文件後,ctrl + b ,生成 html 文件。
px 轉換爲 rem。
Preferences → Package Settings → cssrem → Settings-Default。
會出現下面代碼:
{
"px_to_rem": 40,
"max_rem_fraction_length": 6,
"available_file_types": [".css", ".less", ".sass"]
}
複製代碼
"px_to_rem": 40, // px 轉 rem 的單位比例,默認爲40。
"max_rem_fraction_length": 6, // px 轉 rem 的小數部分的最大長度,默認爲6。
"available_file_types": [".css", ".less", ".sass"] // 啓用此插件的文件類型,默認爲 [".css", ".less", ".sass"]。
通常只須要修改單位比例,單位比例 = 設計稿實際寬 / 10。
在本地服務器打開 html 文件。
Tools –> SublimeServer –> Start SublimeServer。
右鍵 –> View in SublimeServer。
能夠搜索所有打開的標籤頁。
.css 文件顯示顏色值的實際顏色。
待辦事項表。
使用手冊:
Preferences → Package Settings → PlainTasks → Tutorial。
去除代碼末尾的空格鍵。
修改空格高亮色/保存時自動刪除空格:
Preferences → Package Settings → Trailing Spaces → Settings - User ,添加:
{
"trailing_spaces_highlight_color" : "#fff",
"trailing_spaces_trim_on_save": true,
}
複製代碼
css 整理。
功能很強大,可以整理 css 規則的順序,好比把寬高、顏色、邊距規則用空行分隔開,方便修改還能防止樣式重複。
選中 css 代碼,右鍵 Run CSScomb(也可自行配置快捷鍵)。
css 代碼格式化。
選中 css 代碼,右鍵 CSS Formate –> Compact (也可自行配置快捷鍵)。
錯誤提示插件。
能檢查CSS錯誤,提示重複等。
格式化 json。
自定義快捷鍵:打開 Preference –> Key Bindings-User,添加格式化代碼快捷鍵爲 ctrl + alt + j。
{"keys": ["ctrl+alt+j"],"command": "pretty_json"}
複製代碼
中文輸入法跟隨光標。
js 等號對齊。
自定義快捷鍵:打開 Preference –> Key Bindings-User,添加格式化代碼快捷鍵爲 ctrl + alt + t。
{"keys": ["ctrl+alt+t"], "command": "alignment"}
複製代碼
把 HTML 拼接成 js 插入字符串。
自定義快捷鍵:打開 Preference –> Key Bindings-User,添加格式化代碼快捷鍵爲 ctrl + alt + h。
{"keys": ["ctrl+alt+t"], "command": "quote_html"}
複製代碼
markdown 編輯插件。
markdown 實時預覽。
配置:Sublime Text > Preferences > Package Settings > OmniMarkupPreviewer > Settings - User。
快捷鍵:ctrl + alt + o,會自啓一個本地服務器。
{
"renderer_options-MarkdownRenderer": {
"extensions": ["tables", "fenced_code", "codehilite"]
}
}
複製代碼
markdown 自動完成表格並格式化,快捷鍵:tab。
解決 GBK 編碼下的中文亂碼問題。