整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
sublime-text當中，如果文件類型為HTML時，當輸入！或html:5之后，再鍵入Tab鍵即可生成默認的基本骨架的代碼段。我們也可以在基本骨架上修改出我們常用的一些自定義代碼段，保存之后，下次需要使用時，我們用指定的快捷鍵也可以快速生成。
下面由sublime入門教程欄目給大家介紹在sublime當中創建自定義代碼段的步驟。
1、生成基本骨架
打開sublime之后，新建一個文件，確保把右下角的文件類型由默認的Plain Text改為HTML。然后再用 ! 或 html:5 配合Tab鍵快速生成默認的基本骨架代碼段。
2、編輯出自定義代碼段
jquery的入口函數當中用到關鍵字$,由于$是代碼段的一個語法關鍵字，若在自定義代碼段當中直接使用 "$" ，會出現語法錯誤，導致無法生成該代碼段。可以選擇用 "$" 來代替代碼段當中的 "$" 。之后在使用快捷鍵生成代碼段時，不會出現 "\" 這個轉義符號的。
3、設置參數并保存該自定義代碼段
選擇點擊菜單欄的Tools->Developer->New Snippet。此時會新生成一個XML格式的界面，如下所示。
Hello, ${1:this} is a ${2:snippet}.
這個部分只是為了提示我們設置并控制代碼段當中光標停留位置的語法。記下之后可刪除這一行代碼，然后把我們剛剛編輯好的自定義代碼段復制粘貼進去。（如下圖所示，在第3行的位置當中進行插入）。
我們可以根據之前提示的語法來控制生成的代碼段當中光標提留位置，更方便之后的編輯。
如我們在原代碼段上修改為。
<title>${1:01}-jquery案例-${2:}</title>
<body> ${3:} </body>
表示當完成代碼段創建之后，用快捷鍵快速生成之后，關標首先出現在01的前面，并選中01這個字段，方便修改編輯。之后再按下Tab鍵，光標就出現在jquery-之后，在這里并沒有選中內容，方便插入內容。再按下Tab鍵，光標就會出現在body的標簽對當中，在這里也是方便插入內容。
之后再對<!-- <tabTrigger>hello</tabTrigger> -->，去掉注釋，并再標簽對當中輸入自定義快捷命令的名字。如下所示。
表示之后我們在新建的HTML文件當中，輸入myjquery，再鍵入Tab即可快速生成我們自定義的代碼段。
完成編輯之后，進行保存。直接用ctri+s默認保存至sublime的安裝目錄的Packages->User當中。為了便于我們自定義代碼段的管理，在其中新建一個snippets文件夾，把自定義代碼段文件都保存至這個文件夾當中。
文件名可以自定義命名，但后綴名必須為 .sublime-snippet，否則會出錯。
這樣就完成了自定義代碼段的創建了，接下去，再在sublime當中新建一個HTML文件，再輸入myjquery,配合Tab鍵即可快速生成指定的自定義代碼段啦！
以上就是sublime當中創建自定義代碼段的詳細內容，更多請關注其它相關文章！
更多技巧請《轉發 + 關注》哦！
TML編輯器是一種用于創建、編輯和預覽HTML（超文本標記語言）代碼的工具或應用程序。它提供了一個直觀的界面，使用戶能夠輕松地編寫和設計網頁內容。本文主要介紹HTML 常用編輯器(Visual Studio Code、Sublime Text、Atom、Notepad++和Dreamweaver)。
參考文檔：https://www.cjavapy.com/article/3299/
Visual Studio Code（簡稱VS Code）是一款由微軟開發的跨平臺源代碼編輯器，支持Windows、macOS和Linux等多種操作系統。它被廣泛用于Web開發，包括編輯HTML、CSS、JavaScript等前端技術。VS Code是一款輕量級的代碼編輯器，啟動迅速，占用資源少。VS Code提供了豐富的擴展和插件，可以根據需求安裝插件來增強編輯器功能。
1）安裝和配置
官網地址：Visual Studio Code - Code Editing. Redefined
根據操作系統下載并安裝相應版本的VS Code。打開VS Code后，可以根據自己的喜好配置編輯器設置，如主題、字體等。
2）新建HTML文件
在 VS Code 安裝完成后，選擇" 文件(F)->新建文件(N) "，在新建的文件中輸入以下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>3）編輯HTML文件
在VS Code中，點擊左上角的"文件"菜單，選擇"打開文件"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來打開HTML文件。
在編輯器中可以直接修改HTML文件的內容。VS Code會自動識別HTML標記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來保存HTML文件。
4）插件推薦
HTML CSS Support：提供對HTML和CSS的支持，包括代碼片段、自動補全等功能。
Live Server：啟動一個本地開發服務器，實時預覽HTML頁面的效果。
Prettier：格式化HTML代碼，使代碼結構更整潔。
Auto Close Tag：自動閉合HTML標簽，提高編碼效率。
Bracket Pair Colorizer：對成對的括號進行著色，方便識別代碼塊。
Sublime Text是一款流行的跨平臺源代碼編輯器，支持Windows、macOS和Linux等多種操作系統。它被廣泛用于Web開發，包括編輯HTML、CSS、JavaScript等前端技術。
Sublime Text的界面非常簡潔，沒有多余的菜單和工具欄，更便于專注于代碼編輯。Sublime Text支持多種編程語言，包括HTML、CSS、JavaScript、Python、Java等。Sublime Text擁有強大的插件系統，用戶可以根據需要安裝插件來擴展編輯器功能。用戶可以自定義快捷鍵、主題、顏色方案等，以滿足個性化需求。Sublime Text啟動迅速，響應快速，適合于快速編輯代碼。
1）安裝和配置
官網地址：Sublime Text - Text Editing, Done Right
根據操作系統下載并安裝相應版本的Sublime Text。打開Sublime Text后，可以根據自己的喜好進行編輯器設置，如字體、主題等。
2）新建HTML文件
在Sublime Text 安裝完成后，選擇" File->New File "，在新建的文件中輸入以下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>3）編輯HTML文件
在Sublime Text中，點擊左上角的"File"菜單，選擇"Open File"，或者使用快捷鍵Ctrl+O（Windows）或Cmd+O（macOS）來打開HTML文件。在編輯器中可以直接修改HTML文件的內容。Sublime Text會自動識別HTML標記，并提供代碼高亮和智能提示功能。編輯完成后，使用快捷鍵Ctrl+S（Windows）或Cmd+S（macOS）來保存HTML文件。
4）插件推薦
Emmet：提供HTML/CSS快速編寫和自動完成功能，可以大大提高編碼效率。
Sublime Linter：對代碼進行實時語法檢查，幫助發現潛在的錯誤和警告。
Color Highlighter：對CSS中的顏色進行高亮顯示，方便調試和修改樣式。
SideBarEnhancements：增強側邊欄功能，提供更多文件操作選項。
Dreamweaver是由Adobe公司開發的一款全球知名的網頁設計和開發工具。它為開發人員和設計師提供了一個可視化的界面，可以直觀地創建和編輯網頁內容，同時也支持手動編輯代碼。Dreamweaver提供可視化界面，可以直觀地拖拽和編輯網頁元素，無需手動編寫代碼。除了可視化界面，Dreamweaver也支持手動編輯代碼，適合于開發人員和設計師。Dreamweaver可在Windows和macOS等多個平臺上運行。Dreamweaver集成了代碼編輯器、預覽窗口、文件管理器等功能，提供全面的開發環境。
1）安裝和配置
官網地址：Website design software | Adobe Dreamweaver
根據操作系統下載并安裝相應版本的Dreamweaver。打開Dreamweaver后，，根據需要進行編輯器設置，如界面語言、字體、代碼顏色等。
2）編輯HTML文件
在Dreamweaver中，點擊左上角的"File"菜單，選擇"New"，然后選擇"HTML"，即可新建一個空白的HTML文件。內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>編程之路(cjavapy.com)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>使用可視化界面，可以直接拖拽頁面元素、調整布局、插入圖片等。若需要手動編輯HTML代碼，可以在下方的代碼編輯器中進行修改。Dreamweaver會自動提供代碼補全和語法高亮功能。在Dreamweaver中，可以實時預覽網頁效果，點擊右上角的"Live View"按鈕即可。
3）CSS和JavaScript支持
Dreamweaver也支持CSS和JavaScript的編輯和預覽，可以幫助創建更豐富的網頁效果。在編輯器中可以直接編輯CSS樣式和JavaScript代碼，并實時查看效果。
4）網頁上傳和發布
Dreamweaver集成了FTP功能，可以直接將編輯好的網頁上傳到服務器。點擊"Site"菜單，選擇"Manage Sites"，配置好站點設置，即可進行上傳和發布。
5）Dreamweaver模板和庫
Dreamweaver提供模板和庫功能，可以保存和復用常用的網頁元素和樣式，提高開發效率。
參考文檔：https://www.cjavapy.com/article/3299/
功能：安裝包管理
簡介：sublime插件控制臺，提供添加、刪除、禁用、查找插件等功能
使用：https://sublime.wbond.net/installation
安裝方法：
CTRL+` ，出現控制臺
粘貼以下代碼至控制臺
ST2：
| 1 | import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)ifnotos.path.exists(ipp)elseNone;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') |
ST3：
| 1 | importurllib.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()) |
其他方法：
如果以上方法不能安裝，請使用下面的方法
選擇菜單：Preferences > Browse Packages
打開sublime插件安裝包文件夾
下載文件并復制到打開的文件夾
重啟sublime
功能：編碼快捷鍵，前端必備
簡介：Emmet作為zen coding的升級版，對于前端來說，可是必備插件，如果你對它還不太熟悉，可以在其官網（http://docs.emmet.io/）上看下具體的演示視頻。
使用：教程-http://docs.emmet.io/cheat-sheet/、http://peters-playground.com/Emmet-Css-Snippets-for-Sublime-Text-2/
功能：Javascript的代碼格式化插件
簡介：很多網站的JS代碼都進行了壓縮，一行式的甚至混淆壓縮，這讓我們看起來很吃力。而這個插件能幫我們把原始代碼進行格式的整理，包括換行和縮進等等，是代碼一目了然，更快讀懂~
使用：在已壓縮的JS文件中，右鍵選擇jsFormat或者使用默認快捷鍵（Ctrl+Alt+F）
功能：LESS高亮插件
簡介：用LESS的同學都知道，sublime沒有支持less的語法高亮，所以這個插件可以幫上我們
使用：打開.less文件或者設置為less格式
功能：編譯Less
簡介：監測到文件改動時，編譯保存為.css文件
使用：打開.less文件，編寫代碼保存即可看到同時生成.css的文件，如果沒有則需要安裝node。不推薦用這種方法編譯，要么用koala，要么就用grunt編譯。
功能：”=”號對齊
簡介：變量定義太多，長短不一，可一鍵對齊
使用：默認快捷鍵Ctrl+Alt+A和QQ截屏沖突，可設置其他快捷鍵如：Ctrl+Shift+Alt+A；先選擇要對齊的文本
功能：CSS添加私有前綴
簡介：CSS還未標準化，所以要給各大瀏覽器一個前綴以解決兼容問題
使用：Ctrl+Shift+P，選擇autoprefixer即可。需要安裝node.js。
其他設置如快捷鍵請參考：https://sublime.wbond.net/packages/Autoprefixer
功能：粘貼板歷史記錄
簡介：方便使用復制/剪切的內容
使用：
Ctrl+alt+v：顯示歷史記錄
Ctrl+alt+d：清空歷史記錄
Ctrl+shift+v：粘貼上一條記錄（最舊）
Ctrl+shift+alt+v：粘貼下一條記錄（最新）
功能：代碼匹配
簡介：可匹配[], (), {}, “”, ”, <tag></tag>，高亮標記，便于查看起始和結束標記
使用：點擊對應代碼即可
功能：git管理
簡介：插件基本上實現了git的所有功能
使用：https://github.com/kemayo/sublime-text-git/wiki
功能：jQ函數提示
簡介：快捷輸入jQ函數，是偷懶的好方法
功能：生成優美注釋
簡介：標準的注釋，包括函數名、參數、返回值等，并以多行顯示，手動寫比較麻煩
使用：輸入/*、/**然后回車，還有很多用法，請參照
https://sublime.wbond.net/packages/DocBlockr
功能：調色板
簡介：需要輸入顏色時，可直接選取顏色
使用：快捷鍵Windows: ctrl+shift+c
功能：文件轉碼成utf-8
簡介：通過本插件，您可以編輯并保存目前編碼不被 Sublime Text 支持的文件，特別是中日韓用戶使用的 GB2312，GBK，BIG5，EUC-KR，EUC-JP ，ANSI等。ConvertToUTF8 同時支持 Sublime Text 2 和 3。
使用：安裝插件后自動轉換為utf-8格式
功能：快捷輸入文件名
簡介：自動完成文件名的輸入，如圖片選取
使用：輸入”/”即可看到相對于本項目文件夾的其他文件
功能：node代碼提示
教程：https://sublime.wbond.net/packages/Nodejs
功能：sublime中文輸入法
簡介：還在糾結 Sublime Text 中文輸入法不能跟隨光標嗎？試試「IMESupport 」這個插件吧！目前只支持 Windows，在搜索等界面不能很好的跟隨光標。
使用：Ctrl + Shift + P →輸入pci →輸入IMESupport →回車
功能：檢測并一鍵去除代碼中多余的空格
簡介：還在糾結代碼中有多余的空格而顯得代碼不規范？或是有處女座情節？次插件幫你實現發現多余空格、一鍵刪除空格、保存時自動刪除多余空格，讓你的代碼規范清爽起來
使用：安裝插件并重啟，即可自動提示多余空格。一鍵刪除多余空格：CTRL+SHITF+T（需配置），更多配置請點擊標題。快捷鍵配置：在Preferences / Key Bindings – User加上代碼（數組內）
| 1 | {"keys":["ctrl+shift+t"],"command":"delete_trailing_spaces"} |
功能：強大的比較代碼不同工具
簡介：比較當前文件與選中的代碼、剪切板中代碼、另一文件、未保存文件之間的差別。可配置為顯示差別在外部比較工具，精確到行。
使用：右鍵標簽頁，出現FileDiffs Menu或者Diff with Tab…選擇對應文件比較即可
功能：中文識別
簡介：Sublime Text 2可識別UTF-8格式的中文，不識別GBK和ANSI，因此打開很多含中文的文檔都會出現亂碼。可以通過安裝插件GBK Support,來識別GBK和ANSI。
使用：
Open a GBK File
Save file with GBK encoding
Change file encoding from utf8 to GBK or GBK to utf8
本文轉自：W3C中文教程/中文網（w3schools.wang），如果你是IT從業者，它也許會對你有幫助！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
