如何选择你的Web开发环境

我们指的是哪种环境？

操作系统

代码编辑器/集成开发环境

浏览器

其他工具

你呢？

这篇文章摘自我的博客，记得去看看博客上的最新内容哦😉

就我个人而言，我喜欢赏心悦目的东西，无论是现实世界还是软件。我非常重视丰富的功能、易用性、可定制性和设计。我（我想很多其他开发者也是如此）总是力求找到最好的工具。但是，由于世上没有完美，软件也一样。各种限制、边界和其他不完美之处迫使我们做出妥协，决定哪些功能以及最终哪些工具对我们的特定用例更重要/更好。基于此，在今天的文章中，我想分享一下我——一个长期追求理想的人——关于我寻找最佳Web 开发环境的历程的一些想法。让我们开始吧！🚀

我们指的是哪种环境？

在深入探讨这个话题之前，我们先来了解一下我们所说的开发环境究竟是什么。如果仅仅把它理解为代码编辑器或集成开发环境（IDE），那就大错特错了。“环境”这个词通常指的是很多东西，而不仅仅是一个单一的实体。我在之前的文章中已经提到过这些。依我之见，我们可以将开发环境至少分为四类：

• 操作系统——我们环境中最通用的部分，会极大地影响我们其他工具的可用性。
• 代码编辑器/ IDE——对于每个程序员来说都必不可少，它具有许多附加功能，如果选择不当，既可以提高生产力，也可以降低生产力。
• 浏览器——Web开发工作流程中最重要的一部分，它对于获取知识、测试和娱乐都非常有用😅
• 其他工具——当然还有很多其他工具，具体选择取决于开发者的个人偏好。所有额外的软件、浏览器扩展、Git 工具、服务以及标准/常用库都可以在这里找到它们的用武之地。

牢记以下分组，让我们深入了解并逐一探索以上每个类别！

操作系统

除非你使用在线/云端 IDE，否则选择合适的操作系统很可能至关重要。这里你有三个不错的选择：Windows、Linux和macOS ，当然不包括Chrome OS、Android或iOS这类极端且强烈不推荐的选项——说真的，千万别用它们。😉

macOS

我想先说说macOS。主要是因为我对它了解不多，毕竟我从没用过 Mac。我并不是 Windows 的粉丝——我当然希望有一天能拥有一台 Mac！所以，我只能说说我的印象，而这些印象都非常好。我有一种奇怪的感觉，好像几乎所有开发者都在用 Mac。当然，我知道这并非事实，但每次我偶然看到 GitHub 上的 issue 或者别人的工作场所照片时，总能看到 iMac 或 MacBook。而且，Mac 似乎介于 Linux 和 Windows 之间。它拥有丰富的创意软件选择（有些软件在其他平台上找不到），同时又兼具 Windows 的定制性不足和 Linux 强大的终端访问和整体编码环境。以上都是基于我的一些个人经验。当然，以上所有观点可能都不完全正确，毕竟我之前并没有真正使用过 Mac。

视窗

接下来是Windows。它可能是目前最流行、最知名的操作系统。你的新设备很可能预装了Windows系统，这使其成为一种默认选择。就我个人而言，在我开始从事Web开发工作时，Windows也是我唯一的操作系统。乍一看，它似乎是个不错的选择。Windows拥有三者中最丰富的软件资源（可惜的是，它在代码开发方面有所欠缺）。浏览器和集成开发环境（IDE）基本上就是你开始Web开发所需的一切——而这些在Windows系统中都已具备。

但是，当你开始做一些更高级的事情，或者更糟糕的是——学习像 C++ 或 Rust 这样的编译型语言——你就会开始感到一些不适。就我而言，NodeJS 及其原生绑定构建过程促使我最终下定决心——转投 Linux。仅仅是 Windows 的 CMD 或 PowerShell 所提供的控制力和便利性，就远不及 Linux 和 macOS。此外，Windows 整体上比大多数 Linux 发行版慢一些*，而且缺乏同样的自定义性和扩展性。一些 Windows 粉丝可能会对使用 Windows子系统 for Linux (WSL)的选择提出异议（我甚至不认为虚拟机是一个可行的选择——性能损失太大了）。好吧，首先，它实际上更像 Linux 而不是 Windows 😅，其次，它当时还处于早期阶段，这意味着它有很多 bug（我不知道它现在怎么样，而且我可能也不会去尝试）。我偶尔还会用Windows，唯一的原因就是它的创意软件，虽然Linux的软件库规模稍小一些，但很多情况下开源（免费）软件更多。所以，没错，我目前还是会继续用Linux，这就引出了我们的最后一个选择……

Linux

