如何在 React 项目中对导入进行排序
如何在 React 项目中对导入进行排序
Eslint 和 Prettier 都有插件可以做到这一点
前言
最近遇到了一个很奇怪的style bug。在一个SPA项目中，如果先访问A页面，再访问B页面，就会出现页面样式问题。如果直接访问页面B，效果很好。这个bug花了我很多时间来修复，但是bug的原因很简单。 pageA 和 pageB 都导入了一些相同的组件并覆盖了样式，但是它们的顺序不同导致样式被覆盖。有一些演示代码：
//页面A
导入“./styleA.css”； // 覆盖 componentA 和 componentB 样式
从“组件/a”导入 CompA；
从“组件/b”导入 CompB； //页面B
从“组件/a”导入 CompA；
从“组件/b”导入 CompB；
导入“./styleB.css”； // 覆盖 componentA 和 componentB 样式
pageA 自定义样式的优先级高于 pageB 自定义样式。
他们可能有很多方法来修复错误，例如使用作用域 css、命名空间等。但我发现最简单的方法是对导入进行排序。
在本文中，我们可以学习两种对导入进行排序的方法：
- 更漂亮
- 埃斯林特
我正在使用 VS Code 开发一个反应项目。我已经安装了VS Code的prettier和eslint插件，项目中不会单独安装。
使用 Prettier 对导入进行排序
prettier 不支持这个功能，有一个很棒的插件可以用来对导入进行排序—— GitHub — trivago/prettier-plugin-sort-imports .
首先，让我们安装它：
npm install --save-dev @trivago/prettier-plugin-sort-imports // 或者使用纱线
yarn add --dev @trivago/prettier-plugin-sort-imports
然后，我们开始为这个插件配置我们的规则。该插件非常灵活，并且有一些 api 可以帮助我们自定义订单。
在我的项目中，我使用 进口订单 自定义进口顺序，以及 导入订单分离 分开不同的部分：
// .prettierrc.json
{
"importOrder": ["^react(.*)", "antd/(.*)", "<THIRD_PARTY_MODULES> ", "@/(.*)", "^[./]"],
“importOrderSeparation”：真
}
导入将按以下顺序：
- 反应，反应域，反应路由器
- antd（用户界面库）
- 包/第三方导入，例如 lodash。
- 项目别名导入
- 相对进口
这条规则的效果会是这样的：
保存文件时将自动使用 prettier 对其进行格式化，因此将自动对导入进行排序。
使用 Eslint 对导入进行排序
Eslint 有许多用于排序导入的插件，例如 eslint 插件简单导入排序 , eslint 插件导入 , 排序导入 .我更喜欢使用 eslint 插件简单导入排序 这更容易，并且只是配置组的一种选择。在接下来的内容中，我们将学习如何使用它。
首先，让我们在项目中安装依赖项：
npm install --save-dev eslint-plugin-simple-import-sort // 或者使用纱线
纱线添加 eslint-plugin-simple-import-sort -D
然后，我们开始为这个插件配置我们的规则：
// .eslintrc.js
模块.exports = {
//...
插件：[“简单导入排序”]，
规则：{
“简单导入排序/导入”：“错误”，
//如果我们想对导入进行分组，可以在下面使用。
“简单导入排序/导入”：[“错误”，{
组：[
[“^反应”]，
["^antd"],
["^@?\\w"],
["@/(.*)"],
["^[./]"]
]
}]
}
}
除了行之间的分隔符之外，这将产生与更漂亮的效果相同的效果：
结论
在本文中，我们将学习如何使用更漂亮的 eslint 对导入进行排序。推荐使用 prettier 方式，因为 prettier 会自动格式化半、空格等代码样式。这两种方式都可以帮助我们编写更干净、更易读、更健壮的代码，这对 CSS 规则覆盖尤其有用。
感谢阅读，希望这篇文章能帮到你，期待你 下列的 我学习更多实用技巧以成为更好的开发人员。
升级编码
感谢您成为我们社区的一员！你走之前：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
