這篇文章主要介紹“VSCode中Snippet插件如何使用”,在日常操作中,相信很多人在VSCode中Snippet插件如何使用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”VSCode中Snippet插件如何使用”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
創新互聯建站專注于企業網絡營銷推廣、網站重做改版、永安網站定制設計、自適應品牌網站建設、HTML5、商城網站建設、集團公司官網建設、外貿網站制作、高端網站制作、響應式網頁設計等建站業務,價格優惠性價比高,為永安等各大城市提供網站開發制作服務。
當你想編寫一段 ajax 代碼時,只需要在編輯器里輸入 ajax,再點擊下 Tab 鍵,就會為你自動生成 ajax 代碼的模板。
Snippet 支持我們配置自己想要的任意代碼片段,因此我們可以把項目中常見的代碼片段抽出來,提高編程效率。同時可以共享給所在的團隊,提高整個團隊的編程效率。
我們拿 antd 組件庫舉例,比如我們想配置 antd 的 Snippet 代碼片段:
Antd Selet 組件代碼如下:
<Select
defaultValue="lucy"
style={{ width: 100 }}
onChange={handleChange}
options={[
{
value: 'jack',
label: 'Jack',
},
{
value: 'lucy',
label: 'Lucy',
}
]}
/>
對應的 Snippet 配置代碼如下:
{
"antd/Select": {
"prefix": ["Select"],
"body": [
"<Select",
" defaultValue={$1}",
" style={{ width: ${2|100,200,300,400|} }}",
" onChange={${3:handleChange}}",
" options={[",
" {",
" value: $4,",
" label: $5,",
" }",
" ]}",
"/>"
],
"description": "Antd Select UI 組件"
}
}
prefix 是觸發 snippets 的前綴,可以通過數組指定多個
body 是填入到編輯器的內容
description 是 snippets 的描述
body 部分可以通過 ${} 的方式指定光標位置、順序、占位字符串、可用的值等
光標跳轉:12:
占位符:${1: placeholder}
可選值:${1|text1,text2,text3|}
變量:$變量名
在模版可編輯位置填入內容的時候,有的時候需要用到選中的值、剪貼板的值、文件名、日期等,這些信息通過 snippets 中支持的變量來取。
比如:* TM_FILENAME: 文件名* TM_CURRENT_LINE: 當前行的內容* CLIPBOARD: 剪貼板內容* WORKSPACE_NAME:workspace 的名字* WORKSPACE_PATH:workspace 的路徑* CURRENT_YEAR:當前年* CURRENT_MONTH:當前月* CURRENT_DATE:當前日* RANDOM: 隨機數* RANDOM_HEX: 6 位隨機 16 進制數* UUID: 唯一 id
可以取這些變量的值來填入到光標位置,方式就是使用 TM_FILENAME、CURRENT_YEAR 的方式。
方式一:直接在項目中生成 .vscode/xxx.code-snippets 文件,格式為本文描述的 JSON 格式,語法如上述介紹。操作方式:
方式二:發布 VS Code 插件
使用一些開源組件庫可以找尋是否已經存在 Snippet 插件,例如 antd 的 snippet 插件:github.com/bang88/antd…
如果你的項目使用了某個開源的框架/組件庫,這個開源項目沒有配套的 Snippets 插件,那么已經學會封裝 Snippets 插件的你,快快動起勤勞的小手,是時候為你的團隊或者社區做些貢獻啦~
如果你的項目中,基于 antd 等 UI 組件庫,又封裝了一些自己業務的公共組件,那么可以給這些業務相關的公共的組件封裝一個 Snippets 插件,提高你團隊的效率
除了 JSX 類的組件,一些常用的工具函數也可以抽象 Snippets 插件代碼片段
到此,關于“VSCode中Snippet插件如何使用”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注創新互聯網站,小編會繼續努力為大家帶來更多實用的文章!
當前標題:VSCode中Snippet插件如何使用
地址分享:http://vcdvsql.cn/article18/gdgogp.html
成都網站建設公司_創新互聯,為您提供做網站、、定制網站、網站維護、關鍵詞優化、微信小程序
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