VSCode新手入門之淺析程式碼片段，看看建立方法
一、前言
較為全的指南：
《VS Code 程式碼片段完全入門指南》
https://chinese.freecodecamp.org/news/definitive-guide-to-snippets-visual-studio-code/
一鍵生成程式碼塊工具：https://snippet-generator.app/
Windows系統: 檔案 > 偏好設定 > 使用者程式碼片段 Mac系統: Code > 偏好設定 > 使用者片段
二、建立
程式碼塊種類
全域性程式碼片段（每種語言環境下都能觸發程式碼塊）：新建全域性程式碼片段會在
snippets目錄下生成.code-snippets為字尾的組態檔；【推薦學習：《》】針對特定語言型別（只能在對應語言環境下才能觸發）：而新建對應語言的程式碼片段會生成
對應語言 + .json的組態檔；為某一工作區（專案）建立的程式碼塊；
新建
輸入 react 自動建立一個 react.code-snippets 檔案，全域性建立則在本機檔案目錄，專案建立則在專案目錄內；
{
// 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 的模版：
{
// 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 基礎佈局結構
"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<${3:IxxxxModelState}>;",
" };",
" 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: {",
" // 初始化資料",
" *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 === '/') {",
" // 初始化資料",
" dispatch({ type: 'initDataEffect' });",
" }",
" });",
" },",
" },",
"};",
"",
"export default QualificationSetting;",
""
],
"description": "dva-basic"
}ƒ
}欄位解釋
"dva-basic" 是程式碼片段的名字。如果沒有
description，它就會出現在智慧建議的列表裡。prefix屬性定義了程式碼片段的觸發文字。它可以是一個字串或者一個字串陣列（如果你想有多個觸發文字）。字首的子字串同樣可以觸發，在我們的例子裡，輸入"h1"一樣能匹配到我們的程式碼片段。body屬性代表了要插入編輯器的內容。它是一個字串陣列，可能一行或者多行。在插入之前會被合併成一段。description屬性提供了程式碼片段的更多描述。它是可選的。scope屬性允許你指定特定的語言型別，你可以使用逗號來分割多種語言。它也是可選的。當然，對於特定於語言的程式碼片段檔案來說是多餘的。
Tab Stops （使用 tabs 切換，還有很多用法自行挖掘，比如可選項）
Tab stops由 **1。2代表了第二個位置，以此類推。$0`代表退出程式碼片段，以及最後遊標停留的位置；
多個 tab 停留，使用相同序號即可；
三、後記
本文章是快速入門指南；
深入學習可參考前言中的較為完整的指南；
可使用前言中的快速生成工具，然後再完善；
更多關於VSCode的相關知識，請存取：！！
以上就是VSCode新手入門之淺析程式碼片段，看看建立方法的詳細內容，更多請關注TW511.COM其它相關文章！