更高效使用 VSCode 的技巧

2025-05-26

更高效使用 VSCode 的技巧

假设你已经使用 VSCode 一段时间了。
你更改了颜色主题（如果没有，我强烈推荐Material Theme），调整了一些基本设置，并安装了几个常用的扩展程序。

也许你对它足够了解，能够完成工作。这完全没问题，但你很可能会错过它的一些功能。

这是设置、扩展和快捷方式的集合，对我作为 Web 开发人员的工作特别有用。

jsconfig.json

VSCode 最容易被忽视的重要功能之一是jsconfig.json。如果你在 VSCode 中打开你的 JS 项目，它并不知道其中的文件是相关的。它会将每个文件视为一个独立的单元。你可以在项目根目录下
创建一个 file 来告诉它你的项目信息。jsconfig.json

jsconfig.json（除其他功能外）它支持智能跳转到定义，可与各种模块解析算法配合使用。实际上，这意味着您现在可以⌘ click在代码中定位各种引用，它会跳转到它们的定义。我强烈建议您阅读更多相关内容，但以下是我最常用的方法：

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

设置入门

注意：如果您已经知道在哪里找到 VSCode 设置以及如何编辑它们，请跳至下一部分

VSCode 将设置存储在类似 JSON 格式（即所谓的jsonc带注释模式的 JSON）的文件中。您可以使用⌘ ,快捷方式或通过 访问Code > Preferences > Settings。（点击此处了解更多关于 VSCode 设置的信息）

打开设置后，您不会立即看到原始 JSON。VSCode 最近为其添加了一个漂亮的 UI，但出于本文的目的，以原始键值形式共享设置更为方便，因此我们不会使用它。

{ }您可以通过单击标签栏中的图标来访问设置 JSON 。

如果它是空的（您尚未对默认设置进行任何修改），让我们创建一个空对象，因此它是一个有效的 JSON：

VSCode 设置

主题

这看似基础，但并不意味着它不重要。你花了很多时间查看代码，所以不妨花点时间选择一个赏心悦目的主题，让代码看起来也更美观。

正如我之前提到的，我使用的是Material Theme Ocean 高对比度版本。这些年来我尝试过很多版本，但最终还是选择了这个。

还有一件事 - 这些漂亮的文件/文件夹图标是通过Material Theme Icons扩展实现的：

自定义侧边栏

您的设置（和编辑器）现在如下所示：

编辑的设置

不错吧？

快速提示：您可以通过在命令面板中搜索“accent”来更改 Material Theme 强调色。

字体

合适的字体可以让你的代码更清晰易读、赏心悦目。我选择的编程字体是Fira Code一款功能强大、制作精良、连字优美的编程字体。快来试试吧！我有没有提到它是免费的？

缩进

无论您在“制表符与空格”的争论中站在哪一边，都可以像这样设置：

"editor.detectIndentation": true,
"editor.insertSpaces": true
"editor.tabSize": 2
Enter fullscreen mode Exit fullscreen mode

在编辑器和资源管理器之间切换

您可以使用快捷键轻松在代码编辑器和项目文件资源管理器之间切换⌘ ⇧ E。在资源管理器中，您可以使用与 MacOS Finder 中相同的按键进行常见操作——箭头键用于导航、↵重命名文件/文件夹以及⌘ ↓打开当前文件。

快速提示：使用 在原生 MacOS 查找器中显示焦点文件/文件夹⌥ ⌘ R。

埃米特

Emmet是许多流行文本编辑器的插件，它通过启用巧妙的缩写、扩展、常见操作（例如将元素包裹在其他元素中）等功能，极大地改善了 HTML 和 CSS 的工作流程。您可能会说您不是直接编写 HTML，但它可以轻松配置，以便与 React 和 Vue 等框架完美兼容，因为它们使用了类似 HTML 的标记。

VSCode附带对、、、、、、、、和文件的Emmet支持。htmlhamljadeslimjsxxmlxslcssscsssasslessstylus

因此，默认情况下，您必须使用.jsx文件扩展名才能获得 Emmet 对 JSX 文件的支持。假设您只使用.js文件，那么有两个选择：

  1. 告诉 Emmet 在文件中运行.js：
"emmet.includeLanguages": {
    "javascript": "javascriptreact",
}
Enter fullscreen mode Exit fullscreen mode

（在文件中启用javascriptreactEmmet 语法javascript）

  1. .js告诉 VSCode 像对待文件一样对待任何文件（这意味着对所有文件也.jsx使用相同的语法），因此 Emmet 将其视为一个文件：javascriptreact.js.jsx
"files.associations": {
    "*.js": "javascriptreact"
}
Enter fullscreen mode Exit fullscreen mode

我选择了第二个 - 我从不使用.jsx文件扩展名，所以无论如何我都希望在文件中拥有 VSCode React 支持.js。

这些 Emmet 命令是我最常用的：

  • expand abbreviation- 将字符串扩展为 JSX 元素
  • wrap with abbreviation- 用另一个元素包装现有的 JSX
  • split / join tag- 从标签对中创建自闭合标签（例如从的输出中创建expand abbreviation），反之亦然

Emmet 确实功能强大，可以为您节省大量时间，因此我强烈建议您在 emmet.io 网站上查看他们的演示。

真正快速打开文件

让我们使用快速打开命令打开一个文件：⌘ P。

