💻我的 Web 开发 VS 代码设置、主题、扩展、提示和技巧

2025-05-25

💻我的 Web 开发 VS 代码设置、主题、扩展、提示和技巧

自从我开始编程以来，我用过很多编辑器和 IDE。Eclipse
、Netbeans、Notepade++、Brackets Editor、Sublime Text 2、Sublime Text 3、Webstorm、Atom Editor，可能还有一些我忘了的。

目前我正在使用 Visual Studio Code。根据谷歌趋势，它也是搜索次数最多的编辑器。这背后有一些很好的理由。

  • VS Code 感觉很快。VS Code 很难变慢。通常，这不是 VS Code 的问题，而是扩展实现得不好。

  • 文件搜索超级快，感觉瞬间完成，无需等待。

  • 它轻量级，但也预装了你需要的大部分功能。搜索文件、调试、基本的 git GUI。

  • 良好的主题支持和自定义支持。你几乎可以在 VS Code 中更改所有内容。

  • 很棒的扩展！想到你需要什么扩展了吗？没错，VS Code 就有！

好了，赞美就到此为止。编辑器的好坏取决于用户是否熟悉它！我假设你已经安装了 VS Code。

主题、文件图标和字体系列

你每天都会花几个小时看 vs code。

主题

我没有glow启用并且没有添加自定义 CSS。

文件图标

简单图标是一个简约干净的图标主题，具有强烈的色彩和清晰的图标，因此您可以更快地找到所需的文件。

字体

它看起来很简洁，并且支持连字。
我的配置（我们稍后会学习如何设置此配置）：

    "editor.fontFamily": "Hasklig, Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 15,
Enter fullscreen mode Exit fullscreen mode

扩展

这个扩展应该内置到每个编辑器中！你是否遇到过代码不知道从哪里{开始，然后又在哪里}结束的情况？
那么这个扩展就是你需要的！它会为每个{段落显示(不同的颜色，让代码更容易查看。

这会为每个缩进制表符或空格添加不同的颜色。
这也有助于您更快地浏览代码。

.env如今，文件非常常见，并在很多项目中使用。VS Code 的默认设置并不支持此类文件类型的语法高亮。此扩展程序添加了对它的支持。

此外，对于每个注重性能和速度的开发人员来说，这都是必备工具。它会显示kb导入此 npm 模块或任何可以导入的内容需要花费多少成本。

对我来说，这简直就是个杀手级功能！你是通过 SSH 连接到开发环境的吗？你用的是 Docker 容器吗？还是用 WSL？这个扩展让使用所有这些功能变得极其简单。最棒的是，即使通过 SSH，搜索和打开文件的速度也不会变慢！简直太神奇了！我太喜欢这个扩展了！

它取代了 Intellisense。它就像是添加了 AI 支持的 Intellisense。Tab 补全功能会显示其他人最常用的函数或参数，这样你就可以在右侧顶部看到最常用的函数或参数。这会让你更高效！

这会在 VS Code 中添加直接的 eslint 支持，并帮助你修复 eslint 问题。这也是必备的。

设置

我没有使用 UI 版本的设置界面。我更喜欢使用 JSON 版本。要打开它，请按CTRL+SHIFT+P，然后输入open settings JSON。这将打开该settings.json文件，您可以像编辑其他 JSON 文件一样编辑它。

让光标更时尚

    "editor.cursorBlinking": "smooth",
    "editor.cursorSmoothCaretAnimation": true,
    "editor.cursorStyle": "block",
Enter fullscreen mode Exit fullscreen mode

第一行代码会使用淡入淡出动画，使光标闪烁更加流畅。
第二行代码会为课程的移动添加动画效果，使其看起来更自然一些。
第三行代码会将光标的外观改为块状，让您使用起来更舒服。
现在，您的光标看起来好多了！

使字体更易读

    "editor.fontFamily": "Hasklig, Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "editor.fontSize": 15,
Enter fullscreen mode Exit fullscreen mode

如前所述，我使用的是 Hasklig 字体。另外，我喜欢使用连字；它使代码更具可读性。我的视力不太好。所以我希望字体大一点。

复制并粘贴代码

    "editor.formatOnPaste": true,
Enter fullscreen mode Exit fullscreen mode

我们都会从网上复制粘贴一些代码。所以这个设置也会在粘贴时格式化它。

使垂直参考线可见

    "editor.renderIndentGuides": true,
Enter fullscreen mode Exit fullscreen mode

如果您有一个带有大量缩进的长函数，这将帮助您更轻松地导航代码。

禁用遥测

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

即使我使用 vscode-insiders，我也不需要将我的数据发送给微软。所以我禁用了它

查看已修改的标签

    "workbench.editor.highlightModifiedTabs": true,
Enter fullscreen mode Exit fullscreen mode

未保存的文件会在“未保存”处显示一个大点x。此操作还会在选项卡顶部添加一条线。

提示和技巧

使用 WSL

WSL 或 Windows Linux 子系统是在 Windows 上运行 Linux 的绝佳方式，它能够让我获得比 Windows 更好的 Linux 开发体验。
我不想在 Windows 下安装 Git，也不想安装 Node.js 之类的东西。有一种非常好的方法可以将 WSL Linux 的 Git 版本集成到 VS Code 中。你需要下载WSLGIT，然后将 exe 文件放在合适的位置，并在 VS Code 设置中添加以下行：

    "git.path": "D:\\dev\\wslgit.exe",
Enter fullscreen mode Exit fullscreen mode

VS Code 也集成了终端。你可以使用 打开该终端ctrl+\`。我们还需要在 VS Code 中使用 Bash，以便添加以下代码：

    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\wsl.exe",
Enter fullscreen mode Exit fullscreen mode

这告诉 VS Code 使用默认的 WSL Linux Shell。我使用的是 Ubuntu，它自带了 Bash。

使用命令托盘

我经常看到有人在 VS Code 中四处点击来查找设置或其他功能。通常，直接输入所需内容会更方便。为此，VS Code 提供了一个命令面板。只需按下 即可CTRL+SHIFT+P。这将打开命令面板，然后您可以直接输入所需内容！
如果您不想按下SHIFT，也可以按下CTRL+P并输入>，如果这样更快的话。CTRL+P它也有助于查找所需的文件。

重新打开最近关闭的文件

只需按下 即可CTL+SHIFT+T。这将重新打开最近关闭的窗口。您可以多次按下此按钮来打开多个窗口。如果您关闭了不想关闭的标签页，此操作在浏览器中也有效 ;)

删除一个完整的单词

这不是 VS Code 独有的，但有时我听到有人尽可能快地按下退格键来删除一个单词。请直接按CTRL+BACKSPACE。这样就能删除整个单词。

删除整行

有时您想删除整行。只需按CTRL+X。这将完全删除当前选定的行。

结束

你用过 VS Code 吗？你必备的扩展程序是什么？
我是不是漏掉了一些关键设置？是不是缺少了什么快捷键？欢迎在下方留言！

感谢阅读！

你好！ Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube

文章来源：https://dev.to/lampewebdev/my-web-development-vs-code-settings-theme-extensions-tips-and-tricks-1324
Devto 翻译
PREV
VS Code 快捷键 💻Visual Studio Code 快捷键指南，提高工作效率以及您需要学习的 30 个我最喜欢的快捷键简介快捷键速查表键映射键盘快捷键设置（JSON）有用的快捷键结论
NEXT
🎉💻我 2020 年的全新开发设置（VS Code，Windows 10）