使用eslint自动调整代码引入顺序(react版)

一、例子

导入前

代码语言：javascript复制

import React from "react";
import Button from "../Button";

import  "./styles.css";
import type { User } from "../../types";
import { getUser } from "../../api";

import PropTypes from "prop-types";
import classnames from "classnames";
import { truncate, formatNumber } from "../../utils";

导入后

代码语言：javascript复制

import React from "react";
import classnames from "classnames";
import PropTypes from "prop-types";

import { getUser } from "../../api";
import type { User } from "../../types";
import { formatNumber, truncate } from "../../utils";
import Button from "../Button";
import "./styles.css";

二、操作流程

安装插件：插件地址：https://github.com/lydell/eslint-plugin-simple-import-sort

代码语言：javascript复制

yarn add -D eslint-plugin-simple-import-sort

配置：

在.eslintrc中分别加入simple-import-sort，如下

代码语言：javascript复制

plugins: [
  'react',
  'simple-import-sort'
],

在rules中加入以下规则

代码语言：javascript复制

'simple-import-sort/imports': [
  'error',
  {
    groups: [
      // react放在首行
      ['^react', '^@?\w'],
      // 内部导入
      ['^(@|components)(/.*|$)'],
      // 父级导入. 把 `..` 放在最后.
      ['^\.\.(?!/?$)', '^\.\./?$'],
      // 同级导入. 把同一个文件夹.放在最后
      ['^\./(?=.*/)(?!/?$)', '^\.(?!/?$)', '^\./?$'],
      // 样式导入.
      ['^. \.?(css)$'],
      // 带有副作用导入，比如import 'a.css'这种.
      ['^\u0000'],
    ]
  }
],
'simple-import-sort/exports': 'error',// 导出
'import/no-duplicates': 'error',// 合并同一个导入。ide自动导入，会导致impoprt {a} from 'A'和impoprt {a1} from 'A'导入2次
'import/first': 'error', // 确保所有导入位于文件的顶部
'import/newline-after-import': 'error' // 确保在导入后有换行符

最后执行

代码语言：javascript复制

eslint --fix src/**

以上信息参考：1、使用eslint自动调整import代码顺序

2、https://github.com/lydell/eslint-plugin-simple-import-sort

react eslint

0 人点赞