面由sublime使用教程欄目給大家介紹在Sublime Text中添加代碼片段的方法,希望對需要的朋友有所幫助!
我們在編寫代碼的時候,總會遇到一些需要反復使用的代碼片段。這時候就需要反復的復制和黏貼,大大影響效率。我們利用Sublime Text的snippet(代碼片段)功能,就能很好的解決這一問題。
通俗的講,就是把我們常用的代碼分別保存起啦,然后通過插件的形式來反復調用。
創建方法:Tools (工具)> 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> -->
<!-- <description>description</description> -->
</snippet>
其中,content中由CDATA包裹起來的部分是我們要插入的代碼片段,可選。
tabTrigger是我們tab鍵觸發的自動補全代碼功能的一個名字,可選。
scope,可選,使用范圍,不填寫代表對所有文件有效。附:source.css和test.html分別對應不同文件。
description,可選,在snippet菜單中的顯示說明(支持中文)。如果不定義,菜單則顯示當前文件的文件名。
${1:this}表示代碼插入后,光標所停留的位置,可同時插入多個。其中:this為自定義參數(可選)。
表示代碼插入后,按Tab鍵,光標會根據順序跳轉到相應位置(以此類推)。
現在,你應該有了個大致的了解。那我們就開始自己動手編寫一個實例。我們都知道,再Sublime中,輸入!或者html:5再按tab鍵,可以自動補全HTML結構,但是這個結果相對很簡單,我自己擴展了它的結果內容,新增了幾個mate標簽,增加了頁面描述。
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="Generator" content="Sublime Text3">
<meta name="Author" content="dunizb">
<meta name="website" content="http://www.mybry.com">
<meta name="Description" content="讀你,這世間唯有夢想和好姑娘不可辜負~~">
<link type="image/x-icon" rel="shortcut icon" href="image/favicon.ico" />
<script type="text/javascript">
${1:}
</script>
<body>
${2:這是html內容}
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>hjs</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
<description>custom-html</description>
</snippet>
然后保存代碼片段,保存到Sublime Text3DataPackagesUser下面,取個名字
就這樣,在HTML頁面中輸入hjs+tab,就可以自動補全這一系列代碼了。
以上就是如何在Sublime Text中添加代碼片段的詳細內容,更多請關注其它相關文章!
更多技巧請《轉發 + 關注》哦!
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當中創建自定義代碼段的詳細內容,更多請關注其它相關文章!
更多技巧請《轉發 + 關注》哦!
哈嘍大家好,我是公眾號作者“未來”,本期分享的內容是Web前端系列課程,本系列總共29個階段,堅持學習3個月蛻變為Web前端高手哦!
?
1 什么是標簽及其分類
在HTML頁面中,帶有“< >”符號的元素被稱為HTML標簽,<html>、<head>、<body>都是HTML標簽。所謂標簽就是放在”<>”標簽符中表示某個功能的編碼命令,也稱為HTML標簽或HTML元素。
1.雙標簽: <標簽名>內容<標簽名>
2.單標簽: <標簽名/>(數量非常少)
單標簽也稱空標簽,是指用一個標簽符號即可完整地描述某個功能的標簽。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。