VSCode 神兵策！--插件篇（加强版）

众所周知，VS Code 是一款由微软开发的免费开源软件，它凭借其出色的性能、灵活的扩展性和丰富的功能集，成为了开发者们的首选工具。无论您是一名前端开发者、后端工程师还是数据科学家，VS Code 都能满足您的需求。它提供了丰富而直观的用户界面，使得编写、调试和管理代码变得更加轻松高效。

其强大的插件生态系统，提供了各种各样的插件，涵盖了几乎所有流行的编程语言和开发框架。无论您是使用 JavaScript、Python、Java、C# 还是其他语言进行开发，您都可以找到相应的插件来提供语法高亮、智能代码补全、调试支持等功能。这些插件可以根据您的需求进行个性化配置，提供了无限的扩展性和定制化的可能性。今天我就来讲讲我的插件配置（前端开发环境）

摘要

VS Code 是一款流行的代码编辑器，它具有强大的插件系统，可以让开发者根据自己的需求定制和扩展 VS Code 的功能。本文介绍了 VS Code 插件系统的基本原理和结构，以及针对前端开发方向的一些常用和优秀的插件，包括语言支持插件、代码检查插件、调试工具插件和辅助工具插件。通过安装和使用这些插件，可以提高前端开发的效率和质量。 我将从以下几个方面进行介绍：

• 语言支持插件：提供语法高亮、自动补全、格式化等功能，例如 HTML CSS Support、JavaScript (ES6) code snippets 等。
• 代码检查插件：提供代码质量检查、错误提示、风格规范等功能，例如 ESLint、Prettier 等。
• 调试工具插件：提供断点调试、变量监视、日志输出等功能，例如 Debugger for Chrome、Live Server 等。
• 辅助工具插件：提供一些便捷的辅助功能，例如 GitLens、Auto Rename Tag 等。

但，今天我要介绍点不一样的

正文

1. VS Code 插件系统简介

1.1 VS Code 插件系统的原理

VS Code 插件系统的原理是基于 Extension Host 的机制，即 VS Code 本身是一个主进程，它负责管理 UI、编辑器、命令等核心功能，而插件则是运行在一个单独的子进程中，称为 Extension Host。Extension Host 通过 IPC 通道与主进程进行通信，实现插件的加载、激活、执行等操作1。

Extension Host 提供了一套 VS Code API，让插件开发者可以使用 TypeScript 或 JavaScript 来编写插件，调用 VS Code 的各种功能和服务。

1.2 VS Code 插件系统的结构

插件系统的结构并不复杂，主要包括：package.json 文件、入口文件（main）和其他文件和资源。如果想自己动手开发一个插件可以看这篇文章： VS Code 插件系统的结构主要包括以下几个部分

2. 前端开发方向插件推荐

2.1 语言支持插件

略！这个大家都知道要装啥，没啥好介绍的。

2.2 代码检查插件

2.2.1 ESLint

这个不用多说，强大的代码规范工具。团队开发的基建工具之一。这里主要是为了引出下面的 NPM 包。

2.2.2 @antfu/eslint-config GitHub

很多人可能会装 Prettier 但是在我个人的实践中，我发现在与 ESLint 的兼容上，它存在着诸多问题，虽然也有插件可以一定程度上做些弥补，但始终无法根本解决。美化 VS. 规范?这是个痛苦的抉择，也许这篇文章可以让你有些改观# 为什么我不使用 Prettier

选择这个 NPM 包主要有以下考虑：

• 可以很好的规范 Vue3、TS、React 的代码
• 可以自动根据规范进行代码格式化
• 可以对不规范的代码给出报错信息
• 代码有大神维护，安装操作简单，方便团队内部全员推广，保持代码规范统一。

当然，如果团队内部有特殊的规范，建议 Fork 这个仓库进一步修改。相信我，发布成一个 NPM 包是一个绝佳的选择。

2.3 调试工具插件

调试工具插件是指可以帮助开发者在 VS Code 中进行断点调试、变量监视、日志输出等功能的插件。VS Code 内置了 Node.js 的调试器，但是如果想要调试其他的语言或运行时，就需要安装相应的调试器插件。

2.3.1 Debugger for Chrome

老牌插件我就不多说了，这里只是吐槽一下，前端代码调试用起来真的不是那么方便！涉及到交互确实更加复杂，经常是跳着跳着就不知道到哪里了，只能手动结束！

2.3.2 Vitest 安装

