站長(zhǎng)資訊網(wǎng)本文介紹的是 VSCode Snippet 插件，一種代碼片段配置插件，可以節(jié)省你寫(xiě)樣板代碼的時(shí)間。
你可能之前學(xué)習(xí)過(guò) VSCode Snippet 插件，知道它的作用也學(xué)習(xí)了配置的語(yǔ)法，但是你想不到落地使用的場(chǎng)景。本文也將解決你的這個(gè)疑惑～
本文將介紹 VSCode Snippet 的使用介紹、配置語(yǔ)法、引入方式和使用場(chǎng)景?！就扑]學(xué)習(xí)：vscode教程、編程教學(xué)】
VSCode Snippet 插件使用簡(jiǎn)介
（圖片來(lái)自于 VSCode 官網(wǎng)）
如 gif 圖所示，當(dāng)你想編寫(xiě)一段 ajax 代碼時(shí)，只需要在編輯器里輸入 ajax，再點(diǎn)擊下 Tab 鍵，就會(huì)為你自動(dòng)生成 ajax 代碼的模板。
Snippet 支持我們配置自己想要的任意代碼片段，因此我們可以把項(xiàng)目中常見(jiàn)的代碼片段抽出來(lái)，提高編程效率。同時(shí)可以共享給所在的團(tuán)隊(duì)，提高整個(gè)團(tuán)隊(duì)的編程效率。
Snippet 配置語(yǔ)法
我們拿 antd 組件庫(kù)舉例，比如我們想配置 antd 的 Snippet 代碼片段：
Antd Selet 組件代碼如下：
<Select defaultValue="lucy" style={{ width: 100 }} onChange={handleChange} options={[ { value: 'jack', label: 'Jack', }, { value: 'lucy', label: 'Lucy', } ]} />
對(duì)應(yīng)的 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 是觸發(fā) snippets 的前綴，可以通過(guò)數(shù)組指定多個(gè)
-
body 是填入到編輯器的內(nèi)容
-
description 是 snippets 的描述
body 部分可以通過(guò) ${} 的方式指定光標(biāo)位置、順序、占位字符串、可用的值等
${} 語(yǔ)法簡(jiǎn)介：
-
光標(biāo)跳轉(zhuǎn)：
2：
-
占位符：${1: placeholder}
-
可選值：${1|text1,text2,text3|}
-
變量：$變量名
在模版可編輯位置填入內(nèi)容的時(shí)候，有的時(shí)候需要用到選中的值、剪貼板的值、文件名、日期等，這些信息通過(guò) snippets 中支持的變量來(lái)取。
比如：* TM_FILENAME: 文件名* TM_CURRENT_LINE: 當(dāng)前行的內(nèi)容* CLIPBOARD: 剪貼板內(nèi)容* WORKSPACE_NAME：workspace 的名字* WORKSPACE_PATH：workspace 的路徑* CURRENT_YEAR：當(dāng)前年* CURRENT_MONTH：當(dāng)前月* CURRENT_DATE：當(dāng)前日* RANDOM: 隨機(jī)數(shù)* RANDOM_HEX: 6 位隨機(jī) 16 進(jìn)制數(shù)* UUID: 唯一 id
可以取這些變量的值來(lái)填入到光標(biāo)位置，方式就是使用
CURRENT_YEAR 的方式。
Snippets 引入方式：
-
方式一：直接在項(xiàng)目中生成 .vscode/xxx.code-snippets 文件，格式為本文描述的 JSON 格式，語(yǔ)法如上述介紹。操作方式：
-
方式二：發(fā)布 VS Code 插件：
Sinppets 插件使用場(chǎng)景：
-
使用一些開(kāi)源組件庫(kù)可以找尋是否已經(jīng)存在 Snippet 插件，例如 antd 的 snippet 插件：github.com/bang88/antd…
-
如果你的項(xiàng)目使用了某個(gè)開(kāi)源的框架/組件庫(kù)，這個(gè)開(kāi)源項(xiàng)目沒(méi)有配套的 Snippets 插件，那么已經(jīng)學(xué)會(huì)封裝 Snippets 插件的你，快快動(dòng)起勤勞的小手，是時(shí)候?yàn)槟愕膱F(tuán)隊(duì)或者社區(qū)做些貢獻(xiàn)啦～
-
如果你的項(xiàng)目中，基于 antd 等 UI 組件庫(kù)，又封裝了一些自己業(yè)務(wù)的公共組件，那么可以給這些業(yè)務(wù)相關(guān)的公共的組件封裝一個(gè) Snippets 插件，提高你團(tuán)隊(duì)的效率
-
除了 JSX 類(lèi)的組件，一些常用的工具函數(shù)也可以抽象 Snippets 插件代碼片段
