[譯] 幫你高效使用 VS Code 的祕訣

?Badd發表於2019-05-13

VS Code 自定義配置

假設你已經用過一段時間的 VS Code 了。你已經更改了顏色主題（如果還沒有，那我強烈推薦 material 主題），調整了基本設定，並且安裝了一些流行的外掛。

可能你感覺這種程度足以滿足日常工作需求。這很棒，但這樣你就很可能與 VS Code 的諸多功能擦肩而過了。

本文薈萃了一些設定、外掛和竅門，它們都對我的 Web 開發工作有莫大幫助。

jsconfig.json

VS Code 的基本功能中，jsconfig.json 是最容易被忽視的一個。當你在 VS Code 中開啟 JS 專案，VS Code 並不知道專案中的檔案是相關聯的。它把每個檔案當作單獨個體。而通過在專案根目錄建立 jsconfig.json 檔案，你可以把專案資訊傳達給 VS Code。

jsconfig.json（連同其他配置一起）實現了“智慧跳轉到定義處”的功能，此中用到了各種模組解析演算法。在實踐過程中，你可以對程式碼中的各種引用使用組合鍵 ⌘ 點選，然後就能跳轉到該引用定義之處。我強烈建議你讀讀官方文件，而我個人最常用的配置是這樣的：

{
  "compilerOptions": {
    "baseUrl": "src/",
    "target": "esnext",
    "module": "commonjs"
  },
  "exclude": [
    "node_modules",
  ]
}
複製程式碼

配置入門

注意：若你已經知道從何找到 VS Code 的設定，也知道如何編輯設定，就直接跳過本段吧。

VS Code 把配置資訊放在一個類 JSON 格式（所謂的 jsonc —— 帶註釋模式的 JSON）的檔案中。可以通過 ⌘ 鍵、快捷方式，或者 檔案 > 首選項 > 設定 開啟。（點選這裡瞭解更多設定）

開啟設定頁面後，你不會直接看到源 JSON 檔案。VS Code 精心優化了設定頁面的介面，但本文出於便於分享的目的，將不使用該介面，而是以鍵值對的形式展現。

你可以通過點選標籤欄上的 { } 按鈕來開啟 JSON 配置檔案。

如果該檔案是空的（你還沒有針對預設設定做任何修改），那我們需要建立一個空物件，它得是有效的 JSON 格式：

VS Code 設定

主題

這個設定項似乎很基礎，但並不代表它不重要。你有大量的時間在看程式碼，所以不妨再花點時間選一款讓眼睛舒適的主題，這也能讓程式碼看起來更悅目。

正如上文提到的，我在用 Material 主題下的 Ocean High Contrast。這些年我試用過很多主題，最終還是鍾愛這一款。

另外 —— Material Theme Icons 外掛收集了很多好看的檔案/資料夾圖示：

自定義側邊欄

現在，你的設定資訊（以及編輯器）應該是這樣的：

更改設定後的 VS Code

很棒，對吧？

快速提示：你可以通過在命令皮膚中搜尋 "accent"，來更改 Material 主題的高亮色。

字型

合適的字型能讓你的程式碼看起來更清晰優美。我選擇的程式碼字型是 Fira Code —— 一種強大而製作精良的程式設計字型，帶有漂亮的連字。快試試吧！我剛剛說過它是免費的吧？

縮排

無論你站在 “tabs vs spaces” 之爭的哪一邊，你都可以像這樣設定：

"editor.detectIndentation": true,
"editor.insertSpaces": true
"editor.tabSize": 2
複製程式碼

在編輯器和檔案管理器之間切換

使用 ⌘ ⇧ E 快捷鍵，你可以輕鬆切換程式碼編輯器和專案檔案管理器。當你處於檔案管理器中，你可以像在 macOS 的 Finder 中那樣用相同的快捷鍵進行常規操作，比如用方向鍵導航、用 ↵ 鍵給檔案或資料夾重新命名、用 ⌘ ↓ 開啟當前檔案等。

快速提示：在 VS Code 中，通過 ⌥ ⌘ R 組合鍵使用 macOS Finder 快速定位到當前選中的檔案或資料夾。

Emmet

Emmet 是一個支援眾多流行編輯器的外掛，通過提供智慧縮寫、擴充套件、常規操作（如以元素包裹其他元素）等功能，它顯著改善了 HTML 和 CSS 的工作流。也許你會說你並沒有直接用 HTML 開發，但它經過簡單配置就能相容諸如 React 和 Vue 這類框架，因為它們用的都是相似的類 HTML 標記語言。

整合 Emmet 的 VS Code 無需配置即可支援 html、haml、jade、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus 檔案。

因此，預設情況下，你需要用 .jsx 副檔名來獲得 Emmet 支援。要是你只用到 .js 檔案，那麼你有兩種選擇：

  1. 讓 Emmet 在 .js 中執行：
"emmet.includeLanguages": {
"javascript": "javascriptreact",
}
複製程式碼

（使 javascriptreact 這個 Emmet 語法在 javascript 檔案中生效）

  1. 讓 VS Code 像處理 .jsx 檔案那樣處理 .js 檔案（即對所有 .js 檔案使用 javascriptreact 語法），這樣 Emmet 就會把 .js 檔案視為 .jsx 檔案：
"files.associations": {
"*.js": "javascriptreact"
}
複製程式碼

我個人選第二種 —— 我從來不用 .jsx 副檔名，因此我要讓 VS Code 總是在 .js 檔案中支援 React 語法。

