在VS?Code中使用Snippet?Craft擴(kuò)展提高編碼效率的過程詳解
Snippet Craft
一個(gè)VS Code代碼片段管理插件
功能
創(chuàng)建和插入代碼片段
在編輯器區(qū)域右鍵菜單中點(diǎn)擊插入Snippet，或在代碼片段視圖中點(diǎn)擊條目，則會(huì)將代碼片段插入到當(dāng)前激活文檔的光標(biāo)位置。
代碼片段編輯
代碼片段在左側(cè)欄中，根據(jù)創(chuàng)建時(shí)的文件內(nèi)容類型，分組顯示代碼片段，可編輯已有的代碼片段。
代碼片段預(yù)覽
鼠標(biāo)移動(dòng)到代碼片段條目上時(shí)，顯示tooltip預(yù)覽
默認(rèn)映射
映射是插入代碼片段時(shí)，自動(dòng)替換的變量。
代碼片段中通過設(shè)置占位符${VAR_NAME}，在插入代碼片段時(shí)，將自動(dòng)替換為全局變量中的值?？捎玫挠成淙缦卤恚?/p>
| 類別 | 變量 | 描述 |
|---|---|---|
| 文件和編輯器相關(guān) | TM_SELECTED_TEXT | 當(dāng)前選定的文本或空字符串 |
| TM_CURRENT_LINE | 當(dāng)前行的內(nèi)容 | |
| TM_CURRENT_WORD | 光標(biāo)下的單詞或空字符串的內(nèi)容 | |
| TM_LINE_INDEX | 基于零索引的行號(hào) | |
| TM_LINE_NUMBER | 基于一個(gè)索引的行號(hào) | |
| TM_FILENAME | 當(dāng)前文檔的文件名 | |
| TM_FILENAME_BASE | 當(dāng)前文檔的文件名（不含擴(kuò)展名） | |
| TM_DIRECTORY | 當(dāng)前文檔的目錄 | |
| TM_FILEPATH | 當(dāng)前文檔的完整文件路徑 | |
| RELATIVE_FILEPATH | 當(dāng)前文檔的相對(duì)文件路徑（相對(duì)于打開的工作區(qū)或文件夾） | |
| CLIPBOARD | 剪貼板的內(nèi)容 | |
| WORKSPACE_NAME | 打開的工作區(qū)或文件夾的名稱 | |
| WORKSPACE_FOLDER | 打開的工作區(qū)或文件夾的路徑 | |
| CURSOR_INDEX | 基于零索引的游標(biāo)編號(hào) | |
| CURSOR_NUMBER | 基于單索引的游標(biāo)編號(hào) | |
| 時(shí)間相關(guān) | CURRENT_YEAR | 本年度 |
| CURRENT_YEAR_SHORT | 當(dāng)年的最后兩位數(shù)字 | |
| CURRENT_MONTH | 兩位數(shù)字的月份（例如“02”） | |
| CURRENT_MONTH_NAME | 月份的全名（例如“July”） | |
| CURRENT_MONTH_NAME_SHORT | 月份的簡(jiǎn)短名稱（例如“Jul”） | |
| CURRENT_DATE | 以兩位數(shù)字表示的月份中的某一天（例如“08”） | |
| CURRENT_DAY_NAME | 日期的名稱（例如“星期一”） | |
| CURRENT_DAY_NAME_SHORT | 當(dāng)天的簡(jiǎn)短名稱（例如“Mon”） | |
| CURRENT_HOUR24 | 小時(shí)制格式的當(dāng)前小時(shí) | |
| CURRENT_MINUTE | 兩位數(shù)的當(dāng)前分鐘數(shù) | |
| CURRENT_SECOND | 當(dāng)前秒數(shù)為兩位數(shù) | |
| CURRENT_SECONDS_UNIX | 自 Unix 紀(jì)元以來的秒數(shù) | |
| CURRENT_TIMEZONE_OFFSET | 當(dāng)前 UTC 時(shí)區(qū)偏移量為 +HH 或者 -HH (例如“-07:00”) | |
| 其他 | RANDOM6 | 6 個(gè)隨機(jī) Base-10 數(shù)字 |
| RANDOM_HEX6 | 6 個(gè)隨機(jī) Base-16 數(shù)字 | |
| UUID | 第四版UUID |
注意：當(dāng)自定義映射值未設(shè)置或者不可用時(shí)，將直接顯示變量占位符
自定義映射
擴(kuò)展初始化時(shí)，插入了三個(gè)常用的自定義映射，你可以自由更改或添加自定義映射。
示例：
代碼片段內(nèi)容
value of 'AUTHOR' is: ${AUTHOR}
value of 'COMPANY' is: ${COMPANY}
value of 'MAIL' is: ${MAIL}
value of 'FOOBAR' (non-exist) is: ${FOOBAR}插入代碼片段后，顯示如下：
value of 'AUTHOR' is: 林曉lx
value of 'COMPANY' is: my-company
value of 'MAIL' is: jevonsflash@qq.com
value of 'FOOBAR' (non-exist) is: ${FOOBAR}與自定義映射一樣，當(dāng)默認(rèn)映射值未設(shè)置或者不可用時(shí)，將直接顯示變量占位符
自動(dòng)完成
代碼片段可在編輯器中顯示自動(dòng)提示和補(bǔ)全內(nèi)容。
快速開始
通過點(diǎn)擊上方橫幅上的安裝按鈕安裝 Snippet Craft，或在 VS Code 的擴(kuò)展側(cè)邊欄中搜索 Snippet Craft 進(jìn)行安裝。
更新內(nèi)容
| Date | Version | Content |
|---|---|---|
| V0.1.0 | 2024-8-22 | 初始版本 |
Todo 支持更多語言 使用monaco-editor 導(dǎo)入導(dǎo)出功能作者信息
作者：林小
郵箱：jevonsflash@qq.com
License
The MIT License (MIT)
項(xiàng)目地址
相關(guān)文章
JavaScript?設(shè)計(jì)模式中的代理模式詳解
這篇文章主要介紹了JavaScript?設(shè)計(jì)模式中的代理模式詳解,代理模式，代理是一個(gè)對(duì)象，它可以用來控制對(duì)另一個(gè)對(duì)象的訪問,更多相關(guān)內(nèi)容需要的朋友可以參考一下2022-07-07
Map與WeakMap類型在JavaScript中的使用詳解
這篇文章主要介紹了Map與WeakMap類型在JavaScript中的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
Cannon.js可以在多種瀏覽器上運(yùn)行,并且支持移動(dòng)設(shè)備和桌面設(shè)備,這使得開發(fā)者可以輕松地在各種平臺(tái)上開發(fā)和運(yùn)行物理模擬應(yīng)用程序,這篇文章主要介紹了Three?cannon-es?基礎(chǔ)使用,需要的朋友可以參考下2024-05-05
List Information About the Binary Files Used by an Applicati
List Information About the Binary Files Used by an Application...2007-06-06
在layui中對(duì)table中的數(shù)據(jù)進(jìn)行判斷(0、1)轉(zhuǎn)換為提示信息的方法
今天小編就為大家分享一篇在layui中對(duì)table中的數(shù)據(jù)進(jìn)行判斷(0、1)轉(zhuǎn)換為提示信息的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS實(shí)現(xiàn)的3D拖拽翻頁效果,通過鼠標(biāo)事件結(jié)合時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素實(shí)現(xiàn)拖拽翻頁的效果,需要的朋友可以參考下2015-10-10
javascript實(shí)現(xiàn)文字無縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)文字無縫滾動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
下面小編就為大家?guī)硪黄鉀Q微信二次分享不顯示摘要和圖片的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
在javascript當(dāng)中每一個(gè)function都是一個(gè)對(duì)象，所以在這個(gè)里var temp=this 指的是function當(dāng)前的對(duì)象。this是Javascript語言的一個(gè)關(guān)鍵字。它代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用。2015-05-05
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)電商放大鏡效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08