JavaScript 擴充套件（第二部分）

Name: Visual Studio Code
Author: Microsoft

2016 年 10 月 31 日，作者：Wade Anderson，@waderyan_

Visual Studio Code 對 JavaScript 有開箱即用的出色支援。與其他語言一樣，JavaScript 由語言服務提供支援。 JavaScript 語言服務由 TypeScript 團隊實現，使 JavaScript 開發人員能夠利用最佳的 IntelliSense 體驗。

但是，使用 VS Code 您還可以獲得哪些其他功能？ VS Code 具有豐富的可擴充套件性模型，許多功能透過 VS Code 擴充套件提供。這篇文章是我上一篇關於 JavaScript 擴充套件的文章的後續。

提示： 透過單擊“擴充套件檢視”按鈕，在“搜尋”框中輸入副檔名，然後單擊安裝來安裝這些擴充套件中的任何一個。在瀏覽擴充套件中瞭解更多資訊。

Chrome 偵錯程式

市場 - Debugger for Chrome

釋出者 - Microsoft

當您進行前端開發時，您可能看不到編輯器中整合偵錯程式的價值。您會使用瀏覽器的偵錯程式，對嗎？這就是 Debugger for Chrome 擴充套件的用武之地。此擴充套件允許您在 Google Chrome 瀏覽器或任何其他支援 Chrome 除錯協議的目標中除錯 JavaScript 程式碼，同時仍留在 VS Code 中。無需再進行上下文切換來除錯！

喜歡使用不同的瀏覽器進行除錯？您也可以找到 Edge 和 Firefox 的擴充套件。

debugger for chrome image

Git Project Manager

市場 - Git Project Manager

釋出者 - Felipe Caputo

雖然不一定是 JavaScript 擴充套件，但 Git Project Manager 在 VS Code 團隊中很受歡迎。此擴充套件會掃描一個目錄（或多個目錄）以查詢 Git 倉庫，並允許您輕鬆地在它們之間切換。

要使用此擴充套件，首先安裝它，然後將以下配置新增到您的 settings.json 檔案中。

"gitProjectManager.baseProjectsFolders": [
    "/path/to/your/base/project/folders"
]

git project manager showcase

Beautify

市場 - Beautify

釋出者 - HookyQR

在內部，VS Code 使用 js-beautify。此擴充套件允許您指定一個 .jsbeautifyrc 檔案來指示 JavaScript、CSS、Sass 和 HTML 程式碼的格式樣式。

您可以使用新的格式化程式類別在市場中搜索更多格式化程式。

注意： 對於擴充套件作者，我們正在撰寫一篇關於原始碼格式化程式最佳實踐的博文。敬請期待，它即將推出。

Sublime Text 和 Atom 的鍵對映

本節有兩個擴充套件，一個用於 Atom，另一個用於 Sublime Text。如果您使用過這些編輯器，您可能已經記住了它們的鍵盤快捷鍵。這些擴充套件將 Atom 和 Sublime Text 的鍵盤快捷鍵帶到 VS Code。

這些擴充套件處於預覽狀態，因為我們需要您的反饋。還有許多快捷方式需要包含，如果您發現我們可能遺漏了任何快捷方式，您可以輕鬆新增。

轉到擴充套件的 GitHub 倉庫（Atom 和 Sublime Text）。
開啟 package.json 檔案（Atom 和 Sublime Text）。
將一個 JSON 物件新增到 package.json 的 contributes.keybindings 部分，如下所示（Atom 和 Sublime Text）。
開啟拉取請求。

{
  "mac": "<keyboard shortcut for mac>",
  "linux": "<keyboard shortcut for linux",
  "win": "<keyboard shortcut for windows",
  "key": "<default keyboard shortcut>",
  "command": "<name of the command in VS Code"
}

您是否有其他想要製作鍵對映的編輯器或 IDE？只需遵循 contributes.keybindings 部分和鍵繫結文件中的說明即可。

鍵盤快捷鍵多如牛毛

如果您發現 VS Code 缺少來自 Atom、Sublime Text 或其他產品的鍵盤快捷鍵功能，請在這些 GitHub issue (Atom 和 Sublime Text) 中評論或建立一個新 issue。

此外，市場中還有許多新增有用鍵盤快捷鍵的擴充套件

建立您自己的 JavaScript 擴充套件

找不到滿足您需求的擴充套件。您可以使用 JavaScript 或 TypeScript 製作自己的擴充套件！檢視文件以瞭解更多資訊。

Wade Anderson，VS Code 團隊成員
@waderyan_