Linux 已经成为我日常使用的操作系统一段时间了，而且它几乎完美！想必你们大多数人都知道 Linux 用户支持其操作系统的那些标准理由——开源/免费、几乎无所不能（超级计算机、物联网、安卓系统），以及更高的安全性（这是 Windows 的另一个缺陷）。那么，让我们来看看它的其他方面，其中之一就是高度的可定制性。在 Linux 中，你可以更改几乎所有东西（甚至可以构建自己的发行版）！这正是我每次更换发行版（我时不时会切换）都要花上好几天时间来定制的原因！虽然效率不高，但却乐趣无穷！😄 总之，你可以轻松地将 Linux 系统从里到外都打造成你想要的样子！除此之外，Linux 中的一切都显得更加流畅、快速、便捷且易于控制。

但是，也有一些缺点。例如，创意软件的选择有限，尽管它的编程软件是最好的！别误会，Linux 上的软件仍然很多，只是不如其他两个操作系统那么多。当然，作为专业人士，你会意识到开源软件（OSS）在这里的影响很大，所以选择也​​更自由。接下来是配置。如今，许多 Linux 发行版都预装了一些有趣且有用的工具，但如果你想充分发挥系统的性能，就必须手动进行调整。这个过程需要一定的知识和时间。但它也能带来一些新的经验，这些经验将来可能会派上用场，因为……你知道，很大一部分服务器（尤其是用于 Web 开发后端的服务器）都运行 Linux 系统。😂

代码编辑器/集成开发环境

现在操作系统已经安装完毕，是时候深入了解一下软件了。更重要的是，要关注代码编辑器——大部分工作都在这里完成。这里通常有两种选择：一种是功能齐全、内置大量实用功能的集成开发环境（IDE）；另一种是代码编辑器——简单、轻量、快速，通常也具有很强的扩展性。让我们来看看一些最常用的选项！

WebStorm

WebStorm是这份列表中唯一的 IDE，但它确实非常出色！我用过几次，也经常在它和其他代码编辑器之间切换使用。就我个人而言，我认为它是目前最好的 Web 开发 IDE！它拥有我试用过的所有 IDE（包括 NetBeans 和 Eclipse）中最优秀的设计和工具。它与JetBrains 的其他产品不相上下，而且它们之间的协同工作也相当出色。它的自动补全功能以及对各种框架和库的支持都无可挑剔。

当然，它也有一些缺点。主要缺点是它不是免费的（除非你做的是真正的开源软件），以及性能问题。加载过程和日常使用都非常耗电。当然，考虑到这款工具的高级性和复杂性，这也不算什么稀奇事。但是，许多代码编辑器都实现了插件系统，提供了更好的自定义性，因此性能也更高。WebStorm 也有自己的插件系统，但可用的扩展程序不如竞争对手那么多。而且，配置这款 IDE 确实需要一些时间，因为设置选项很多，很容易让人迷失方向。🤨

Sublime Text

Sublime Text 过去是、现在仍然被许多人视为一款优秀的代码编辑器。它的主要优势在于速度。由于部分代码是用 C++ 编写的，它的性能可能是这里列出的所有工具中最好的。但是，除此之外，恕我直言，它还有一些问题。请记住，我是从 Web 开发的角​​度来谈论这个问题的。

Sublime Text 虽然不错，但它缺少集成扩展管理系统这一点让我很失望。其他免费软件都内置了扩展管理功能，而付费软件却需要安装外部的Package Control，这实在令人难以置信。此外，它的 JavaScript 和 TypeScript 自动补全功能也略显不足。当然，我并不是说这款软件不好，它收费且不专注于 Web 开发相关的自动补全功能。付费软件有时反而比免费软件更稳定、更优化（但这并不总是意味着它是开源的）。而且，对于 C++ 或 Java 等编译型语言来说，自动补全功能（虽然并非人人都需要）确实可以做得更好。以上只是我的初步印象，由于上述原因，我还没有深入使用过它。

原子

Atom是我第二常用的编辑器，也是这份榜单上两款基于Electron 平台且开源的编辑器之一。它有很多优点，对我来说最主要的是它的设计。你绝对找不到比它更简洁、直观、美观的界面了！强大的扩展系统更是锦上添花，提供了丰富的主题和强大的附加工具！自动补全功能虽然不错，但还有提升空间。此外，Atom 最大的优势之一是它与 GitHub 的集成（原因显而易见）。如果你经常使用 GitHub 代码库，那么你会发现它非常实用。

和所有编辑器一样，Atom 也存在一些缺点。其中最主要的问题是性能。它有时会运行缓慢、出现 bug或响应迟钝。此外，自动补全功能也略显卡顿，不够完善。当然，这些问题未来有望得到改善，Atom 团队目前正在努力改进。

VS Code

你可能早就料到了，对吧？😄 VS Code是我日常使用的主力编辑器。它基于Electron 平台，而且是开源软件，对Web 开发的各个方面都提供了强大的支持……用起来就像回家一样自在。😅 它拥有可能是最丰富的扩展程序，提供了各种各样的附加功能。它支持 JavaScript 和 TypeScript（VS Code 的主要源代码语言）的自动补全。性能也非常出色，充分展现了 NodeJS 的速度优势。此外，它还拥有简洁的用户界面、集成的终端，以及与其他编辑器相比最庞大的社区。

