Visual Studio Code 自訂折疊區塊

前言

Visual Studio Code 是一個非常好用的編輯器，它有許多的功能，而這邊我們就來介紹一個非常實用的功能，也就是折疊區塊。

折疊區塊

首先我們通常開發時，寫完一段函式之後，那一段函式基本上是可以折疊的，甚至是 Markdown 也可以折疊

function add(a, b) {
  return a + b
}

可以看到旁邊有一個小小的箭頭，這代表著這一段程式碼是可以折疊的，當我們點擊這個箭頭時，就可以折疊這一段程式碼，如下圖所示：

折疊之前：

折疊之後：

這算是基本的一個 VSCode 自己分析並提供的摺疊功能，但其實我們也可以自己定義折疊的區塊，只需要使用 #region 與 #endregion 包覆你想要折疊的區塊即可，例如…

// #region Math Function
function add(a, b) {
  return a + b
}

function sub(a, b) {
  return a - b
}

function mul(a, b) {
  return a * b
}

function div(a, b) {
  return a / b
}
// #endregion

折疊之前：

折疊之後：

這是一個比較少人知道的小技巧，但我認為滿實用的，為什麼呢？舉例下面有一段範例程式碼，然後我們使用了 使用 Swagger 自動生成 API 文件 技巧來產生 API 文件，這時候我們就可以使用 #region 與 #endregion 來包覆我們的 API 文件，這樣就可以讓我們的程式碼更加的乾淨，也更加的好閱讀

router.get('/', async (req, res) => {
  // #region 取得所有代辦事項
  /*
    #swagger.tags = ['代辦事項']
    #swagger.description = '取得所有代辦事項'
    #swagger.security = [{
      "apiKeyAuth": []
    }]
    #swagger.responses[200] = {
      description: '取得成功',
      schema: {
        status: true,
        data: [
          {
            id: '123456789',
            createTime: 1620281234,
            content: '買晚餐',
            status: false,
          },
          {
            id: '123456789',
            createTime: 1620281234,
            content: '買晚餐',
            status: false,
          },
        ],
      }
    }
    #swagger.responses[400] = {
      description: '取得失敗',
      schema: {
        status: false,
        message: '取得失敗',
      }
    }
  */
  // #endregion

  // ...忽略其他程式碼
});

折疊之後：

透過這方式我們可以更專注於我們的程式碼，而不是被其他的東西干擾，這樣的話我們的程式碼也會更加的乾淨，也更加的好閱讀，而這也可以解決有些程式碼無法折疊得問題哩~