以下是我最常用的 Emmet 命令：

  • expand abbreviation —— 把字串擴充套件為 JSX 元素
  • wrap with abbreviation —— 用另一個元素包裹已有元素
  • split / join tag —— 把標籤組變為自閉合標籤（例如從 expand abbreviation 的輸出變為自閉合），反之亦然

Emmet 著實強大，能為你節省大量時間，因此我強烈推薦你看看 Emmet 官網 的 demo。

真正的秒開檔案

讓我們用 ⌘ P 開啟一個檔案。

注意標籤欄 —— 檔名為斜體代表著當前標籤頁處於預覽模式。預設情況下，如果你從側邊欄選中或者按 ⌘ P 開啟某檔案，然後再選中或者 ⌘ P 開啟另一個檔案，你會發現新開啟的檔案直接佔用了上一個預覽模式的標籤頁，除非它被「釘」住了（發生雙擊或編輯操作）。

當你在側邊欄中瀏覽檔案，可能只想瞥一眼檔案內容，那麼這種方式就很合理，但有時候，你會想要真正地「快速開啟」它。

要滿足該需求，可以這樣設定：

"workbench.editor.enablePreviewFromQuickOpen": false
複製程式碼

現在你再試試 ⌘ P —— 檔案不再以預覽模式開啟。

導航路徑

VS Code 導航路徑

導航路徑（顯示在標題欄下方）是一個有用的功能，它展示了當前程式碼在程式碼庫中的位置。如果你點選導航路徑其中一個節點，它會顯示你的當前位置、同級檔案或標記，亦可做為快速導航使用。

啟用方法如下：

"breadcrumbs.enabled": true
複製程式碼

以下是導航路徑的兩個有用的快捷鍵：

  • ⌘ ⇧ . — 聚焦導航路徑：選中末尾元素，開啟下拉選單供你導航到同級檔案或標記。
  • ⌘ ⇧ ; — 聚焦導航路徑的末尾元素但不開啟，通過方向鍵在路徑層次中移動。

快速提示：你可以在導航路徑中輸入關鍵詞來過濾檔案、資料夾和標記，並用 ↵ 來聚焦。

隱藏「開啟的編輯器」窗格

這樣就能總是在標籤頁中開啟檔案

  "explorer.openEditors.visible": 0
複製程式碼

自定義標題欄

VS Code 的預設標題欄不是很得力。它只顯示當前檔名和專案名。優化方法如下：

"window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}"
複製程式碼
  • ${dirty}: 當檔案修改後未儲存時，顯示一個圓點。
  • ${activeEditorMedium}: 當前檔案相對於工作區資料夾的路徑（例如 myFolder/myFileFolder/myFile.txt）
  • ${separator}: 一個條件分隔符（"-"），僅當被帶有值或靜態文字的變數包圍時才顯示。
  • ${rootName}: 工作區名稱（例如 "myFolder" 或 "myWorkspace"）。

在這裡可以看到所有可供配置的選項。

程式碼縮圖

也許你知道 Sublime Text 的著名工具“程式碼縮圖”。它預設開啟，但十分難看：

預設的程式碼縮圖

讓我們來優化一下吧。

首先，用色塊代替縮小的字元。然後，設定水平最大列數，最後，始終顯示「滑塊」以便瞥一眼就能知道當前程式碼在檔案中的位置。

"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 200,
"editor.minimap.showSlider": "always"
複製程式碼

自定義的程式碼縮圖

空格

也許你希望所有字元都可見：

"editor.renderWhitespace": "all"
複製程式碼

平滑滾動

"editor.smoothScrolling": true
複製程式碼

優化插入符

把游標的動畫從 "blink" 改為 "phase" ，那種一明一滅的動畫讓人有種奇怪的愉悅感：

"editor.cursorBlinking": "phase"
複製程式碼

讓游標移動時帶有小動畫，這樣讓我們的目光很容易追蹤到它：

"editor.cursorSmoothCaretAnimation": true
複製程式碼

檔案末尾另起一行

在檔案末尾處插入一個空行，這是一個慣例

"files.insertFinalNewline": true
複製程式碼

剪裁尾部空格

"files.trimTrailingWhitespace": true
複製程式碼

遙測

我個人傾向於禁用上傳資料（崩潰報告、使用資料、錯誤）到 Microsoft 聯機服務：

"telemetry.enableCrashReporter": false
"telemetry.enableTelemetry": false,
複製程式碼

另外，自然語言搜尋也是預設啟用的，在你搜尋設定時，該功能會把你的鍵盤動作傳送給 Bing。要是你也想把這個關閉，就增加如下配置資訊：

"workbench.settings.enableNaturalLanguageSearch": false
複製程式碼

複製檔案路徑

說起程式碼，能夠指向一個特定的檔案往往大有裨益。藉助命令皮膚 ⌘ P，VS Code 可提供活動檔案的絕對路徑和相對路徑，但設定自己的快捷鍵要更快一些。

按組合鍵 ⌘ K 後緊接著按 ⌘ S，可以開啟快捷鍵配置檔案，新增如下配置資訊（或者任意你想要的組合）：

複製相對路徑

{
	"key": "shift+cmd+c",
	"command": "copyRelativeFilePath"
}
複製程式碼

複製絕對路徑

{
	"key": "shift+alt+cmd+c",
	"command": "copyFilePath"
}
複製程式碼

隱藏底部狀態列的反饋笑臉圖示

"workbench.statusBar.feedback.visible": false
複製程式碼

外掛

豐富的外掛生態是 VS Code 流行的原因之一。下面列出一些切實有用的外掛：

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章