Try   HackMD

Visual Studio Code(簡稱:Vscode)是一款功能強大的程式碼編輯器,在 Vscode 眾多功能中有一個超級方便的功能,名叫「使用者程式碼片段(Code Snippet)」,可以讓開發者不用每次都要花費時間打相同的程式碼,大大增加工作效率,此次文章要來分享如何設定以及使用 Vscode 的使用者程式碼片段功能,一起增加撰寫程式碼的效率吧!



一、開啟使用者程式碼片段設定檔:

    • 點擊左下角齒輪,接著點選使用者程式碼片段。
      Image Not Showing Possible Reasons
      • The image was uploaded to a note which you don't have access to
      • The note which the image was originally uploaded to has been deleted
      Learn More →
    • 點選檔案,接著點選喜好設定,接著點選設定使用者程式碼片段。
      Image Not Showing Possible Reasons
      • The image was uploaded to a note which you don't have access to
      • The note which the image was originally uploaded to has been deleted
      Learn More →
  1. 出現小視窗後,輸入要設定的程式語言,然後開啟相對應的 Json 檔。
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →
  2. 開啟完畢會看到如何設定使用者程式碼片段的註解。
    Image Not Showing Possible Reasons
    • The image was uploaded to a note which you don't have access to
    • The note which the image was originally uploaded to has been deleted
    Learn More →

二、介紹使用者程式碼片段架構:

Vscode 使用者程式碼片段的架構是使用 Json 格式儲存,每個程式語言都有獨自的 Json 檔,一個使用者程式碼片段至少需要這三個參數,自訂名稱、程式碼(body)、觸發關鍵字(prefix)。

  • 基本寫法
{ // 自訂名稱 "C++ Name": { // 觸發使用者程式碼片段的關鍵字 "prefix": "hello_cpp", // 程式碼 "body": [ "#include <iostream>", "using namespace std;", "", "int main()", "{", " return 0;", "}" ], // 敘述 "description": "C++ 基本架構" } }

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

  • 進階寫法-添加變數
{ // 自訂名稱 "C++ Cmp": { // 觸發使用者程式碼片段的關鍵字 "prefix": "cmp", // 程式碼 // 變數寫法: // $編號,相同編號的值會一樣 // ${編號:預設值},會設定預設值 // 輸入順序從編號 1 開始,按 tab 可以跳到下一個變數 "body": [ "bool cmp(${1:type} a, $1 b)", "{", " return;", "}" ], // 敘述 "description": "C++ 交換函式" } }

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

三、推薦使用者程式碼片段製作工具:

網址:https://snippet-generator.app/
輕鬆製作使用者程式碼片段的架構,只需要根據提示輸入自訂名稱、程式碼和觸發關鍵字即可,選取文字並按下 ctrl + i 會變成變數型態。

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More →


📢 歡迎加入我的 Discord 伺服器
https://discord.gg/Jtd3eVrFJs

📢 歡迎加入我的 FB 社團
https://www.facebook.com/groups/shawn20060304/

Copyright © 2023 SmallShawn95. All rights reserved.