注意标签栏 - 文件名以斜体显示表示该标签处于预览模式。默认情况下，如果您从侧边栏或快速打开 ( ) 中选择文件⌘ P，然后选择/快速打开另一个标签，则会重复使用预览标签，直到将其固定（双击或编辑文件）。

如果您正在浏览侧边栏中的文件，可能只是查看文件，这种行为是有意义的，但如果您想快速打开某个东西，您可能知道您想“真正”打开它。

为了实现此目的，请进行以下设置：

"workbench.editor.enablePreviewFromQuickOpen": false
Enter fullscreen mode Exit fullscreen mode

现在尝试⌘ P- 您的文件将不再以预览模式打开。

面包屑

面包屑

面包屑导航（显示在标题栏下方）是 VSCode 的一个实用功能，它可以显示您在代码库中的位置。点击其中一个导航条，它会显示您的当前位置以及同一级别的文件/符号，同时提供快速导航功能。

通过以下设置启用它们：

"breadcrumbs.enabled": true
Enter fullscreen mode Exit fullscreen mode

对于面包屑，有两个有用的快捷方式：

  • ⌘ ⇧ .- 焦点面包屑：它将选择最后一个元素并打开一个下拉菜单，让您导航到同级文件或符号。
  • ⌘ ⇧ ;- 无需打开即可聚焦面包屑的最后一个元素 - 这样您就可以使用箭头在路径层次结构内移动。

快速提示：您可以在面包屑弹出窗口中键入以过滤文件和文件夹/符号，然后使用 来关注它们↵。

隐藏打开的编辑器部分

无论如何，您都会在选项卡中看到打开的文件。

  "explorer.openEditors.visible": 0
Enter fullscreen mode Exit fullscreen mode

自定义标题栏

VSCode 默认标题不太实用。它只显示当前文件名和项目名称。以下是改进方法：

"window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}"
Enter fullscreen mode Exit fullscreen mode
  • ${dirty}：如果活动编辑器已脏，则显示脏指示器。
  • ${activeEditorMedium}：文件相对于工作区文件夹的路径（例如myFolder/myFileFolder/myFile.txt）
  • ${separator}：条件分隔符（“ - ”），仅当被具有值或静态文本的变量包围时才显示。
  • ${rootName}：工作区的名称（例如 myFolder 或 myWorkspace）。

您可以在此处查看所有可用选项。

小地图

你可能知道 Sublime Text 中著名的小地图小部件。它默认启用，但看起来相当糟糕：

默认小地图

让我们改进它。

首先，让我们使用色块代替缩小的字符。然后设置最大水平列数，最后，始终显示“滑块”，以便我们可以通过小地图查看屏幕在文件中的位置。

"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 200,
"editor.minimap.showSlider": "always"
Enter fullscreen mode Exit fullscreen mode

自定义小地图

空格

您可能想看到所有角色：

"editor.renderWhitespace": "all"
Enter fullscreen mode Exit fullscreen mode

平滑滚动

"editor.smoothScrolling": true
Enter fullscreen mode Exit fullscreen mode

插入符号改进

光标不是闪烁而是逐渐移动，这让人感到有些奇怪：

"editor.cursorBlinking": "phase"
Enter fullscreen mode Exit fullscreen mode

此外，当光标移动时有轻微的动画，光标更容易跟随：

"editor.cursorSmoothCaretAnimation": true
Enter fullscreen mode Exit fullscreen mode

最后一条新线

在文件末尾添加一个新行是一种常见的做法：

"files.insertFinalNewline": true
Enter fullscreen mode Exit fullscreen mode

修剪尾随空格

"files.trimTrailingWhitespace": true
Enter fullscreen mode Exit fullscreen mode

遥测

我喜欢禁用遥测：

"telemetry.enableCrashReporter": false
"telemetry.enableTelemetry": false,
Enter fullscreen mode Exit fullscreen mode

此外，自然语言搜索默认启用，它会在搜索设置时将你的按键信息发送给必应。如果你也想关闭此功能，请在设置中添加以下代码：

"workbench.settings.enableNaturalLanguageSearch": false
Enter fullscreen mode Exit fullscreen mode

复制文件路径

在讨论代码时，能够指向特定文件通常很有用。VSCode 提供了通过命令面板复制活动文件的绝对和相对文件路径的功能，但设置自己的键盘快捷键⌘ P会更快。

⌘ K, ⌘ S使用(commad + K 紧接着 commad + S)打开键盘快捷键文件，然后添加以下内容（或您喜欢的任何组合键）

复制相对路径

{
  "key": "shift+cmd+c",
  "command": "copyRelativeFilePath"
}
Enter fullscreen mode Exit fullscreen mode

复制绝对路径

{
  "key": "shift+alt+cmd+c",
  "command": "copyFilePath"
}
Enter fullscreen mode Exit fullscreen mode

在底部栏中隐藏反馈笑脸

"workbench.statusBar.feedback.visible": false
Enter fullscreen mode Exit fullscreen mode

扩展

丰富的扩展生态系统是 VSCode 成功的原因之一。以下是一些已被证明有用的扩展：

如果有什么让您使用 VSCode 的体验特别好，请在评论中分享！

首次发布于sudolabs.io

文章来源：https://dev.to/selrond/tips-to-use-vscode-more-efficiently-3h6p
Devto 翻译
PREV
向未来软件雇主提出的 36 个问题
NEXT
十条戒律