这是一款测试工具，是 Vite 工具的最佳搭档。之所以放到这里主要是想告诉大家，代码调试除了 console.log、 Debbuger 还有单元测试，它效率或许超乎你的想象！

调试是代码开发中最费时费力的“脏活”，我们往往需要通过短点调试来一步步筛查 Bug 的藏身之处！但是繁重而重复的工作实在让人沮丧！设想一下，如果 Bug 在开发的时候就暴露出来？如果我们每一步都有“质量检查”这一兜底工作？如果我们可以把调试的过程“固定”下来变成直观的代码？如果原来手动重复的工作让代码来自动执行？你的工作是否瞬间轻松很多！

想想你为啥不敢碰自己写过的代码？为什么不愿意接多变的需求？为什么明明看到代码有问题却不敢修改？一切的原因就是我们无法确保开发过程的每一步都是正确的，无法在修改一个问题时即使发现修改带来的副作用。如果遇到以上问题，那么你可能需要在你的代码中加入测试代码（代码质检员）了。

2.4 辅助工具插件

2.4.1 File Nesting Updater 安装

File Nesting Updater 是一款可以自动更新文件嵌套配置的插件，它基于 antfu/vscode-file-nesting-config 这个仓库提供的配置文件，可以让你的文件树更加整洁和清晰。文件嵌套是 VS Code 的一个内置功能，它可以让你将一些相关的文件放在同一个节点下，例如：

File Nesting Updater 插件可以让你自动获取最新的文件嵌套配置，并应用到你的 VS Code 设置中，无需手动复制粘贴。你可以通过以下配置来控制插件的行为：

• fileNestingUpdater.autoUpdate：是否自动更新文件嵌套配置，默认为 true。
• fileNestingUpdater.autoUpdateInterval：自动更新文件嵌套配置的间隔时间（分钟），默认为 720（即 12 小时）。
• fileNestingUpdater.promptOnAutoUpdate：是否在自动更新文件嵌套配置后弹出提示，默认为 true。
• fileNestingUpdater.upstreamRepo：提供文件嵌套配置的仓库地址，默认为 antfu/vscode-file-nesting-config。
• fileNestingUpdater.upstreamBranch：提供文件嵌套配置的仓库分支，默认为 main。

你也可以通过执行命令 File Nesting Updater: Update config now 来手动更新文件嵌套配置。这个插件对于想要优化文件树显示的开发者来说非常有用。

2.4.2 i18n Ally 安装

项目中需要引入国际化功能的，推荐安装这个插件。没错，又是 @antfu 的作品！（膜拜大神！）

废话不多说，先来直观感受一下：

除了直接显示翻译内容，还支持显示语言切换，定义跳转（F12 / Ctrl+鼠标点击 / Vim中的 gd 指令）等功能

两点坑：

• 插件会自动在我们文件目录的 .vscode\setting.json 中写入一些配置信息，但是如果是 Monorepe 项目生成的配置需要调整一下才能使用：

json
复制代码
{
    "i18n-ally.localesPaths": [
        "src/locales/lang", // 这里循序需要调整一下
        "src/locales",
    ],
    "i18n-ally.ignoredLocales": [
        "src/locales/lang/index.ts" // 这里要排除无关的文件，不然会报 warning
    ],
    "i18n-ally.enabledParsers": [
        "ts",
        "json"
    ],
    "i18n-ally.enabledFrameworks": [
        "vue",
        "react"
    ],
    "i18n-ally.sortKeys": true,
    "i18n-ally.keystyle": "nested", // 翻译路径格式,
    "i18n-ally.sourceLanguage": "en",
    "i18n-ally.displayLanguage": "zh-cn", // 这里注意是要与你的文件名同名
}

• 由于是自动生成配置文件，当你删除这个文件时会发现删不掉！这时候需要先关闭插件再删！有点无语，不过无伤大雅。

2.4.3 Unocss 安装

Unocss 是一款即时按需生成原子 CSS 的引擎，它受到了 Windi CSS、Tailwind CSS 和 Twind 的启发，但是有以下特点 GitHub：

• 完全可定制 - 没有核心工具类，所有的功能都是通过预设提供的。
• 无需解析、无需 AST、无需扫描，它是即时的（比 Windi CSS 或 Tailwind JIT 快 5 倍）。
• ~6kb min+brotli - 零依赖和浏览器友好。
• 快捷方式 - 别名工具类，动态生成。
• Attributify 模式 - 在属性中分组工具类。
• 纯 CSS 图标 - 使用任何图标作为单个类。
• 变体组 - 使用公共前缀对工具类进行分组的简写。
• CSS 指令 - 在 CSS 中使用 @apply 指令复用工具类。
• 编译模式 - 在构建时将多个类合成为一个。
• Inspector - 交互式地检查和调试。
• CSS-in-JS 运行时构建 - 使用一行 CDN 导入使用 Unocss。
• VS Code 扩展
• ESLint 配置
• PostCSS

