.jpg)
本篇文章帶大家了解一下vscode中的代碼片段，介紹一下代碼塊種類，以及自定義代碼片段的方法，希望對(duì)大家有所幫助！
一、前言
較為全的指南：
《VS Code 代碼片段完全入門指南》https://chinese.freecodecamp.org/news/definitive-guide-to-snippets-visual-studio-code/
一鍵生成代碼塊工具：https://snippet-generator.app/
windows系統(tǒng): 文件 > 首選項(xiàng) > 用戶代碼片段 Mac系統(tǒng): Code > 首選項(xiàng) > 用戶片段
二、創(chuàng)建
代碼塊種類
-
全局代碼片段（每種語言環(huán)境下都能觸發(fā)代碼塊）：新建全局代碼片段會(huì)在?snippets?目錄下生成?.code-snippets?為后綴的配置文件；【推薦學(xué)習(xí)：《vscode》】
-
針對(duì)特定語言類型（只能在對(duì)應(yīng)語言環(huán)境下才能觸發(fā)）：而新建對(duì)應(yīng)語言的代碼片段會(huì)生成?對(duì)應(yīng)語言 + .json?的配置文件；
-
為某一工作區(qū)（項(xiàng)目）創(chuàng)建的代碼塊；
新建
輸入 react 自動(dòng)創(chuàng)建一個(gè) react.code-snippets 文件，全局創(chuàng)建則在本機(jī)文檔目錄，項(xiàng)目創(chuàng)建則在項(xiàng)目目錄內(nèi)；
{ ??//?Place?your?全局?snippets?here.?Each?snippet?is?defined?under?a?snippet?name?and?has?a?scope,?prefix,?body?and ??//?description.?Add?comma?separated?ids?of?the?languages?where?the?snippet?is?applicable?in?the?scope?field.?If?scope ??//?is?left?empty?or?omitted,?the?snippet?gets?applied?to?all?languages.?The?prefix?is?what?is ??//?used?to?trigger?the?snippet?and?the?body?will?be?expanded?and?inserted.?Possible?variables?are: ??//?$1,?$2?for?tab?stops,?$0?for?the?final?cursor?position,?and?${1:label},?${2:another}?for?placeholders. ??//?Placeholders?with?the?same?ids?are?connected. ??//?Example: ??//?"Print?to?console":?{ ??//??"scope":?"javascript,typescript", ??//??"prefix":?"log", ??//??"body":?[ ??//????"console.log('$1');", ??//????"$2" ??//??], ??//??"description":?"Log?output?to?console" ??//?} }
創(chuàng)建了一個(gè) dva 的模版：
{ ??//?Place?your?全局?snippets?here.?Each?snippet?is?defined?under?a?snippet?name?and?has?a?scope,?prefix,?body?and ??//?description.?Add?comma?separated?ids?of?the?languages?where?the?snippet?is?applicable?in?the?scope?field.?If?scope ??//?is?left?empty?or?omitted,?the?snippet?gets?applied?to?all?languages.?The?prefix?is?what?is ??//?used?to?trigger?the?snippet?and?the?body?will?be?expanded?and?inserted.?Possible?variables?are: ??//?$1,?$2?for?tab?stops,?$0?for?the?final?cursor?position,?and?${1:label},?${2:another}?for?placeholders. ??//?Placeholders?with?the?same?ids?are?connected. ??//?Example: ??//?"Print?to?console":?{ ??//??"scope":?"javascript,typescript", ??//??"prefix":?"log", ??//??"body":?[ ??//????"console.log('$1');", ??//????"$2" ??//??], ??//??"description":?"Log?output?to?console" ??//?} ??//?dva?基礎(chǔ)布局結(jié)構(gòu) ??"dva-basic":?{ ????"prefix":?"lll_dva_basic", ????"body":?[ ??????"import?{?Effect,?Reducer,?Subscription?}?from?'umi';", ??????"", ??????"export?interface?${1:xxxxModelType}?{", ??????"??namespace:?'${2:xxxx}';", ??????"??state:?${3:IxxxxModelState};", ??????"??effects:?{", ??????"????initDataEffect:?Effect;", ??????"??};", ??????"??reducers:?{", ??????"????updateState:?Reducer;", ??????"??};", ??????"??subscriptions:?{?setup:?Subscription?};", ??????"}", ??????"", ??????"export?interface?${3:IxxxxModelState}?{", ??????"??${4:textData}:?any;", ??????"}", ??????"", ??????"const?state:?${3:IxxxxModelState}?=?{", ??????"??${4:textData}:?null,", ??????"};", ??????"", ??????"const?QualificationSetting:?${1:xxxxModelType}?=?{", ??????"??namespace:?'${2:xxxx}',", ??????"??state:?state,", ??????"", ??????"??effects:?{", ??????"????//?初始化數(shù)據(jù)", ??????"????*initDataEffect({?payload?},?{?select,?call,?put?})?{", ??????"??????try?{", ??????"??????}?catch?(error)?{}", ??????"????},", ??????"??},", ??????"", ??????"??reducers:?{", ??????"????updateState(state,?{?data?})?{", ??????"??????return?{?...state,?...data?};", ??????"????},", ??????"??},", ??????"", ??????"??subscriptions:?{", ??????"????setup({?dispatch,?history?})?{", ??????"??????return?history.listen(({?pathname?})?=>?{", ??????"????????if?(pathname?===?'/')?{", ??????"??????????//?初始化數(shù)據(jù)", ??????"??????????dispatch({?type:?'initDataEffect'?});", ??????"????????}", ??????"??????});", ??????"????},", ??????"??},", ??????"};", ??????"", ??????"export?default?QualificationSetting;", ??????"" ????], ????"description":?"dva-basic" ??}? }
字段解釋
-
“dva-basic” 是代碼片段的名字。如果沒有?description，它就會(huì)出現(xiàn)在智能建議的列表里。
-
prefix 屬性定義了代碼片段的觸發(fā)文本。它可以是一個(gè)字符串或者一個(gè)字符串?dāng)?shù)組（如果你想有多個(gè)觸發(fā)文本）。前綴的子字符串同樣可以觸發(fā)，在我們的例子里，輸入”h1″一樣能匹配到我們的代碼片段。
-
body 屬性代表了要插入編輯器的內(nèi)容。它是一個(gè)字符串?dāng)?shù)組，可能一行或者多行。在插入之前會(huì)被合并成一段。
-
description 屬性提供了代碼片段的更多描述。它是可選的。
-
scope 屬性允許你指定特定的語言類型，你可以使用逗號(hào)來分割多種語言。它也是可選的。當(dāng)然，對(duì)于特定于語言的代碼片段文件來說是多余的。
Tab Stops （使用 tabs 切換，還有很多用法自行挖掘，比如可選項(xiàng)）
Tab stops由? **
.png)
