在 React 中正确排序导入

在我准备下一篇文章的时候，我想与你们分享这篇简短的文章，其中包含了适用于你们的 React 或 React Native 应用程序的出色配置。

在 JS 文件中对导入进行排序有很多好处。首先，可以更容易地查看从特定包导入的内容；此外，如果对它们进行分组，可以轻松区分哪些导入来自第三方包或本地导入。

手动进行所有排序非常烦人，而且，如果你像我一样滥用 VS Code 的 sort-imports，那么在共享代码时，你的代码会与其他开发者的配置不兼容。这时，ESLint就能帮上忙了。

ESLint 来救援！

众所周知，ESLint 是 JavaScript 最流行的 linter。我记得在我的 React 项目中都用过它，因为它可以方便地定义一组样式规则，使代码清晰一致。

ESLint 自带了导入排序规则，虽然它们有一些优点，但并不符合我的需求。所以，我使用了eslint-plugin-import 插件。

eslint-plugin-import 是一个扩展 ESLint 导入规则的插件。它不仅提供组织和排序的属性，还能帮助避免文件路径或包名称拼写错误等问题。

我的设置

因此，您可以在开发依赖项中安装 eslint-plugin-import 库，在 ESLint 配置文件中添加插件数组并开始使用它。

我在 React 代码中要确保的一件事是，第一个导入的是 React 包，这只是为了遵循标准约定。然后，我要将它们分别分组，首先是所有第三方包，然后是所有本地文件。

所以我的规则是下一个：

"import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal"],
        "pathGroups": [
          {
            "pattern": "react",
            "group": "external",
            "position": "before"
          }
        ],
        "pathGroupsExcludedImportTypes": ["react"],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ],

• 该groups设置为每个组设定了预定的顺序。
• pathGroups可以按模式设置的路径分组。在本例中，我希望 React 导入位于其他导入之前。
• pathGroupsExcludedImportTypes定义导入类型。“React”将被视为其他类型，以便与其他外部包分离。
• newlines-between用新行将每个组分开。
• alphabetize对分组排序的顺序进行排序。我选择升序排序，并且区分大小写。

一旦运行 ESLint，代码中的导入语句应如下所示：

import React from 'react';

import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';

结论

希望这篇文章能对大家有所帮助。
如有任何建议或疑问，欢迎在评论区留言。

感谢您的阅读。