Unocss 支持多种安装方式，包括 Vite、Nuxt、Astro、Webpack、CDN、Runtime、CLI 等。Unocss 对于想要使用原子 CSS 的开发者来说非常有用。

来看看插件的运行效果：

• 再我们写原子类的时候可以给出很好的代码提示
• 可以显示 icons 上海量的图标，是不是很直观！

2.4.4 Iconify IntelliSense 安装

又一个海量图标库，瞬间实现图标自由！实现效果大致与 Unocss 一样

2.4.5 git-commit-plugin 安装

git commit 信息的规范化工具。可以帮助我们生成规范的提交信息。我用着还可以，老鸟手写就是规范，可以略过。

2.4.6 AWS Toolkit 安装

目前应该是最强的免费 AI 代码补全工具了。装上试试吧。交互方面也做了优化，比下面的 Tabnine AI 好用！这个多说无意，需要自己上手试试。

2.4.7 Project Manager 安装

项目管理工具，帮助我们把分散在各个目录的项目仓库集中管理起来，放在右边侧边栏也挺方便的。

2.4.8 Tabnine AI 安装

AI 代码补全工具，可以极大提高编码效率。谁用谁知道！

2.4.9 Vim 安装

我愿称之为最强编辑工具！虽然在 VS Code 中使用还有点不太兼容，但是后面我会出一篇专门介绍在 VS Code 中使用 Vim 的方法，基本可以让你拥有丝滑体验。

其他插件推荐

GitHub 看到这里希望能点个 star ^_Y

总结

VS Code 插件系统是一种灵活和强大的机制，可以让开发者根据自己的喜好和需求来定制和扩展 VS Code 的功能。本文介绍了 VS Code 插件系统的基本原理和结构，以及针对前端开发方向的一些常用和优秀的插件。这些插件可以帮助前端开发者提高编码效率，保证代码质量，方便调试和测试，以及享受更多的便捷功能。希望本文能够对想要使用或者开发 VS Code 插件的读者有所帮助。

这里给大家分享一份Python全套学习资料，包括学习路线、软件、源码、视频、面试题等等，都是我自己学习时整理的，希望可以对正在学习或者想要学习Python的朋友有帮助！

CSDN大礼包：全网最全《全套Python学习资料》免费分享🎁

😝有需要的小伙伴，可以点击下方链接免费领取或者V扫描下方二维码免费领取🆓

👉CSDN大礼包🎁：全网最全《Python学习资料》免费分享（安全链接，放心点击）👈

​

1️⃣零基础入门

① 学习路线

对于从来没有接触过Python的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。

② 路线对应学习视频

还有很多适合0基础入门的学习视频，有了这些视频，轻轻松松上手Python~

③练习题

每节视频课后，都有对应的练习题哦，可以检验学习成果哈哈！

因篇幅有限，仅展示部分资料

2️⃣国内外Python书籍、文档

① 文档和书籍资料

3️⃣Python工具包+项目源码合集

①Python工具包

学习Python常用的开发软件都在这里了！每个都有详细的安装教程，保证你可以安装成功哦！

②Python实战案例

光学理论是没用的，要学会跟着一起敲代码，动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。100+实战案例源码等你来拿！

③Python小游戏源码

如果觉得上面的实战案例有点枯燥，可以试试自己用Python编写小游戏，让你的学习过程中增添一点趣味！

4️⃣Python面试题

我们学会了Python之后，有了技能就可以出去找工作啦！下面这些面试题是都来自阿里、腾讯、字节等一线互联网大厂，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

5️⃣Python兼职渠道

而且学会Python以后，还可以在各大兼职平台接单赚钱，各种兼职渠道+兼职注意事项+如何和客户沟通，我都整理成文档了。


上述所有资料 ⚡️ ，朋友们如果有需要 📦《全套Python学习资料》的，可以扫描下方二维码免费领取 🆓
😝有需要的小伙伴，可以点击下方链接免费领取或者V扫描下方二维码免费领取🆓

👉CSDN大礼包🎁：全网最全《Python学习资料》免费分享（安全链接，放心点击）👈

​