Implementing Standardized Import/Export Practices

# Implementing Standardized Import/Export Practices

## Description

Establish uniform methods for module imports and exports to enhance readability and maintainability in JavaScript projects.

## Category

JavaScript Cursor Rules

## Rules

1. **Use ES6 Module Syntax**

   - Always use `import` and `export` statements for module management.

     ```javascript
     // Good
     import { functionName } from './moduleName';
     export const variableName = 'value';
     ```

     ```javascript
     // Bad
     const functionName = require('./moduleName');
     module.exports = variableName;
     ```

   - Rationale: ES6 modules provide a standardized syntax that improves readability and maintainability.

2. **Avoid Wildcard Imports**

   - Do not use wildcard imports; import only the necessary components.

     ```javascript
     // Good
     import { specificFunction } from './moduleName';
     ```

     ```javascript
     // Bad
     import * as moduleName from './moduleName';
     ```

   - Rationale: Importing only what is needed reduces memory usage and improves code clarity.

3. **Consistent Import Order**

   - Maintain a consistent order for import statements:

     1. Standard library imports

     2. Third-party library imports

     3. Internal module imports

     ```javascript
     // Good
     import fs from 'fs'; // Standard library
     import express from 'express'; // Third-party library
     import { myFunction } from './myModule'; // Internal module
     ```

   - Rationale: A consistent import order enhances readability and organization.

4. **Use Default Exports for Single Exports**

   - When a module has a single export, use `export default`.

     ```javascript
     // Good
     export default function myFunction() { /* ... */ }
     ```

     ```javascript
     // Bad
     export function myFunction() { /* ... */ }
     ```

   - Rationale: Default exports are preferable for modules with a single responsibility, making imports cleaner.

5. **Use Named Exports for Multiple Exports**

   - When a module has multiple exports, use named exports.

     ```javascript
     // Good
     export const functionOne = () => { /* ... */ };
     export const functionTwo = () => { /* ... */ };
     ```

     ```javascript
     // Bad
     export default functionOne = () => { /* ... */ };
     export default functionTwo = () => { /* ... */ };
     ```

   - Rationale: Named exports provide clarity and facilitate tree-shaking for multiple exports.

6. **Avoid Exporting Mutable Bindings**

   - Do not export variables that can be reassigned.

     ```javascript
     // Good
     const CONSTANT_VALUE = 42;
     export { CONSTANT_VALUE };
     ```

     ```javascript
     // Bad
     let mutableValue = 42;
     export { mutableValue };
     ```

   - Rationale: Exporting constants ensures that the exported values remain unchanged, preventing unintended side effects.

7. **Avoid Duplicate Imports**

   - Consolidate multiple imports from the same module into a single statement.

     ```javascript
     // Good
     import { functionOne, functionTwo } from './moduleName';
     ```

     ```javascript
     // Bad
     import { functionOne } from './moduleName';
     import { functionTwo } from './moduleName';
     ```

   - Rationale: Consolidating imports reduces redundancy and improves code readability.

8. **Use Import Attributes for Non-JavaScript Modules**

   - When importing non-JavaScript modules (e.g., JSON), use import attributes to specify the type.

     ```javascript
     // Good
     import data from './data.json' with { type: 'json' };
     ```

   - Rationale: Import attributes provide explicit context about the module type, enhancing security and clarity.

## References

- [JavaScript Import Attributes (ES2025)](https://www.trevorlasn.com/blog/import-attributes-in-javascript)

- [JavaScript Coding Standards](https://github.com/alsetmx/javascript-coding-standards)

## Implementation

To enforce these practices in your project, consider integrating ESLint with appropriate rules:

{
  "extends": "eslint:recommended",
  "rules": {
    "import/no-wildcard": "error",
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal"],
        "newlines-between": "always"
      }
    ],
    "import/prefer-default-export": "error",
    "import/no-mutable-exports": "error",
    "import/no-duplicates": "error"
  }
}
By adhering to these standardized import/export practices, you will enhance the readability, maintainability, and overall quality of your JavaScript codebase.