在VS?Code中使用Snippet?Craft擴(kuò)展提高編碼效率的過(guò)程詳解
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)替換的變量。
代碼片段中通過(guò)設(shè)置占位符${VAR_NAME}，在插入代碼片段時(shí)，將自動(dòng)替換為全局變量中的值。可用的映射如下表：
| 類別 | 變量 | 描述 |
|---|---|---|
| 文件和編輯器相關(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ì)于打開(kāi)的工作區(qū)或文件夾） | |
| CLIPBOARD | 剪貼板的內(nèi)容 | |
| WORKSPACE_NAME | 打開(kāi)的工作區(qū)或文件夾的名稱 | |
| WORKSPACE_FOLDER | 打開(kāi)的工作區(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ì)元以來(lái)的秒數(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)容。
快速開(kāi)始
通過(guò)點(diǎn)擊上方橫幅上的安裝按鈕安裝 Snippet Craft，或在 VS Code 的擴(kuò)展側(cè)邊欄中搜索 Snippet Craft 進(jìn)行安裝。
更新內(nèi)容
| Date | Version | Content |
|---|---|---|
| V0.1.0 | 2024-8-22 | 初始版本 |
Todo 支持更多語(yǔ)言 使用monaco-editor 導(dǎo)入導(dǎo)出功能作者信息
作者：林小
郵箱：jevonsflash@qq.com
License
The MIT License (MIT)
項(xiàng)目地址
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js+canvas代碼雨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
bootstrap滾動(dòng)監(jiān)控器使用方法解析
這篇文章主要為大家詳細(xì)解析了bootstrap滾動(dòng)監(jiān)控器使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了JavaScript中常見(jiàn)的幾種獲取元素的方式,需要的朋友可以參考下2023-05-05
在網(wǎng)站開(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)調(diào)用到地圖，百度地圖JavaScript API可幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強(qiáng)的地圖應(yīng)用，本文就詳細(xì)的介紹一下，感興趣的可以了解一下2021-07-07
javascript實(shí)現(xiàn)檢驗(yàn)的各種規(guī)則
這篇文章主要介紹了javascript實(shí)現(xiàn)檢驗(yàn)的各種規(guī)則,涉及javascript針對(duì)手機(jī)號(hào)、郵箱、網(wǎng)址、漢字及圖片等相關(guān)檢測(cè)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
js實(shí)現(xiàn)表格數(shù)據(jù)搜索
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)表格數(shù)據(jù)搜索，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
實(shí)際上，setTimeout和setInterval的語(yǔ)法相同。它們都有兩個(gè)參數(shù)，一個(gè)是將要執(zhí)行的代碼字符串，還有一個(gè)是以毫秒為單位的時(shí)間間隔，當(dāng)過(guò)了那個(gè)時(shí)間段之后就將執(zhí)行那段代碼。不過(guò)這兩個(gè)函數(shù)還是有區(qū)別的2015-06-06
最近開(kāi)始研究JavaScript的簡(jiǎn)寫方法，下面就是有關(guān)判斷為空的簡(jiǎn)寫方法2014-02-02
2008-01-01
這篇文章主要介紹了淺談Webpack下多環(huán)境配置的思路，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06