詳解VSCode轉到定義功能

一、轉到定義的基本概念

在許多大型的代碼庫中，代碼經常分布在多個文件中。為了幫助程序員更好地閱讀和理解代碼，IDE提供了許多查找功能，其中包括 轉到定義。這把功能可以幫助開發人員在代碼庫中快速定位定義並輕鬆地理解如何使用它們。 在VSCode中，轉到定義功能可以讓用戶通過單擊或按鍵輕鬆地跳轉到定義.

二、通過滑鼠轉到定義

在 VSCode 中，可以使用滑鼠進行跳轉。在代碼編輯器中，只需把滑鼠停留在您想跳轉到的對象上，然後單擊滑鼠右鍵。此時您將看到菜單，其中包含轉到定義選項。當您選擇轉到定義選項時，VSCode將會跳轉到該對象的定義.

// 示例代碼
/**
 * 獲取用戶信息
 * @param {number} userId 用戶ID
 * @returns {Object} 用戶信息對象
 */
function getUserInfo(userId) {
  // 轉到下面userInfo變數的定義
  let userInfo = fetchUserInfo(userId);
  // ...
}

// 轉到變數userInfo的定義
function fetchUserInfo(userId) {
  // ...
  let userInfo = {
      "name": "張三",
      "age": 28
  };
  return userInfo;
}

三、通過快捷鍵轉到定義

除了使用滑鼠右鍵單擊後選擇轉到定義外，還可以使用快捷鍵進行跳轉。在 VSCode 中，可以使用 “F12” 鍵或者 “Ctrl + 左鍵單擊” 進行轉到定義.

您可以對以下示例代碼進行操作，以更深入地了解快捷鍵如何實用.

// 示例代碼
// 轉到函數定義
function greeting(name) {
  return `Hello, ${name}!`;
}

console.log(greeting("James"));

// 轉到變數定義
const message = "Hello, World!";

console.log(message);

// 轉到對象的屬性定義
const user = {
  name: "張三",
  age: 28
};

console.log(user.name);

四、通過”peek”功能轉到定義

在 VSCode 中，可以使用 “peek” 功能查看對象的定義，而不必離開您目前編輯的文件。Peek 功能是一種進行「預覽編輯窗口」，同樣可以使用轉到定義操作但不會在主編輯器窗口中打開新文件.

對以下代碼進行操作，以更深入地了解 peek 功能:

// 示例代碼
// html代碼
// <a href="#about" class="btn">About</a>

// css代碼
.btn {
  background-color: #2b87da;
  color: white;
  display: inline-block;
  padding: 10px;
  text-decoration: none;
}

// 轉到CSS的實現上

五、通過配置「Include」路徑轉到定義

一些代碼庫可能會有複雜的目錄結構，文件可能分散在多個目錄中。在這種情況下，您可以使用 VSCode 的「設置」功能，根據需要來設置包含目錄路徑的文件。這將幫助您更好地管理和使用轉到定義功能.

• 在 VSCode 中，使用快捷鍵 “Ctrl + Shift + P”，然後輸入 「settings」

• 在出現的菜單中，選擇 「Open User settings」.

• 在User Settings頁簽中，搜索 “Include”。

• 您可以設置需要包含的路徑，如：

  {
              "search.exclude": {
              "**/node_modules": true,
              "**/bower_components": true,
              "**/coverage": true,
              "**/dist": true,
              "**/build": true
              },
              "search.useExcludeSettingsAndIgnoreFiles": true,
              "search.useGlobalIgnoreFiles": true,
              "search.useIgnoreFiles": true,
              "search.include": [ "**/src/*", "**/app/*" ]
          }

六、總結

本文介紹了在 VSCode 中使用轉到定義功能的幾種方法。無論您是使用滑鼠點擊還是快捷鍵，都可以在不離開當前編輯器的情況下方便地跳轉到代碼庫中的不同部分。