加快Web开发人员工作流程的工具和方法

Web开发将大量堆栈捆绑在一起， 工具， 编程语言， 和更多。 这里的某些工具/工作流程在某些情况下会起作用， 其他一些。 为了更好地解决这个问题， 认为这篇文章是从WordPress前端开发人员的角度撰写的， 尽管这些工具非常广泛，并且可以在许多情况下使用。

我在工作流程中进行的最大更改之一是在计算机上设置了tmux（macOS，但它当然也适用于Linux）。 虽然我可能没有充分利用它的潜力， 它做得很好，让我立即在项目之间切换， 这样可以节省很多时间。

tmux在项目的GitHub存储库上写了一个冗长的“入门”页面，以进行检出。 它也可以与可以直接启用鼠标支持的包装盒中的键盘配合使用。 tmux使用可在系统之间共享的配置文件以进行即时设置。

那么，它如何改变了我的工作流程？

• 使用tmux，您只需两个按键即可轻松拆分屏幕并在项目中导航。 因此，您可以在一个视图中运行“ gulp”， 在另一个上运行的命令 SSH连接到第三台服务器， 还有一些统计数据排在第四位。
• 它为每个项目提供了类似于“选项卡”的窗口。 在这里，您可以通过两次按键切换到不同的项目。 我一直在选项卡中打开大约20多个项目，当我必须处理一个新项目时，我只是将其切换到那里， 并且gulp已经在运行。 我在正确的目录中，可以在2秒内开始工作。
• 始终保持整个设置为ON。 您不必每次开始工作时都要做， 它总是在那里。 如果您的计算机关闭并重新启动， 您只需将其“恢复”（使用简单的插件）到您的标准设置即可，然后在大约5秒钟内再次恢复正常。 有趣的是，在I7-9900K上需要100％使用。
• 窗口中的每个面板都是其自己的实例。 因此，您可以轻松地为每个面板运行不同的Node版本。

来源

Alfred是适用于Mac的“生产力应用程序”，同样适用于Windows和Linux。 有些事情， 阿尔弗雷德（Alfred）所做的是：

• 只需输入几个字母，即可快速访问打开的程序
• 快速转到目录
• 浏览直到直接在弹出窗口中找到所需的内容
• 使用不同的程序打开文件
• 搜索网络或已集成的程序等。

借助其Powerpack，还有许多其他“工作流”集成也可以使工作自动化。

它也可以用作快速访问计算器， 在整个操作系统中管理代码段（甚至无需访问它， 它会自动将其展开）， 保存剪贴板历史记录（救星）， 与终端集成等。 您可以在应用程序网站上找到有关它的所有信息。

我如何使用它：

• 首先，当然 打开应用程序。 我没有点击图标上的指针， 我只输入字母，然后我们就可以了。
• 编写CSS时将其用作计算器（通常带有EM值）。
• 剪贴板历史记录–有时我会将5-6件东西叠放在剪贴板中，然后将它们粘贴到任何需要的代码编辑器中。 或回去几天找一些电子邮件， 一些片段， 等等，甚至是一个小功能，在一个项目中有所作为，并在另一个项目中有所帮助。 浏览代码只需2-3秒，而不是10分钟以上的时间。
• 在进行设计工作时转到工作目录，或者直接浏览到XD文件而不浏览查找器。 与取景器中的一分钟左右相比，再次需要2-3秒。
• 代码段–我为Asana准备了一个不错的“注释”代码段，并提供了结果的屏幕截图， 添加提交链接的地方， 给下一个开发人员的信息， 状态（是否在暂存状态等）。 这是团队可以轻松遵循的所有评论中始终如一的信息。 只需不到2秒钟的时间即可键入和展开代码段。

哦，我的Zsh –使终端设备有用– ZSH是宝。 有270多个插件可供选择。 它使用一个简单的配置文件， 从我的旧设置迁移到新设置只花了几分钟。 tmux也一样 因此整个开发过程只需几分钟。 有如此众多的插件可供选择， 您肯定会发现对您的工作流程有用的东西。

