VS Code 程式碼片段指南: 從基礎到高階技巧

控心つcrazy發表於2024-08-30

前言

“

系列首發於公眾號『非同質前端札記』 ，若不想錯過更多精彩內容，請“星標”一下，敬請關注公眾號最新訊息。

今天咱們來聊聊 VS Code 裡的自定義程式碼片段。

這玩意兒簡直是提升編碼效率的神器, 用好了能讓你敲程式碼更方便!

不管你是剛入行的菜鳥還是身經百戰的老兵,這篇攻略都能讓你在程式碼片段的世界裡玩得飛起。

繫好安全帶,我們開始起飛啦!

程式碼片段是啥玩意兒?

簡單說, 程式碼片段就是一些預先定義好的程式碼模板。你只需要敲幾個字母,噌的一下,一大段程式碼就蹦出來了。

比如說, 你可以把一個常用的函式結構設定成程式碼片段,下次需要的時候,只要輸入一個簡短的觸發詞,瞬間就能生成整個函式框架。

為啥要用這玩意兒?

  1. 省時間: 再也不用重複敲那些煩人的樣板程式碼了。
  2. 少出錯: 預先定義好的程式碼片段能避免一些低階錯誤。
  3. 保持一致: 團隊可以共用一套程式碼片段,保證程式碼風格統一。
  4. 提高效率: 快速生成複雜的程式碼結構,讓你專注於真正的邏輯實現。

怎麼整一個自己的程式碼片段?

來, 跟我一步步來:

  1. 開啟 VS Code,按下 Ctrl+Shift+P(Mac 上是 Cmd+Shift+P)。
  2. 輸入 "snippets",選擇 Preferences: Configure User Snippets。
  3. 選你要建立片段的語言,比如 JavaScript 。
  4. VS Code 會開啟一個 JSON 檔案,這就是你的程式碼片段配置檔案。

來看個例子:

{
    "Console log": {
        "prefix": "clog",
        "body": ["console.log('$1');", "$2"],
        "description": "列印日誌到控制檯"
    }
}

這裡的 "Console log" 是這個片段的名字,"prefix" 是觸發詞,"body" 是實際的程式碼內容,"description" 是描述。

進階技巧

好了, 基礎的東西我們搞定了。

現在來點更進階的吧!

1. 佔位符和製表位

佔位符是程式碼片段中最基本也是最強大的功能之一。它們不僅可以讓你在插入片段後快速跳轉到特定位置, 還能實現更多花樣。

基本佔位符:

  • $1, $2, $3 等:這些是最簡單的佔位符。插入片段後,游標會先停在 $1 的位置,按 Tab 鍵後跳到 $2,以此類推。
  • $0:這是最後一個製表位。無論你定義了多少個佔位符,$0 永遠是終點站。

來個例子:

"Basic Function": {
  "prefix": "func",
  "body": [
    "function ${1:functionName}(${2:params}) {",
    "\t$0",
    "}"
  ],
  "description": "建立一個基本函式"
}

佔位符中的預設值: 你可以在佔位符中提供預設值,格式是 ${1:defaultValue} 。

"Console Log": {
  "prefix": "clog",
  "body": "console.log('${1:你好,世界!}');",
  "description": "列印日誌,帶預設值"
}

佔位符中的選擇項: 你還可以在佔位符中提供多個選項,讓使用者選擇。格式是 ${1|option1,option2,option3|} 。

"Variable Declaration": {
  "prefix": "vard",
  "body": "${1|const,let,var|} ${2:變數名} = ${3:值};",
  "description": "宣告變數,可選擇const/let/var"
}

2. 變數

VS Code 提供了不少內建變數,可以在程式碼片段中使用。這些變數會在插入片段時被實際值替換。

常用內建變數:

  • $TM_FILENAME: 當前檔案的檔名
  • $TM_FILENAME_BASE: 當前檔案的檔名(不含副檔名)
  • $TM_DIRECTORY: 當前檔案所在的目錄
  • $TM_FILEPATH: 當前檔案的完整檔案路徑
  • $CLIPBOARD: 當前剪貼簿中的內容
  • $WORKSPACE_NAME: 開啟的工作區的名稱

日期和時間變數:

  • $CURRENT_YEAR: 當前年份
  • $CURRENT_MONTH: 當前月份(兩位數格式)
  • $CURRENT_DATE: 當前日期(兩位數格式)
  • $CURRENT_HOUR: 當前小時(24 小時制)
  • $CURRENT_MINUTE: 當前分鐘
  • $CURRENT_SECOND: 當前秒數

來個實用的例子:

"File Header": {
  "prefix": "header",
  "body": [
    "/**",
    " * 檔名: $TM_FILENAME",
    " * 建立時間: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",
    " * 作者: ${1:$TM_USERNAME}",
    " * 描述: ${2:這裡寫檔案描述}",
    " */"
  ],
  "description": "插入檔案頭註釋"
}
  • 使用結果：
/**
 * 檔名: app.js
 * 建立時間: 2023-08-29 15:30:00
 * 作者: YourUsername
 * 描述: 這裡寫檔案描述
 */

3. 轉換

