如何把vscode snippets用在項目中提高開發效率？下面本篇文章帶大家了解一下vscode中的snippets，介紹一下使用它提高項目開發效率的方法，希望對大家有所幫助！
code snippets 是代碼片段的意思，是 vscode 提供的根據某字符串快速補全一段代碼的功能，可以提高寫代碼的效率。【推薦學習：《vscode》】
vscode 的 snippets 是可以隨項目共享的，多人開發一個項目的時候，可以維護項目級別的 snippets 并且通過 git 共享，來提高項目開發效率。
下面我們來詳細了解下 snippets。
snippets 的功能
snippets 配置的格式如下：
{ ??"For?Loop":?{ ????"prefix":?["for",?"for-const"], ????"body":?["for?(const?${2:element}?of?${1:array})?{",?" $0",?"}"], ????"description":?"A?for?loop." ??} }
- prefix 是觸發 snippets 的前綴，可以通過數組指定多個
- body 是填入到編輯器的內容
- description 是 snippets 的描述
其中 body 部分可以通過 ${} 的方式指定光標位置、順序、占位字符串、可用的值等，有 5 種語法，我們分別來看一下：
光標跳轉：
{ ?"測試":?{ ??"scope":?"javascript,typescript", ??"prefix":?"test", ??"body":?[ ???"$1??xxxx", ???"yyyy?$2", ??], ??"description":?"光標跳轉" ?} }
{ ?"測試":?{ ??"scope":?"javascript,typescript", ??"prefix":?"test", ??"body":?[ ???"$1??xxxx?$1", ??], ??"description":?"多光標" ?} }
{ ?"測試":?{ ??"scope":?"javascript,typescript", ??"prefix":?"test", ??"body":?[ ???"${1:aaa}??xxxx", ???"yyyy?${2:bbb}", ??], ??"description":?"光標跳轉" ?} }
{ ?"測試":?{ ??"scope":?"javascript,typescript", ??"prefix":?"test", ??"body":?[ ??"${1|神說要有光,卡頌|}" ??], ??"description":?"可選值" ?} }
{ ?"測試":?{ ??"scope":?"javascript,typescript", ??"prefix":?"test", ??"body":?[ ??"當前文件：?$TM_FILENAME", ??"當前日期：?$CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE" ??], ??"description":?"變量" ?} }
${TM_FILENAME/(.*).[a-z]+/${1:/upcase}/i}復制代碼
{ ????"填入文件名":?{ ????????????"scope":?"javascript,typescript", ????????????"prefix":?"filename", ????????????"body":?[ ????????????????????"${TM_FILENAME/(.*).[a-z]+/${1:/upcase}/i}" ????????????], ????????????"description":?"文件名" ????} }
{ ??"contributes":?{ ????"snippets":?[ ??????{ ????????"language":?"javascript", ????????"path":?"./snippets.json" ??????} ????] ??} }
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
