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