那么，这款工具有什么缺点吗？目前我还没发现什么，除了 VS Code 专注于 Web 开发可能会对它对其他语言的支持造成一些负面影响。不过，我现在并不太在意这一点，所以我觉得它对我来说是完美的选择，强烈推荐给所有 Web 开发者！👏

浏览器

关于网络浏览器，其实没什么好说的——几乎每个用电脑的人都有自己的浏览器。但在网页开发中，浏览器除了是获取知识和娱乐的钥匙之外，更是一种工具。一种既能带来好处也能带来坏处的工具。下面就来解释一下。

火狐浏览器

Firefox由Mozilla开发，是最受欢迎的网页浏览器之一。Mozilla 似乎非常关心网页开发者，不仅为他们提供浏览器的特别版本，而且更重要的是，还提供了MDN——一个关于 JavaScript 和网页开发知识的绝佳资源。

每个版本的 Firefox 都拥有一个功能强大的扩展商店，提供数千款附加组件供用户选择。这对于一些效率提升和编程相关的扩展程序来说尤为重要。

Firefox 的一大亮点在于其开发者工具。尤其是在开发者版本中，Firefox 内置了多种工具，可以帮助您进行设计、原型制作和代码编写。如果您还不习惯其他开发者工具，不妨试试 Firefox。

铬/铬合金

全球最受欢迎的浏览器，由谷歌开发。Chrome 占据了超过60%的浏览器市场份额，对于每一位 Web 开发人员来说， Chrome（或者至少是基于 Chromium 内核的浏览器）都是必备工具……至少在进行测试时是如此。Chrome 本身是一个闭源产品，它构建于 Chromium 之上——Chromium 是一个开源的Web 浏览器项目，同样由谷歌维护。如今，Chromium 正逐渐成为 Web 开发和浏览器领域的行业标准——它为Electron以及其他浏览器（例如Opera、Brave和未来的Microsoft Edge）提供支持。此外，Chromium 还包含V8——目前速度最快的 JavaScript 引擎，它为 NodeJS 提供支持。

除此之外，与其他浏览器相比，基于 Chromium 内核的浏览器拥有可能是最庞大的扩展程序库。这其中包括许多生产力工具和开发工具。同时，Chromium 还拥有市面上最优秀、最知名的开发者工具之一。因此，使用 Chrome 或任何其他基于 Chromium 内核的浏览器进行开发简直是一种享受。🤗

总结一下，正如你所见，Chromium几乎无处不在。所以，如果你想对抗谷歌日益增长的主导地位，你至少需要一些基于 Chromium 的浏览器来测试你的产品，以覆盖大约 70% 的潜在用户。🙂

内置

除了其他浏览器（其中许多基于 Chromium 内核）之外，还有一些操作系统相关的浏览器，例如旧版IE、Microsoft Edge或Safari。主要问题在于，所有这些浏览器（无论是否已弃用）仍然被一部分潜在用户使用，而且它们分别基于不同的引擎——Trident 、 EdgeHTML和WebKit 。这种情况要求您（开发者）至少尝试在这些特定的软件上测试您的产品。但当您意识到并非每个人都能随时使用 Mac 和 Windows 电脑时，这项工作就变得更加困难了。

哦，当然，你也需要在移动浏览器上测试你的网页应用。只是提醒一下。🤔

其他工具

这其实可以另写一篇文章来详细探讨。基本上，所有你能称之为开发工具的东西都属于这一类，从浏览器和代码编辑器扩展到独立工具。

就我而言，这个组主要由一些VS Code 扩展组成。它包含了一整套 JS 相关工具，包括NPM和TypeScript支持、Prettier、ESLint、Live Server和TODO Highlighter。没错，我可能把它们都列出来了。而且，如果你正在使用 VS Code 或者 Atom，那么你很可能也安装了一些扩展！

就我个人而言，目前我没有使用任何浏览器扩展程序。一些比较流行的此类工具包括适用于 Firefox 和 Chrome 的React和Redux DevTools 。它们无需任何额外设置，即可在浏览器中提供额外的调试选项。借助这些以及类似的工具，您可以轻松提升特定库和框架的开发效率和体验。

最后，关于独立应用，除了代码编辑器之外，我本身并不使用任何开发软件。我的电脑和安卓手机上都只安装了Slack ，以及一个简单的Git 客户端。所以，没什么特别的。😉

你呢？

简单介绍了一下我的个人网页开发环境，我很想了解一下你们的配置。你们也用 VS Code 吗？还是更喜欢功能齐全的 IDE？你们用 Chromium 浏览器是不是很头疼，还是很喜欢它？欢迎在下方评论区留言。😉

当然，如果您喜欢这篇文章，请考虑分享 给其他人，并访问我的个人博客。也欢迎在Twitter和Facebook上关注我。祝您一切顺利，我们下篇文章再见！✌