你還可以對變數和佔位符的值進行各種花式操作。這些轉換可以改變文字的大小寫、格式等。

案例轉換:

  • ${VAR/(.*)/${1:/upcase}}:轉換為大寫
  • ${VAR/(.*)/${1:/downcase}}:轉換為小寫
  • ${VAR/(.*)/${1:/pascalcase}}:轉換為帕斯卡命名法(PascalCase)
  • ${VAR/(.*)/${1:/camelcase}}:轉換為駝峰命名法(camelCase)

來個實用的例子:

"React Component": {
  "prefix": "rcomp",
  "body": [
    "import React from 'react';",
    "",
    "const ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} = () => {",
    "\treturn (",
    "\t\t<div>",
    "\t\t\t$0",
    "\t\t</div>",
    "\t);",
    "};",
    "",
    "export default ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/};"
  ],
  "description": "建立 React 元件,自動使用檔名作為元件名"
}
  • 使用結果：
import React from 'react';

const App = () => {
    return <div>$0</div>;
};

export default App;

這個例子會自動把檔名轉換為 PascalCase,完美符合 React 元件命名規範。

4. 巢狀佔位符

你可以在一個佔位符內部再塞一個佔位符,這就是巢狀佔位符。這招能讓你建立更復雜的互動式程式碼片段。

來個例子:

"Conditional Statement": {
  "prefix": "ifelse",
  "body": [
    "if (${1:條件}) {",
    "\t${2:// 條件成立時的程式碼}",
    "} else {",
    "\t${2/^(.*)$/$1/}",
    "}"
  ],
  "description": "建立 if-else 語句,自動複製 if 塊的註釋到 else 塊"
}
  • 使用結果：
if (條件) {
    // 條件成立時的程式碼
} else {
    // 條件成立時的程式碼
}

這個例子中,無論你在第二個佔位符中輸入什麼,都會被自動複製到 else 塊中。挺智慧的,是吧?

實用的程式碼片段例子

光說不練假把式，來看看實際應用吧!

  1. React Hooks 元件:
"React Hooks Component": {
  "prefix": "rhc",
  "body": [
    "import React, { useState, useEffect } from 'react';",
    "",
    "const ${1:ComponentName} = () => {",
    "\tconst [${2:state}, set${2/(.*)/${1:/capitalize}/}] = useState(${3:initialState});",
    "",
    "\tuseEffect(() => {",
    "\t\t$0",
    "\t}, []);",
    "",
    "\treturn (",
    "\t\t<div>",
    "\t\t\t{${2:state}}",
    "\t\t</div>",
    "\t);",
    "};",
    "",
    "export default ${1:ComponentName};"
  ],
  "description": "建立一個帶有 useState 和 useEffect 的 React 元件"
}
  • 使用結果
import React, { useState, useEffect } from 'react';

const ComponentName = () => {
    const [state, setState] = useState(initialState);

    useEffect(() => {}, []);

    return <div>{state}</div>;
};

export default ComponentName;
  1. 非同步函式:
"Async Function": {
  "prefix": "afn",
  "body": [
    "async function ${1:functionName}(${2:params}) {",
    "\ttry {",
    "\t\tconst result = await ${3:asyncOperation};",
    "\t\treturn result;",
    "\t} catch (error) {",
    "\t\tconsole.error('Error in ${1:functionName}:', error);",
    "\t\tthrow error;",
    "\t}",
    "}"
  ],
  "description": "建立一個帶有錯誤處理的非同步函式"
}

小貼士

  1. 起個好名字: 給你的程式碼片段起個好記的名字和字首。比如我喜歡用 "rcomp" 表示 React 元件。

  2. 經常更新: 你的編碼習慣在變,記得更新你的程式碼片段。定期 review 一下自己程式碼片段庫。

  3. 別貪多: 程式碼片段是好東西,但也別啥都做成片段。只為那些真正重複的、複雜的程式碼建立片段。

  4. 向大佬學習: GitHub 上有不少大佬分享他們的程式碼片段,可以去偷師學藝。有時候你會發現一些超讚的創意!

  5. 版本控制: 把你的程式碼片段檔案加入版本控制。我就把我的片段放在一個 Git 倉庫裡,這樣換電腦時也不怕丟失。

  6. 定期清理: 時不時清理一下你的程式碼片段。刪掉那些你不再用的,更新那些需要改進的。保持你的片段庫整潔有序。

總結

記住, 程式碼片段的強大之處在於它能讓你的編碼更快、更準、更一致。

但是,就像所有的工具一樣,關鍵在於怎麼用。

別怕嘗試和實驗,找到最適合你的方式。

隨著你越來越熟悉程式碼片段,你會發現自己的生產力顯著提高。

你會有更多的時間和精力專注於解決真正的問題,而不是被繁瑣的細節所困擾。

別忘了分享是進步的階梯。

如果你建立了一些超讚的程式碼片段,不妨和你的同事或者更大的開發者社群分享。

好了, vscode 程式碼片段武林秘籍已經傳授完畢,現在就看你自己的了。

記住, 實踐出真知。

祝你 Coding 愉快, 生產力飛起!✨🚀

感謝閱讀，我們下次再見！

相關文章