[译] 帮你高效使用 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、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。