摘要：當你處于文件管理器中，你可以像在的中那樣用相同的快捷鍵進行常規操作，比如用方向鍵導航用鍵給文件或文件夾重命名用打開當前文件等。

原文地址：Tips to use VSCode more efficiently
原文作者：sudolabs
譯文出自：掘金翻譯計劃
本文永久鏈接：github.com/xitu/gold-m…
譯者：Baddyo
校對者：xionglong58, hzdaqo

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

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

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

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 格式：

主題

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

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

另外 —— Material Theme Icons 插件收集了很多好看的文件/文件夾圖標：

現在，你的設置信息（以及編輯器）應該是這樣的：

很棒，對吧？

快速提示：你可以通過在命令面板中搜索 "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 是一個支持眾多流行編輯器的插件，通過提供智能縮寫、擴展、常規操作（如以元素包裹其他元素）等功能，它顯著改善了 HTML 和 CSS 的工作流。也許你會說你并沒有直接用 HTML 開發，但它經過簡單配置就能兼容諸如 React 和 Vue 這類框架，因為它們用的都是相似的類 HTML 標記語言。

集成 Emmet 的 VS Code 無需配置即可支持 html、haml、jade、slim、jsx、xml、xsl、css、scss、sass、less 和 stylus 文件。

因此，默認情況下，你需要用 .jsx 文件擴展名來獲得 Emmet 支持。要是你只用到 .js 文件，那么你有兩種選擇：

讓 Emmet 在 .js 中運行：

"emmet.includeLanguages": {
"javascript": "javascriptreact",
}

（使 javascriptreact 這個 Emmet 語法在 javascript 文件中生效）

讓 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 —— 文件不再以預覽模式打開。

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

激活方法如下：

"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 流行的原因之一。下面列出一些切實有用的插件：

Settings Sync

Babel JavaScript

ESLint

Path Intellisense

vscode-styled-components

GitLens — Git supercharged

LintLens — ESLint rules made easier

DotENV

Guides

Bracket Pair Colorizer

ES7 React/Redux/GraphQL/React-Native snippets

Advanced New File

Duplicate action

Color Highlight

gitignore

TODO Highlight

Sort JSON objects

EditorConfig for VS Code

Image preview

Markdown All in One

Markdown Preview Github Styling

Align

HTML CSS Support

Sort lines

Toggle Quotes

Version Lens

Visual Studio IntelliCode - Preview

VS Live Share

Polacode

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

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