如何优雅的管理import？

在前端开发中，规范的 import 顺序可以提高代码的可读性和可维护性。以下是一种常见的规范：

1. 首先按照模块的来源分类：

   • 第三方库或框架（如React、Vue、Lodash等）
   • 核心库或内置模块（如Node.js提供的模块）
   • 自定义的模块或组件

2. 在每个分类中，按照以下顺序排序：

   • 具名导入（多个导入声明）
   • 默认导入（单个导入声明）
   • 导入副作用（无导入声明）

下面是一个示例：

    // 第三方库或框架
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { useState, useEffect } from 'react';
    // 核心库或内置模块
    import fs from 'fs';
    import path from 'path';
    import http from 'http';
    import _ from 'lodash';
    // 自定义的模块或组件
    import Header from './components/Header';
    import Footer from './components/Footer';
    import { formatData, validateData } from './utils/dataUtils';

    

这种规范的好处是，通过按照固定的顺序组织 import 语句，可以方便开发者快速查找和理解项目中的依赖关系。

如果你使用的是 Visual Studio Code，可以考虑安装插件来自动排序和格式化 import 语句。例如，Prettier 插件可以自动按照约定的顺序对 import 语句进行排序和格式化。