這篇文章主要介紹“VSCode中Snippet插件如何使用”，在日常操作中，相信很多人在VSCode中Snippet插件如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”VSCode中Snippet插件如何使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)建站專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、永安網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為永安等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

VSCode Snippet 插件使用簡介

當(dāng)你想編寫一段 ajax 代碼時(shí)，只需要在編輯器里輸入 ajax，再點(diǎn)擊下 Tab 鍵，就會(huì)為你自動(dòng)生成 ajax 代碼的模板。

Snippet 支持我們配置自己想要的任意代碼片段，因此我們可以把項(xiàng)目中常見的代碼片段抽出來，提高編程效率。同時(shí)可以共享給所在的團(tuán)隊(duì)，提高整個(gè)團(tuán)隊(duì)的編程效率。

Snippet 配置語法

我們拿 antd 組件庫舉例，比如我們想配置 antd 的 Snippet 代碼片段：

Antd Selet 組件代碼如下：

<Select
  defaultValue="lucy"
  style={{ width: 100 }}
  onChange={handleChange}
  options={[
    {
      value: 'jack',
      label: 'Jack',
    },
    {
      value: 'lucy',
      label: 'Lucy',
    }
  ]}
/>

對應(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 的前綴，可以通過數(shù)組指定多個(gè)

• body 是填入到編輯器的內(nèi)容

• description 是 snippets 的描述

body 部分可以通過 ${} 的方式指定光標(biāo)位置、順序、占位字符串、可用的值等

${} 語法簡介：

• 光標(biāo)跳轉(zhuǎn)：$1$12：

• 占位符：${1: placeholder}

• 可選值：${1|text1,text2,text3|}

• 變量：$變量名

  在模版可編輯位置填入內(nèi)容的時(shí)候，有的時(shí)候需要用到選中的值、剪貼板的值、文件名、日期等，這些信息通過 snippets 中支持的變量來取。

  比如：*   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

  可以取這些變量的值來填入到光標(biāo)位置，方式就是使用 TM_FILENAME、CURRENT_YEAR 的方式。

Snippets 引入方式：

• 方式一：直接在項(xiàng)目中生成 .vscode/xxx.code-snippets 文件，格式為本文描述的 JSON 格式，語法如上述介紹。操作方式：

• 方式二：發(fā)布 VS Code 插件

Sinppets 插件使用場景：

• 使用一些開源組件庫可以找尋是否已經(jīng)存在 Snippet 插件，例如 antd 的 snippet 插件：github.com/bang88/antd…

• 如果你的項(xiàng)目使用了某個(gè)開源的框架/組件庫，這個(gè)開源項(xiàng)目沒有配套的 Snippets 插件，那么已經(jīng)學(xué)會(huì)封裝 Snippets 插件的你，快快動(dòng)起勤勞的小手，是時(shí)候?yàn)槟愕膱F(tuán)隊(duì)或者社區(qū)做些貢獻(xiàn)啦～

• 如果你的項(xiàng)目中，基于 antd 等 UI 組件庫，又封裝了一些自己業(yè)務(wù)的公共組件，那么可以給這些業(yè)務(wù)相關(guān)的公共的組件封裝一個(gè) Snippets 插件，提高你團(tuán)隊(duì)的效率

• 除了 JSX 類的組件，一些常用的工具函數(shù)也可以抽象 Snippets 插件代碼片段

到此，關(guān)于“VSCode中Snippet插件如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

當(dāng)前標(biāo)題：VSCode中Snippet插件如何使用
地址分享：http://www.rwnh.cn/article18/gdgogp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、、定制網(wǎng)站、網(wǎng)站維護(hù)、關(guān)鍵詞優(yōu)化、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)