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

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

假設(shè)你已經(jīng)用過一段時(shí)間的 VS Code 了。你已經(jīng)更改了顏色主題（如果還沒有，那我強(qiáng)烈推薦 material 主題），調(diào)整了基本設(shè)置，并且安裝了一些流行的插件。

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

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

VS Code 的基本功能中，jsconfig.json 是最容易被忽視的一個(gè)。當(dāng)你在 VS Code 中打開 JS 項(xiàng)目，VS Code 并不知道項(xiàng)目中的文件是相關(guān)聯(lián)的。它把每個(gè)文件當(dāng)作多帶帶個(gè)體。而通過在項(xiàng)目根目錄創(chuàng)建 jsconfig.json 文件，你可以把項(xiàng)目信息傳達(dá)給 VS Code。

jsconfig.json（連同其他配置一起）實(shí)現(xiàn)了“智能跳轉(zhuǎn)到定義處”的功能，此中用到了各種模塊解析算法。在實(shí)踐過程中，你可以對(duì)代碼中的各種引用使用組合鍵 ? 點(diǎn)擊，然后就能跳轉(zhuǎn)到該引用定義之處。我強(qiáng)烈建議你讀讀官方文檔，而我個(gè)人最常用的配置是這樣的：

{
  "compilerOptions": {
    "baseUrl": "src/",
    "target": "esnext",
    "module": "commonjs"
  },
  "exclude": [
    "node_modules",
  ]
}

注意：若你已經(jīng)知道從何找到 VS Code 的設(shè)置，也知道如何編輯設(shè)置，就直接跳過本段吧。

VS Code 把配置信息放在一個(gè)類 JSON 格式（所謂的 jsonc —— 帶注釋模式的 JSON）的文件中。可以通過 ? 鍵、快捷方式，或者 文件 > 首選項(xiàng) > 設(shè)置 打開。（點(diǎn)擊這里了解更多設(shè)置）

打開設(shè)置頁(yè)面后，你不會(huì)直接看到源 JSON 文件。VS Code 精心優(yōu)化了設(shè)置頁(yè)面的界面，但本文出于便于分享的目的，將不使用該界面，而是以鍵值對(duì)的形式展現(xiàn)。

你可以通過點(diǎn)擊標(biāo)簽欄上的 { } 按鈕來(lái)打開 JSON 配置文件。

如果該文件是空的（你還沒有針對(duì)默認(rèn)設(shè)置做任何修改），那我們需要?jiǎng)?chuàng)建一個(gè)空對(duì)象，它得是有效的 JSON 格式：

主題

這個(gè)設(shè)置項(xiàng)似乎很基礎(chǔ)，但并不代表它不重要。你有大量的時(shí)間在看代碼，所以不妨再花點(diǎn)時(shí)間選一款讓眼睛舒適的主題，這也能讓代碼看起來(lái)更悅目。

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

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

現(xiàn)在，你的設(shè)置信息（以及編輯器）應(yīng)該是這樣的：

很棒，對(duì)吧？

快速提示：你可以通過在命令面板中搜索 "accent"，來(lái)更改 Material 主題的高亮色。

合適的字體能讓你的代碼看起來(lái)更清晰優(yōu)美。我選擇的代碼字體是 Fira Code —— 一種強(qiáng)大而制作精良的編程字體，帶有漂亮的連字?？煸囋嚢桑∥覄倓傉f過它是免費(fèi)的吧？

無(wú)論你站在 “tabs vs spaces” 之爭(zhēng)的哪一邊，你都可以像這樣設(shè)置：

"editor.detectIndentation": true,
"editor.insertSpaces": true
"editor.tabSize": 2

使用 ? ? E 快捷鍵，你可以輕松切換代碼編輯器和項(xiàng)目文件管理器。當(dāng)你處于文件管理器中，你可以像在 macOS 的 Finder 中那樣用相同的快捷鍵進(jìn)行常規(guī)操作，比如用方向鍵導(dǎo)航、用 ? 鍵給文件或文件夾重命名、用 ? ↓ 打開當(dāng)前文件等。

快速提示：在 VS Code 中，通過 ? ? R 組合鍵使用 macOS Finder 快速定位到當(dāng)前選中的文件或文件夾。

