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

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

假設你已經用過一段時間的 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 格式：

主題

這個設置項彷佛很基礎，但並不表明它不重要。你有大量的時間在看代碼，因此不妨再花點時間選一款讓眼睛溫馨的主題，這也能讓代碼看起來更悅目。

正如上文提到的，我在用 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

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 文件中生效）

2. 讓 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。