使用 ESLint 的导入，以支持自定义别名

首先

在Node.js项目中自动对import语句进行排序时，当更改自定义别名设置时，由于原样无法按照预期发挥作用，因此需要记录对应的解决方法。

前提条件

Node.js 版本

$ node -v
#v16.10.0

各种 npm 包（只列举相关的）

react: ^18.2.0

eslint: ^8.15.0

eslint-plugin-import: ^2.26.0

eslint-plugin-react: ^7.29.4

目录结构

src/
├── components
│   ├── atoms
│   │   ├── Foo.tsx
│   │   ├── Bar.tsx
│   ├── molecules
│   │   ├── Hoge.tsx
│   │   ├── Fuga.tsx
├── constant.tsx
..

其他

• VSCode の設定で、ファイル保存時にフォーマットがなされるようにしておく。

ESLint のセットアップ等については割愛する。

3. 执行

3.1 将 “@/*” 这个别名应用于 src/*。

设定

在 tsconfig.json 文件中配置别名。

{
  ..
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
    },
  },
  ..
}

使用 .eslintrc.json 文件通过 import/order 来对 import 语句进行排序配置。

{
  ..
  "plugins": ["import", "react"],
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "ignorePatterns": [".eslintrc.json", "tsconfig.json"],
  "rules": {
    "sort-imports": 0,
    "import/order": [
      2,
      {
        "alphabetize": { "order": "asc" },
        "newlines-between": "always",
      }
    ]
  }
}

格式 (格式)

展示保存适当文件时的排序示例。

import React from 'react';

import { Foo } from '@/components/atoms/Bar';
import { Bar } from '@/components/atoms/Foo';
import { Fuga } from '@/components/molecules/Fuga';
import { Hoge } from '@/components/molecules/Hoge';
import { piyo } from'@/constant'; 

在eslint-plugin-import中有一个叫做groups的东西，根据要导入的目标进行分类，并按照这个单位进行排序。import React from ‘react’属于external这个组，其他的属于internal这个组。之所以先导入react是因为该组的优先级在默认情况下是external > internal。此外，在每个组内部，我们在.eslintrc.json中设置了按字母顺序（升序）排序，所以导致了这样的排序。

在这个例子中，我们实现了一个看起来没有问题的排序。但是，让我们考虑以下情况。

对于3.2. src/components/*，给予@@/*这个别名。

假设由于 src/components/* 变得庞大，您希望设置与 src/* 的其他部分区分别名。

设定

{
  ..
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
+     "@@/*": ["./components/*"],
    },
  },
  ..
}

格式

试着保存和之前一样的文件。
这次，在保存的时候添加了别名，需要进行@/components → @@/的修改后保存。

import { Foo } from '@@/atoms/Bar';
import { Bar } from '@@/atoms/Foo';
import { Fuga } from '@@/molecules/Fuga';
import { Hoge } from '@@/molecules/Hoge';
import React from 'react';

import { piyo } from'@/constant'; 

这次，比起 react 的 import 语句，components/* 的 import 语句却先出现了。这是个人喜好的问题，但最好先对外部的像是 react 这样的东西进行排序。

因此，将以下更改加入 .eslintrc.json 文件中。

{
  ..
  "plugins": ["import", "react"],
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "ignorePatterns": [".eslintrc.json", "tsconfig.json"],
  "rules": {
    "sort-imports": 0,
    "import/order": [
      2,
      {
        "alphabetize": { "order": "asc" },
        "newlines-between": "always",
+       "pathGroupsExcludedImportTypes": ["builtin", "object"],
+       "pathGroups": [
+         {
+           "pattern": "@@/**",
+           "group": "external",
+           "position": "after"
+         }
+       ]
      }
    ]
  }
}

在 `pathGroups` 中，可以指定对特定路径进行排序。在这个例子中，将以 `@@/**` 这个路径开头的 import 语句设置为在 `external groups` 之后。然而，`@@/` 属于 `external group`，默认情况下，它不受 `pathGroups` 设置的影响（因为 `pathGroupsExcludedImportTypes` 包含 `external`）。因此，需要对 `pathGroupsExcludedImportTypes` 进行相应的设置来排除它。综上所述，结果排序如下：

import React from 'react';

import { Foo } from '@@/atoms/Bar';
import { Bar } from '@@/atoms/Foo';
import { Fuga } from '@@/molecules/Fuga';
import { Hoge } from '@@/molecules/Hoge';

import { piyo } from'@/constant'; 

现在已经变成了自然而然的排序顺序，没有任何不协调之处。

4. 我参考了一下这个页面。