Emmet 是一個(gè)支持眾多流行編輯器的插件，通過提供智能縮寫、擴(kuò)展、常規(guī)操作（如以元素包裹其他元素）等功能，它顯著改善了 HTML 和 CSS 的工作流。也許你會(huì)說你并沒有直接用 HTML 開發(fā)，但它經(jīng)過簡(jiǎn)單配置就能兼容諸如 React 和 Vue 這類框架，因?yàn)樗鼈冇玫亩际窍嗨频念?HTML 標(biāo)記語(yǔ)言。

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

因此，默認(rèn)情況下，你需要用 .jsx 文件擴(kuò)展名來(lái)獲得 Emmet 支持。要是你只用到 .js 文件，那么你有兩種選擇：

讓 Emmet 在 .js 中運(yùn)行：

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

（使 javascriptreact 這個(gè) Emmet 語(yǔ)法在 javascript 文件中生效）

讓 VS Code 像處理 .jsx 文件那樣處理 .js 文件（即對(duì)所有 .js 文件使用 javascriptreact 語(yǔ)法），這樣 Emmet 就會(huì)把 .js 文件視為 .jsx 文件：

"files.associations": {
"*.js": "javascriptreact"
}

我個(gè)人選第二種 —— 我從來(lái)不用 .jsx 文件擴(kuò)展名，因此我要讓 VS Code 總是在 .js 文件中支持 React 語(yǔ)法。

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

expand abbreviation —— 把字符串?dāng)U展為 JSX 元素

wrap with abbreviation —— 用另一個(gè)元素包裹已有元素

split / join tag —— 把標(biāo)簽組變?yōu)樽蚤]合標(biāo)簽（例如從 expand abbreviation 的輸出變?yōu)樽蚤]合），反之亦然

Emmet 著實(shí)強(qiáng)大，能為你節(jié)省大量時(shí)間，因此我強(qiáng)烈推薦你看看 Emmet 官網(wǎng) 的 demo。

讓我們用 ? P 打開一個(gè)文件。

注意標(biāo)簽欄 —— 文件名為斜體代表著當(dāng)前標(biāo)簽頁(yè)處于預(yù)覽模式。默認(rèn)情況下，如果你從側(cè)邊欄選中或者按 ? P 打開某文件，然后再選中或者 ? P 打開另一個(gè)文件，你會(huì)發(fā)現(xiàn)新打開的文件直接占用了上一個(gè)預(yù)覽模式的標(biāo)簽頁(yè)，除非它被「釘」住了（發(fā)生雙擊或編輯操作）。

當(dāng)你在側(cè)邊欄中瀏覽文件，可能只想瞥一眼文件內(nèi)容，那么這種方式就很合理，但有時(shí)候，你會(huì)想要真正地「快速打開」它。

要滿足該需求，可以這樣設(shè)置：

"workbench.editor.enablePreviewFromQuickOpen": false

現(xiàn)在你再試試 ? P —— 文件不再以預(yù)覽模式打開。

導(dǎo)航路徑（顯示在標(biāo)題欄下方）是一個(gè)有用的功能，它展示了當(dāng)前代碼在代碼庫(kù)中的位置。如果你點(diǎn)擊導(dǎo)航路徑其中一個(gè)節(jié)點(diǎn)，它會(huì)顯示你的當(dāng)前位置、同級(jí)文件或標(biāo)記，亦可做為快速導(dǎo)航使用。

激活方法如下：

"breadcrumbs.enabled": true

以下是導(dǎo)航路徑的兩個(gè)有用的快捷鍵：

? ? . — 聚焦導(dǎo)航路徑：選中末尾元素，打開下拉菜單供你導(dǎo)航到同級(jí)文件或標(biāo)記。

? ? ; — 聚焦導(dǎo)航路徑的末尾元素但不打開，通過方向鍵在路徑層次中移動(dòng)。

快速提示：你可以在導(dǎo)航路徑中輸入關(guān)鍵詞來(lái)過濾文件、文件夾和標(biāo)記，并用 ? 來(lái)聚焦。

這樣就能總是在標(biāo)簽頁(yè)中打開文件

  "explorer.openEditors.visible": 0

VS Code 的默認(rèn)標(biāo)題欄不是很得力。它只顯示當(dāng)前文件名和項(xiàng)目名。優(yōu)化方法如下：

