📦 Template of Organized Imports

An organized import section follows a consistent hierarchy. The exact categories may vary by language or project, but this template works well for most modern projects.

General Import Template

Code Snippet
────────────────────────────────────────

1. Standard Library

2. Framework

3. Third-party Libraries

4. Project Configuration

5. Project Constants

6. Project Utilities

7. Project Services / API

8. Project Hooks

9. Project Context / Store

10. Project Components

11. Project Layouts

12. Project Features / Modules

13. Project Models / Types

14. Project Helpers

15. Parent Relative Imports

16. Sibling Relative Imports

17. Child Relative Imports

18. Styles

19. Assets

20. Side-effect Imports

────────────────────────────────────────

JavaScript / TypeScript Template

Code Snippet
// ======================================
// Standard Library
// ======================================

// ======================================
// Framework
// ======================================
import React from "react";
import { useEffect, useState } from "react";

// ======================================
// Third-party Packages
// ======================================
import axios from "axios";
import clsx from "clsx";

// ======================================
// Configuration
// ======================================
import config from "@config";

// ======================================
// Constants
// ======================================
import { APP_NAME } from "@constants";

// ======================================
// Utilities
// ======================================
import { formatDate } from "@utils/date";

// ======================================
// Services
// ======================================
import api from "@services/api";

// ======================================
// Hooks
// ======================================
import { useTheme } from "@hooks/useTheme";

// ======================================
// Context / Store
// ======================================
import { ThemeProvider } from "@context/Theme";

// ======================================
// Components
// ======================================
import Button from "@components/Button";
import Card from "@components/Card";

// ======================================
// Layouts
// ======================================
import MainLayout from "@layouts/MainLayout";

// ======================================
// Features
// ======================================
import Search from "@features/Search";

// ======================================
// Models / Types
// ======================================
import type { User } from "@models/User";

// ======================================
// Parent Imports
// ======================================
import Header from "../Header";

// ======================================
// Sibling Imports
// ======================================
import Footer from "./Footer";

// ======================================
// Styles
// ======================================
import "./App.css";

// ======================================
// Assets
// ======================================
import logo from "./logo.svg";

// ======================================
// Side Effects
// ======================================
import "./setup";

Simple Template

Suitable for small projects.

Code Snippet
Standard Library

Framework

Third-party Packages

Project Imports

Relative Imports

Styles

Assets

Types

Side Effects

Medium Project Template

Code Snippet
Standard Library

Framework

Third-party

Configuration

Constants

Utilities

API

Hooks

Store

Components

Pages

Relative Imports

Styles

Assets

Types

Large Enterprise Template

Code Snippet
Standard Library

Framework

Third-party

Polyfills

Configuration

Environment

Constants

Utilities

Helpers

Core

API

Database

Authentication

Services

Store

Context

Hooks

Models

Schemas

Types

Features

Components

Layouts

Pages

Routes

Parent Imports

Sibling Imports

Child Imports

Styles

Assets

Workers

Side Effects

React Project Example

Code Snippet
import { useEffect, useMemo, useState } from "react";

import { Link } from "react-router";

import axios from "axios";
import clsx from "clsx";

import config from "@config";

import { APP_NAME } from "@constants";

import api from "@services/api";

import { useTheme } from "@hooks/useTheme";

import Button from "@components/Button";
import SearchBar from "@components/SearchBar";

import type { User } from "@models/User";

import Header from "../Header";
import Footer from "./Footer";

import "./App.css";

import logo from "./logo.svg";

import "./setup";

Backend Project Template

Code Snippet
Standard Library

Framework

Third-party

Configuration

Database

Repositories

Models

Schemas

Services

Controllers

Routes

Middleware

Utilities

Types

Constants

Relative Imports

Python Template

Code Snippet
# ======================================
# Standard Library
# ======================================
import os
import json
import pathlib

# ======================================
# Third-party
# ======================================
import requests
import pandas

# ======================================
# Project
# ======================================
from app.services import api
from app.models import User

# ======================================
# Local
# ======================================
from .utils import helper

Go Template

Code Snippet
import (
    // Standard
    "fmt"
    "time"

    // Third-party
    "github.com/gin-gonic/gin"

    // Internal
    "myapp/config"
    "myapp/service"
)

C# Template

Code Snippet
using System;
using System.IO;

using Microsoft.AspNetCore.Mvc;

using MyProject.Models;
using MyProject.Services;

Java Template

Code Snippet
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Service;

import com.example.config.Config;
import com.example.service.UserService;

Import Group Priority

Code Snippet
Highest Priority
│
├── Standard Library
├── Framework
├── Third-party Packages
├── Configuration
├── Constants
├── Utilities
├── Services
├── Hooks
├── Context / Store
├── Components
├── Layouts
├── Features
├── Models / Types
├── Relative Imports
├── Styles
├── Assets
└── Side Effects
Lowest Priority

Tips

  • 📂 Keep one blank line between each import group.
  • 🔤 Sort imports alphabetically within each group.
  • 🧩 Use project aliases (such as @components or @utils) instead of long relative paths when possible.
  • ✂️ Remove unused imports regularly.
  • 🏷️ Keep type-only imports grouped with other imports or in a dedicated type section, depending on your team's style guide.
  • 🤖 Configure your formatter or linter (for example, Prettier with an import-sorting plugin, ESLint, Ruff for Python, or go fmt for Go) to enforce the same structure automatically.

Universal Import Skeleton

Code Snippet
Standard Library

Framework

Third-party Packages

Configuration

Environment

Constants

Utilities

Helpers

Services

Database

API

Authentication

Hooks

Store

Context

Models

Schemas

Types

Features

Components

Layouts

Pages

Routes

Parent Imports

Sibling Imports

Child Imports

Styles

Assets

Workers

Side Effects

This skeleton is intentionally comprehensive. For a small project, you might only use five or six sections. For a large application, you can expand into all of them while keeping the same top-to-bottom organization, making every file feel familiar and easy to navigate.