VS Code 代碼片段指南: 從基礎到高級技巧 Detail - code,visual-studio-code,開發,代碼片段沉浸式趣談 Blog

今天咱們來聊聊 VS Code 裏的自定義代碼片段。

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

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

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

代碼片段是啥玩意兒?

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

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

為啥要用這玩意兒?

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

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

來, 跟我一步步來:

打開 VS Code,按下 Ctrl+Shift+P(Mac 上是 Cmd+Shift+P)。
輸入 "snippets",選擇 Preferences: Configure User Snippets。
選你要創建片段的語言,比如 JavaScript 。
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 塊中。挺智能的,是吧?

實用的代碼片段例子

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

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;

異步函數:

"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": "創建一個帶有錯誤處理的異步函數"
}

小貼士

起個好名字: 給你的代碼片段起個好記的名字和前綴。比如我喜歡用 "rcomp" 表示 React 組件。
經常更新: 你的編碼習慣在變,記得更新你的代碼片段。定期 review 一下自己代碼片段庫。
別貪多: 代碼片段是好東西,但也別啥都做成片段。只為那些真正重複的、複雜的代碼創建片段。
向大佬學習: GitHub 上有不少大佬分享他們的代碼片段,可以去偷師學藝。有時候你會發現一些超讚的創意!
版本控制: 把你的代碼片段文件加入版本控制。我就把我的片段放在一個 Git 倉庫裏,這樣換電腦時也不怕丟失。
定期清理: 時不時清理一下你的代碼片段。刪掉那些你不再用的,更新那些需要改進的。保持你的片段庫整潔有序。

總結

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

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

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

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

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

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

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

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

記住, 實踐出真知。

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

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

沉浸式趣談 Blog

@immerse

Tags

前端 (1157)

Javascript (735)

後端 (615)

程序員 (231)

面試 (72)

chrome (57)

visual-studio-code (32)

code (27)

next.js (22)

this (19)

開發 (19)

ecmascript (18)

Stories

VS Code 代碼片段指南: 從基礎到高級技巧 - Stories Detail