Organizing Import Statements: Best Practices and ESLint Configuration for React and Vue Projects

When you open a new project and see a flood of import statements from React, Ant Design, utility functions, and business components tangled together, it feels like a tangled ball of yarn.

Pain points include loss of focus when jumping between UI libraries and utilities, mental overhead of deciding where new imports belong, and collaboration chaos where PR reviews turn into debates over import order.

Solution : Treat import organization like arranging a wardrobe. Define clear import layers—core framework, third‑party libraries, internal modules, and sibling components—using ESLint’s eslint-plugin-import and enforce them automatically on save.

// Ideal import hierarchy
// First tier: framework core
import React, { useState, useEffect } from 'react'

// Second tier: third‑party libraries
import { Spin } from 'antd'
import { useRouter } from 'react-router-dom'

// Third tier: project modules
import { getMockDataList } from '@/service/testCenter'
import testIcon from "@/images/test/testIcon.svg"

// Fourth tier: sibling components
import Topic from '../components/Topic'

Install the plugin:

npm install eslint-plugin-import --save-dev

Configure .eslintrc (or the new eslint.config.js for ESLint v8.23+):

{
  "plugins": ["import"],
  "rules": {
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal", ["sibling", "parent"], "index", "object", "type"],
        "pathGroups": [
          {"pattern": "react", "group": "external", "position": "before"},
          {"pattern": "@/**", "group": "internal", "position": "before"}
        ],
        "pathGroupsExcludedImportTypes": ["builtin"],
        "alphabetize": {"order": "asc", "caseInsensitive": true},
        "newlines-between": "always"
      }
    ]
  }
}

Enable automatic fixing on save via VS Code settings:

{
  "editor.codeActionsOnSave": {"source.fixAll.eslint": true},
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

For Vue <script setup> projects, add a path group for the Vue family:

"pathGroups": [{"pattern": "vue*", "group": "external", "position": "before"}]

Resulting import order in a Vue file:

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'

import { formatCurrency } from '@/libs/utils'

import ProductCard from './ProductCard.vue'
</script>

Be aware of module type issues: when package.json sets "type": "module" , .eslintrc.js using module.exports will fail; switch to export default or use the new flat config format.

Also note that .eslintignore is deprecated; use the ignores field in the ESLint config instead.

Finally, ensure all required dependencies are up‑to‑date, especially globals , to avoid subtle errors like a trailing space in AudioWorkletGlobalScope .

By cleaning up import order and automating lint fixes, teams can reduce onboarding time, lower merge conflicts, and increase overall development happiness.

Conclusion : A well‑structured import hierarchy is not just a style rule but a declaration of engineering quality that improves readability, maintainability, and team morale.