skip to content

ESLint
配置 import/order

#JavaScript#Front-End

如果你也在项目中遇到了杂乱无章的引用（第三方库、业务组建、封装的工具函数以及类型声明文件）的问题，可以尝试使用这个配置解决。

安装依赖

pnpm i @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-import -D

更新 .eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "import"],
  "extends": ["next/core-web-vitals"],
  "rules": {
    "@typescript-eslint/consistent-type-imports": "error",
    "import/order": [
      "error",
      {
        "groups": [
          ["builtin", "external"],
          ["internal", "parent", "sibling", "index", "object"],
          ["type"]
        ],
        "newlines-between": "always-and-inside-groups"
      }
    ]
  }
}

如何使用

如果使用的是 VSCode 需要安装 ESLint，在需要调整 import 顺序的文件下使用快捷键 ctrl + p，搜索 ESLint:Fix all auto-fixable Problems 并执行

对比

before

import Select from '../../components/Select'
import { useState, FunctionComponent } from 'react'

after

import { useState } from 'react'

import Select from '../../components/Select'

import type { FunctionComponent } from 'react'
上一篇
探索 filename-reserved-regex
下一篇
RxJS 三步走：Create、Combine、Listen