我使用的ZSH中最常用的插件之一是“ Z”， 了解您用于访问事物的路径。 然后，只需使用几个关键字符，便可以将您带到任何您想要的地方。

示例：将跳转到 –之前去过的地方的捷径。 使目录之间的切换轻松自如。

考试 –更漂亮的LS输出。 您可以在他们的网站上找到更多信息。 简而言之， 它还提供文件和目录的快速，美观的输出。 再次-漂亮。

ripgrep –超级快速的搜索。 当您需要使用数千行代码查找数千个文件时， 你不应该等待太多。 Ripgrep在这里拯救您。 而且当然， 它带有大量其他有用的功能和有意义的标志。 它也随之而来。gitignore文件以使结果有意义。

来源

git打开 – Paul Irish在Github上使用的一个小工具，它可以执行其操作，它会打开git存储库。 您可能会说什么？ 您还记得您正在从事的那个项目的确切URL， 首次， 在六个月内？ 导航到它需要多长时间？ 此命令将直接为您打开。 以及更多–它也将引导您到正确的分支。

您的CLI！ 就我而言 我们的工作围绕WordPress。 作为CLI，您可以通过它愉快地进行WP安装。 一个简单的新站点设置采用基本命令，例如mkdir（创建文件夹）， git clone（克隆一个仓库）， wp核心下载， wp db create， wp db导入（全部来自WP-CLI）。 键入所有内容并进行快速配置，然后在1分钟后运行新设置。

请确保仔细检查是否还有其他类似的CLI可以与您使用的工具一起使用！

来源

我选择的代码编辑器/ IDE是VS Code。 以前是崇高的 但是在功能更强大的机器上，当向下滚动较大的文档时，我现在可以正确使用VS代码，而无需获得3 FPS。

对于下面的列表，我不会使用ESLint等超级著名的扩展， GitLense或主题/图标包，几乎在您会找到的所有文章中都有介绍。

• 自动关闭标签-这样您不必每次都写关闭标签。 当用Emmet做干净的HTML时没用， 但是当您需要快速编辑时会有所帮助
• 自动重命名标签-在进行编辑时也很有帮助。 当您只编辑其中一个时，它将直接更改关闭/打开标签。
• 密码拼写检查器-现在，当您用错字写东西时，不必在PR中感到尴尬。 或者只是使用它来保持开源项目的美观。
• 重复操作–超级有用，可从现有文件制作新文件。 这是与Cmd + P一起运行的命令。 在前端工作中制作新的sass / js文件效果非常好。
• Jumpy –很棒的工具！ 只需点击您定义的快捷方式，它将在每个单词旁边输出两个小的字母框。 输入它们，您的光标将跳到它。 一种无需使用鼠标即可浏览文件的快速方法。

还有一个提示/提醒-您可以使用VS代码预览图像。 当您开发UI并遵循设计者的图片时， 您可以将其拖动到视口并在侧面查看。

那里到处都是惊人的工具和仪器。 每当您发现自己正在做一些重复的工作时，或者您想知道“是否应该有一种更简单的方法来做这件事”时， 只是搜索！ 实际上，很可能确实有一种更快的方法。 如果您一年四季都这样做， 最后，您将获得一个非常紧凑的工作流程，使您可以非常快速地完成工作。

如果可能的话， 还可以找到一些“安全措施”-设置棉绒， 自动化您的构建设置， 建立可以使用的“入门模板”， 甚至为自己编写一些CLI。

DevriX是一个由WordPress插件开发人员组成的团队。 每当插件架构不稳定或容易拆卸时， 我们构建了量身定制的插件，以最好的方式解决您的问题， 针对速度和用户体验进行了优化。

DevriX的创意主管和前端开发人员
亚历克斯（Alex）的热情在于学习新的网络技术， 探索创新的方法来优化网站性能并改善用户体验。 亚历克斯（Alex）喜欢骑自行车和数字艺术，最近开始在ELSYS技术学校教授设计。