"window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}"

${dirty}: 當(dāng)文件修改后未保存時(shí)，顯示一個(gè)圓點(diǎn)。

${activeEditorMedium}: 當(dāng)前文件相對(duì)于工作區(qū)文件夾的路徑（例如 myFolder/myFileFolder/myFile.txt）

${separator}: 一個(gè)條件分隔符（"-"），僅當(dāng)被帶有值或靜態(tài)文本的變量包圍時(shí)才顯示。

${rootName}: 工作區(qū)名稱（例如 "myFolder" 或 "myWorkspace"）。

在這里可以看到所有可供配置的選項(xiàng)。

也許你知道 Sublime Text 的著名工具“代碼縮略圖”。它默認(rèn)開啟，但十分難看：

讓我們來(lái)優(yōu)化一下吧。

首先，用色塊代替縮小的字符。然后，設(shè)置水平最大列數(shù)，最后，始終顯示「滑塊」以便瞥一眼就能知道當(dāng)前代碼在文件中的位置。

"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 200,
"editor.minimap.showSlider": "always"

空格

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

"editor.renderWhitespace": "all"

"editor.smoothScrolling": true

把光標(biāo)的動(dòng)畫從 "blink" 改為 "phase" ，那種一明一滅的動(dòng)畫讓人有種奇怪的愉悅感：

"editor.cursorBlinking": "phase"

讓光標(biāo)移動(dòng)時(shí)帶有小動(dòng)畫，這樣讓我們的目光很容易追蹤到它：

"editor.cursorSmoothCaretAnimation": true

在文件末尾處插入一個(gè)空行，這是一個(gè)慣例

"files.insertFinalNewline": true

"files.trimTrailingWhitespace": true

我個(gè)人傾向于禁用上傳數(shù)據(jù)（崩潰報(bào)告、使用數(shù)據(jù)、錯(cuò)誤）到 Microsoft 聯(lián)機(jī)服務(wù)：

"telemetry.enableCrashReporter": false
"telemetry.enableTelemetry": false,

另外，自然語(yǔ)言搜索也是默認(rèn)激活的，在你搜索設(shè)置時(shí)，該功能會(huì)把你的鍵盤動(dòng)作發(fā)送給 Bing。要是你也想把這個(gè)關(guān)閉，就增加如下配置信息：

"workbench.settings.enableNaturalLanguageSearch": false

說起代碼，能夠指向一個(gè)特定的文件往往大有裨益。借助命令面板 ? P，VS Code 可提供活動(dòng)文件的絕對(duì)路徑和相對(duì)路徑，但設(shè)置自己的快捷鍵要更快一些。

按組合鍵 ? K 后緊接著按 ? S，可以打開快捷鍵配置文件，添加如下配置信息（或者任意你想要的組合）：

復(fù)制相對(duì)路徑

{
	"key": "shift+cmd+c",
	"command": "copyRelativeFilePath"
}

復(fù)制絕對(duì)路徑

{
	"key": "shift+alt+cmd+c",
	"command": "copyFilePath"
}

"workbench.statusBar.feedback.visible": false

豐富的插件生態(tài)是 VS Code 流行的原因之一。下面列出一些切實(shí)有用的插件：

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

如果發(fā)現(xiàn)譯文存在錯(cuò)誤或其他需要改進(jìn)的地方，歡迎到 掘金翻譯計(jì)劃 對(duì)譯文進(jìn)行修改并 PR，也可獲得相應(yīng)獎(jiǎng)勵(lì)積分。文章開頭的 本文永久鏈接 即為本文在 GitHub 上的 MarkDown 鏈接。

掘金翻譯計(jì)劃 是一個(gè)翻譯優(yōu)質(zhì)互聯(lián)網(wǎng)技術(shù)文章的社區(qū)，文章來(lái)源為 掘金 上的英文分享文章。內(nèi)容覆蓋 Android、iOS、前端、后端、區(qū)塊鏈、產(chǎn)品、設(shè)計(jì)、人工智能等領(lǐng)域，想要查看更多優(yōu)質(zhì)譯文請(qǐng)持續(xù)關(guān)注 掘金翻譯計(jì)劃、官方微博、知乎專欄。