web开发程序员有几种
Are you planning to get into web development? Take a tool with you, it's scary out there. Let's take a look at some common web development tools that'll help you speed up your workflow and be a better web developer.
您打算进入Web开发吗？ 随身携带一个工具，那真是吓人。 让我们看一下一些通用的Web开发工具，这些工具将帮助您加快工作流程并成为更好的Web开发人员。
Note that your mileage may vary a lot. This article just lists the most popular solutions out there in the wild. You still need to integrate them in your projects and learn more about them.
请注意，您的行驶里程可能相差很大。 本文只是列出了野外最受欢迎的解决方案。 您仍然需要将它们集成到项目中，并进一步了解它们。
With that being said, here's a list of most common tools/packages I use in my workflows regularly.
话虽如此，这是我在工作流程中经常使用的最常用工具/软件包的列表。
1个VSCode🎉 (1 VSCode 🎉)
VSCode needs no introduction. It's a beautiful and powerful code editor that supports extensions, integrated terminal, snippets, themes, shortcuts, remote SSH, and much more - according to your needs.
VSCode无需介绍。 它是一个漂亮而强大的代码编辑器，可根据您的需要支持扩展，集成的终端，代码片段，主题，快捷方式，远程SSH等。
Running on top of electron, it is cross OS compatible and is constantly improved by Microsoft as an open source project. VSCode comes with a rich set of tools, IntelliSense through Language Server Protocol, and quick fixes/patches all through the year.
它运行在电子系统之上，与跨OS兼容，并且作为一个开源项目被Microsoft不断改进。 VSCode带有丰富的工具集，通过语言服务器协议提供的IntelliSense，以及全年的快速修复/补丁。
Get VSCode now from the official VSCode site.
2个Webpack🥇 (2 Webpack 🥇)
Webpack sells itself as a module bundler, but in reality, it is much more extensible than that. You can attach a plethora of plugins and tweak its configuration to make it more robust and fit to your needs.
Webpack本身作为模块捆绑器销售，但实际上，它比它具有更大的可扩展性。 您可以附加大量插件并对其配置进行调整，以使其更加健壮并满足您的需求。
Webpack 4 comes as a zero config module bundler - that means you can get started with Webpack almost immediately! You just have to download the module using npm i webpack and then run npx webpack in your directory. Here's how to setup zero configuration with webpack:
Webpack 4作为零配置模块捆绑程序提供 -这意味着您几乎可以立即开始使用Webpack！ 您只需要使用npm i webpack下载该模块，然后在目录中运行npx webpack 。 以下是使用webpack设置零配置的方法：
3柏树🔮 (3 Cypress 🔮)
Cypress is a great e2e testing tool which can actually spin up a headless or a full chrome window to run actual tests of your code. It can interact with asynchronous code in a very intuitive manner. For example, it waits for resources to load/become available, unlike Selenium, which is quite an old technology made for automated testing of mostly static sites. Let's see how Cypress works through a quick video:
赛普拉斯是一款出色的e2e测试工具，它实际上可以旋转无头或整个chrome窗口来运行代码的实际测试。 它可以以非常直观的方式与异步代码进行交互。 例如，它等待资源加载/变得可用，这与Selenium不同，Selenium是一项用于自动测试大多数静态站点的相当古老的技术。 让我们看一下赛普拉斯的工作原理：
Cypress tests are very simple and human-friendly to write, and it does all the heavy lifting out of the box (like launching a chrome instance, proper keyboard events, trusted event emitters, you name it). Get cypress here.
赛普拉斯的测试编写起来非常简单且人性化，并且可以轻松完成所有繁琐的工作(例如启动chrome实例，正确的键盘事件，可信任的事件发射器，您可以为其命名)。 在这里取柏树。
4个TypeScript📽 (4 TypeScript 📽)
Writing plain JavaScript? It can be really painful to find subtle bugs and errors without proper linting. To make it even more powerful with better type checking and module autocompletion, take TypeScript with you.
编写纯JavaScript？ 如果找不到适当的棉絮，发现细微的错误和错误会非常痛苦。 为了通过更好的类型检查和模块自动完成功能使其更强大，请随身携带TypeScript。
TypeScript is a superset of JavaScript which transpiles down to JavaScript before executing. This means that you get JavaScript running just like before, but with the added development benefit of coding JS in a 'stricter' manner.
TypeScript是JavaScript的超集，在执行之前会向下转换为JavaScript。 这意味着您可以像以前一样运行JavaScript，但具有以“严格”方式编码JS的附加开发优势。
It wouldn't be wrong to say that TypeScript really enables helpful JavaScript codebase maintenance and makes refactoring a breeze. You can start learning TypeScript through their official docs.
毫无疑问，TypeScript确实可以实现有用JavaScript代码库维护，并使重构轻而易举。 您可以通过他们的官方文档开始学习TypeScript。
5哨兵 (5 Sentry 🐞)
Sentry is an error reporting service for production. Many a time, especially on the front end, your users might face crashes or unexpected bugs.
Sentry是用于生产的错误报告服务。 很多时候，尤其是在前端，您的用户可能会遇到崩溃或意外错误。
I personally use Sentry for codedamn, and I've fixed quite a few nasty bugs and causes of crashes which were rare and had happened to very specific users during very specific actions taken on the platform.
我个人使用Sentry进行代码诅咒 ，并且修复了很多讨厌的错误和崩溃原因，这些错误和崩溃原因在平台上执行特定操作时，针对特定用户非常罕见。
As a bonus, Sentry exists on a lot of platforms, and is not only restricted to JavaScript runtimes. This means Sentry can be used with mostly any popular tech stack.
另外，Sentry在很多平台上都存在，并且不仅限于JavaScript运行时。 这意味着Sentry几乎可以与任何流行的技术堆栈一起使用。
Sentry sends full stack trace/information about the bug right into your dashboard so that you can fix that nasty bug on the next release cycle. Read about sentry here.
Sentry将有关该错误的完整堆栈跟踪/信息直接发送到您的仪表板，以便您可以在下一个发行周期修复该讨厌的错误。 在此处阅读有关哨兵的信息 。
6 Git🏆 (6 Git 🏆)
Git is the magic wand of any large project. Git is a Version Control System (VCS) allowing you to incrementally build your software, while maintaining a complete diff of the previous builds. This means you don't lose any history and can easily revert back to last working point.
Git是任何大型项目的魔杖。 Git是一个版本控制系统(VCS)，可让您逐步构建软件，同时保持与以前版本的完整差异。 这意味着您不会丢失任何历史记录，并且可以轻松地还原到上一个工作点。
Not only this, you can branch off and work on something completely different, without actually affecting the original project. This concept is called branches in git. There's so much more about git you can learn. I love this series from thenewboston on git. Have a look:
不仅如此，您还可以分支并从事完全不同的工作，而不会真正影响原始项目。 这个概念在git中称为Branches。 您可以学习到更多关于git的信息。 我喜欢git上的newboston系列。 看一看：
The most popular solution for hosting git repos is GitHub. It offers free public and private repositories. You can learn more about git here.
托管git repos的最受欢迎的解决方案是GitHub。 它提供免费的公共和私人存储库。 您可以在此处了解有关git的更多信息。
7通天塔🎯 (7 Babel 🎯)
Babel allows you to write bleeding edge JavaScript features, but then transpile them to browsers in a standard those browsers know and have implemented for ages.
Babel允许您编写最先进JavaScript功能，然后将其转换为浏览器已知并已实现很长时间的标准。
Using babel with webpack is a very powerful combination that allows you to use cutting edge features and then bundle/minify them together. This provides the best experience for developers when developing apps as well as for serving minified builds to users for speed and performance.
将babel与webpack一起使用是一种非常强大的组合，可让您使用最先进的功能，然后将它们捆绑/最小化。 这为开发人员在开发应用程序以及为用户提供精简版本以提高速度和性能时提供了最佳体验。
For example, you can write ES2020 code in babel and let it transpile it down to the ES2015 version to ship to browsers. It makes writing JavaScript really fun and convenient as it allows you to use JavaScript from the future! Learn about babel here.
例如，您可以使用babel编写ES2020代码，然后将其转换为ES2015版本以交付给浏览器。 它使编写JavaScript变得非常有趣和方便，因为它允许您将来使用JavaScript！ 在这里了解babel。
8 Material UI⭐️ (8 Material UI ⭐️)
Material UI is a specification from Google on how layouts should be created. On top of Material UI, there are a lot of component libraries available for a number of frameworks like Angular, React, or React Native. Some component libraries include:
Material UI是Google制定的有关如何创建布局的规范。 在Material UI之上，有许多组件库可用于许多框架，例如Angular，React或React Native。 一些组件库包括：
This eases the process of building a lot of components manually for developers. And at the same time, it provides them with fast and well-designed components. Learn about Material UI here.
这简化了为开发人员手动构建许多组件的过程。 同时，它为他们提供了快速且经过精心设计的组件。 在此处了解Material UI。
9乔🌋 (9 Joi 🌋)
Data validation is an important part of any application. This is because you can never trust data coming from a user. For large scale applications with multiple endpoints to reach to backend server, it can become very tricky to handle all the edge cases.
数据验证是任何应用程序的重要组成部分。 这是因为您永远无法信任来自用户的数据。 对于具有多个终结点的大型应用程序到达后端服务器，处理所有边缘情况可能变得非常棘手。
Joi is a very handy library that helps you validate all the incoming data through a strict predefined schema. Joi allows you to construct schemas for arrays, objects and even the values they should accept.
Joi是一个非常方便的库，可帮助您通过严格的预定义架构来验证所有传入数据。 Joi允许您为数组，对象甚至它们应接受的值构造模式。
Should the input fail, it also allows you to customize the error messages. No more hassles of obj && typeof obj === 'string' in your code anymore! Using Joi's schema is not only safe but also makes your code much more readable for other developers. Learn more about Joi here.
如果输入失败，它还允许您自定义错误消息。 在您的代码中不再有obj && typeof obj === 'string'麻烦了！ 使用Joi的架构不仅安全，而且可以使您的代码对其他开发人员更具可读性。 在此处了解有关Joi的更多信息。
10个Docker🛳 (10 Docker 🛳)
Setting up docker for development comes with its own set of challenges (speaking from experience). But once done, it's worth the investment. Partially because you remove the "it-works-on-my-machine" errors.
设置docker进行开发会带来一系列挑战(从经验上来讲)。 但是一旦完成，就值得投资。 部分原因是因为您删除了“在我的机器上工作”错误。
But also, running sandboxed code has another benefit. In the unfortunate event that your web application is hacked or brought down, the docker container would make sure that the attack is contained to only that particular container and no other service is affected (unless, of course, your container has substandard security rules).
而且，运行沙盒代码还有另一个好处。 不幸的是，如果您的Web应用程序被黑或被关闭，则docker容器将确保仅对该特定容器进行攻击，并且不影响其他服务(当然，除非您的容器具有不合标准的安全规则)。
You can get started with Docker today! Start with this playlist:
您可以立即开始使用Docker！ 从此播放列表开始：
结论 (Conclusion)
The web is vast, and if you're just getting started it can be overwhelming to begin! Get some help from fellow developers who've been in your shoes. You can even reach out to me on twitter / instagram and connect. I'll be happy to help.
网络无处不在，如果您只是开始，它可能会让人不知所措！ 从曾经参与其中的其他开发人员那里获得一些帮助。 您甚至可以在Twitter / Instagram上与我联系并建立联系。 我很乐意提供帮助。
Do you wish to learn web development and other programming languages in a completely new way? Head on to a new platform for developers I'm working on to try it out today!
您是否想以全新的方式学习Web开发和其他编程语言？ 前往面向我正在开发的开发人员的新平台，今天尝试一下！
翻译自: https://www.freecodecamp.org/news/handy-web-development-toolkit/
web开发程序员有几种
1641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
