2022年前端快速开发工具 - Christoph

2022年前端快速开发工具 - Christoph

今年我尝试了大量的前端工具来优化我的[开发者体验](/posts/principles-of-devx)。我发布了一个令人难以置信的快速最小模板，具有合理的默认值，您可以使用它来快速启动新项目：cpojer/vite-ts-react-tailwind-template.

该模板带有用于前端开发的基本工具，具有最小的合理默认值，使其易于使用、快速入门，并适用于任何顶层框架。它针对性能进行了调整，不仅在实际速度方面，而且在编写代码时最大限度地提高您的专注时间，从而提高您的交付速度。

Vite
Vite是我用过的最好、最快的开发服务器。起初我是持怀疑态度的，但现在我不喜欢在任何没有使用Vite的前端项目上工作。通过引擎盖下的esbuild，它构建整个项目的速度比其他人热重载一个变化的速度要快。虽然其他捆绑器可以做到快速，但Vite做到了开箱即用，几乎不需要配置。

如果你还没有使用它，在一个小项目上试试，不要回头看。

Tailwind
Tailwind是另一个我最初持怀疑态度的项目。经过一年的使用，Tailwind的权衡对我来说是合理的。它将造型抽象为一个CSS变量系统，而不是直接分配CSS属性，这种方式是天才的。如果你想要合理的默认样式、智能的样式组合，以及整个项目的一致性，我推荐你使用它。它处理黑暗模式样式的方式也很好。

我们考虑了其他的选择。

• Emotion。如果上述标准对你不适用，比如你的公司有一个明确的设计系统，或者你有高度具体的造型需求，那么就使用情感。
• 许多其他的CSS-in-JS库。目前，Emotion是我最喜欢的一个。

pnpm
pnpm是赢得我心的JavaScript软件包管理器。它是一个快乐的工具，基本上任何与包管理或monorepos有关的东西都可以使用，它的速度很快，并且在你遇到第三方包的问题时提供了逃生通道。然而，虽然我更新了许多项目使用pnpm，并向大家推荐它，但这个模板对你所使用的包管理器没有意见。

注意：我发现，对于长期运行的项目来说，经常更新你的依赖关系是最理想的。取决于有多少自动化测试，以及项目处于哪个开发阶段，我甚至可能每天更新依赖关系。这使我能够将第三方更新中的问题隔离在较小的变化范围内，并确保我不会落后太多，使更新成为一件麻烦事。

ESLint和Prettier
ESLint和Prettier被广泛采用，你可能已经在使用它们。它们都是围绕着代码风格而服务的，表面上看，在ESLint中运行Prettier似乎是个好主意。然而，在分析ESLint在一些项目上运行缓慢的原因时，我注意到Prettier一直在占用ESLint总运行时间的50%左右。如果你在保存时格式化你的文档，那么在ESLint中同时运行Prettier是没有意义的。

对于CI或本地测试运行，我现在把prettier --cache --check .和eslint --cache .作为单独的命令并行运行。这两个项目现在都支持--缓存标志，以减少它们在本地开发时的工作量。你应该使用这些标志!

尽管有Prettier的存在，关于代码风格的争论仍然存在，比如如何对ES模块导入进行排序。手动对ES模块进行排序是很浪费时间的，而且通常会导致你在写代码时失去上下文，然后不得不浏览文件的顶部来修改你的导入语句。我喜欢使用@trivago/prettier-plugin-sort-imports插件，它可以自动对新的导入进行排序，并与TypeScript的自动导入功能完美配合。同样地，prettier-plugin-tailwindcss也会自动对你代码中的Tailwind类进行排序。

最后，我的默认ESLint配置和Prettier配置是为一致性而设计的。我对一些诸如ES模块导入的具体顺序没有意见，但我确实关心在一个项目中拥有一个一致的顺序。

npm-run-all
我喜欢在本地开发时运行所有的测试和检查。npm-run-all1将你的脚本并行化，如果有一个检查失败就立即失败，确保不会拖累你。

"scripts": {
  "build": "vite build",
  "dev": "vite dev",
  "format": "prettier --write .",
  "lint:format": "prettier --cache --check .",
  "lint": "eslint --cache .",
  "test": "npm-run-all --parallel tsc:check lint lint:format",
  "tsc:check": "tsc"
}

Node.js中的ECMAScript模块
Node.js中的ES模块（ESM）在孤立的情况下是很好的，但生态系统的整合和遗留的第三方包使ESM很难使用。我花了太多的时间试图弄清楚如何在不破坏一切的情况下用Node使用ESM，而不是用神秘的错误信息。说真的，我至少尝试了五次，但都没有成功，而且还做了一些取舍，我不愿意做。以下是我的要求。

• 使用本地ESM。
• 快速的JS编译。
• 当文件发生变化时，立即重新启动脚本。

VS代码扩展
这里有四个扩展，让我在流程状态下停留的时间更长，尤其是All Autocomplete 和 Error Lens。

code --install-extension bradlc.vscode-tailwindcss
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension usernamehw.errorlens

如果你想了解更多的VS Code专业术语，我最近刚刚写了关于我最喜欢的VS Code扩展。

前端开发从未像现在这样有趣。每当有人创造出改变游戏规则的工具时，我仍然感到兴奋。上面的许多工具都给我留下了深刻的印象，它们是如此的快速和令人愉快。我敢说你能给我展示更快、更好的工具