代碼編輯器Sublime_Text3的使用

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

1、基本操做

1. 經常使用快捷鍵

  • 分屏:Shift + Alt + 數字
  • 查找:Ctrl + F
  • 替換:Ctrl + H
  • 定位到某行:Ctrl + G

2. 修改插件安裝位置

插件默認安裝的位置是 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

3. 設置文件擴展名默認語法

若是遇到 sublime 打開的文件與該文件實際的語法不符合,好比 .css 文件被解析成了 .less 文件(sublime 右下角有當前文件的語法格式),能夠經過如下方式設置:

View → Syntax → Open all with current extension as...

4. 經常使用快捷鍵設置

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
]

複製代碼

5. 主題配色

能夠去主題編輯網站 本身搭配主題顏色。

編輯好後下載 .tmTheme 文件,放到 Sublime_Text3\Data\Packages\Color Scheme - Default 文件夾下。

打開 sublime,Preferences → Color Scheme,設置對應配色文件。

6. 關閉更新提示

打開 References → Settings,添加:

"update_check":false
複製代碼

7. 經常使用參數設置

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
}

複製代碼

8. 在sublime text3 裏面直接運行 js 腳本,調試控制檯(須要安裝 Node.js)

Tools → Build System → New Build System...

添加代碼:

{
	"cmd": ["node", "$file"],
	"selector": "source.js"
}
複製代碼

保存,保存名爲 Node.sublime-build,保存路徑爲Data\Packages\User文件夾下。

新建 js 文件,直接 ctrl+b,就能夠在控制檯輸出結果。

9. 自定義代碼片斷

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>
複製代碼

2、Sublime 插件推薦

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 調出命令面板,查詢並選擇插件進行安裝。

1. emmet

快速生成 html 基本結構。

  1. 安裝 emment 插件。
  2. Ctrl + N 新建一個文件。
  3. 右下角有一個 plain text 標誌,選擇文件類型爲 HTML。
  4. Ctrl + S 保存文件。
  5. 輸入 「!」 + tab。

2. terminal

快速在當前文件夾下打開 cmd 窗口。

快捷鍵: ctrl + shift + t。

3. html5

生成 html5 的頁面結構。

html5 + tab。

4. AdvancedNewFile

快速新建文件。

5. JSFormat

Javascript 的代碼格式化插件。

用法:選中 js 代碼,ctrl + alt + f (可自定義快捷鍵)。

6. HTML-CSS-JS Prettify

代碼格式化。

方法:選中代碼,右鍵,Prettify Code。

7. Minifi

該插件基於Google Closure compiler,自動壓縮js文件。

8. jQuery

jQuery代碼提示。

9. DocBlockr

生成優美註釋。

用法:

輸入 /*、/** + 回車
複製代碼

10. AutoFileName

快捷輸入文件名。

11. FileDiffs

強大的比較代碼不一樣工具。

右鍵標籤頁,出現 FileDiffs Menu 或者 Diff with Tab… 選擇對應文件比較便可。

12. SideBarEnhancements

側欄右鍵功能加強。

13. Autoprefixer

自動補全 css3 屬性前綴。

屬性名 + tab:

14. SFTP

直接編輯 FTP 或 SFTP 服務器上的文件。

15. Markdown Preview

預覽 Markdown 文件。

編輯好 Markdown 文件後,ctrl + b ,生成 html 文件。

16. cssrem

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。

17. sublime serve

在本地服務器打開 html 文件。

Tools –> SublimeServer –> Start SublimeServer。

右鍵 –> View in SublimeServer。

18. AllAutocomplete

能夠搜索所有打開的標籤頁。

19. ColorHighlighter

.css 文件顯示顏色值的實際顏色。

20. PlainTasks

待辦事項表。

  • 新建 .todo 文件。
  • 在標題後加冒號,新建項目。
  • ctrl + i 新建待辦事項。

使用手冊:

Preferences → Package Settings → PlainTasks → Tutorial。

21. TrailingSpaces

去除代碼末尾的空格鍵。

修改空格高亮色/保存時自動刪除空格:

Preferences → Package Settings → Trailing Spaces → Settings - User ,添加:

{
    "trailing_spaces_highlight_color" : "#fff",
    "trailing_spaces_trim_on_save": true,
}
複製代碼

22. CSScomb

css 整理。

功能很強大,可以整理 css 規則的順序,好比把寬高、顏色、邊距規則用空行分隔開,方便修改還能防止樣式重複。

選中 css 代碼,右鍵 Run CSScomb(也可自行配置快捷鍵)。

23. CSS Format

css 代碼格式化。

選中 css 代碼,右鍵 CSS Formate –> Compact (也可自行配置快捷鍵)。

24. SublimeLinter

錯誤提示插件。

25 CSSLint

能檢查CSS錯誤,提示重複等。

26. Pretty JSON

格式化 json。

自定義快捷鍵:打開 Preference –> Key Bindings-User,添加格式化代碼快捷鍵爲 ctrl + alt + j。

{"keys": ["ctrl+alt+j"],"command": "pretty_json"}
複製代碼

27. IMESupport

中文輸入法跟隨光標。

28. Alignment

js 等號對齊。

自定義快捷鍵:打開 Preference –> Key Bindings-User,添加格式化代碼快捷鍵爲 ctrl + alt + t。

{"keys": ["ctrl+alt+t"], "command": "alignment"}
複製代碼

29. QuoteHTML

把 HTML 拼接成 js 插入字符串。

自定義快捷鍵:打開 Preference –> Key Bindings-User,添加格式化代碼快捷鍵爲 ctrl + alt + h。

{"keys": ["ctrl+alt+t"], "command": "quote_html"}  
複製代碼

30. Markdown Editing

markdown 編輯插件。

31. OmniMarkupPreviewer

markdown 實時預覽。

配置:Sublime Text > Preferences > Package Settings > OmniMarkupPreviewer > Settings - User。

快捷鍵:ctrl + alt + o,會自啓一個本地服務器。

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    }
}
複製代碼

32. Table Editor

markdown 自動完成表格並格式化,快捷鍵:tab。

33. ConvertToUTF8

解決 GBK 編碼下的中文亂碼問題。


期待您的關注!

相關文章
相關標籤/搜索