default-import-name.md

Enforce default imports matching file names (default-import-name/default-import-name)

🔧 This rule is automatically fixable by the --fix CLI option.

Options

Name	Description
ignoredSourceRegexes	List of regexes to ignore import sources
importPathRegexToTemplate	Object mapping import path regex to import name template based on the file name

importPathRegexToTemplate

The importPathRegexToTemplate option allows you to define custom mappings between import paths and import names using string templates. This is useful for enforcing consistent naming conventions across your codebase.

Default Configuration

By default, the rule includes these mappings:

{
  "importPathRegexToTemplate": {
    // Kebab-case files to camelCase
    ".*/[a-z0-9]+(-[a-z0-9]+)+(.[a-z0-9]+)?$": "${value|camelcase}",
    // Astro files to PascalCase
    ".*.astro": "${value|pascalcase}",
    // React files to PascalCase
    ".*.tsx": "${value|pascalcase}",
    // CSS files to 'styles'
    ".*.css": "styles",
    // SVG files to camelCase with Src suffix
    ".*.svg": "${value|camelcase}Src",
    // React SVGR
    ".*.svg?.*react.*$": "${value|pascalcase}Icon",
    // React SVG Url
    ".*.svg?.*url.*$": "${value|camelcase}Url"
  }
}

String Template Format

The string template format supports:

• ${value} - The original file name without extension
• Pipes for transformations:
  • pascalcase - Convert to PascalCase
  • camelcase - Convert to camelCase
  • snakecase - Convert to snake_case
  • uppercase - Convert to UPPERCASE
  • lowercase - Convert to lowercase

Examples

Basic File Name Matching

import user from "./user.ts"; // ✅ Correct
import user_1 from "./user.ts"; // ❌ Incorrect

Kebab-case to camelCase (Default)

import getUser from "./get-user.ts"; // ✅ Correct
import getUser_1 from "./get-user.ts"; // ❌ Incorrect

Custom Mapping Examples

1. SVG Files with Icon Suffix

{
  "importPathRegexToTemplate": {
    "\\.svg$": "${value|pascalcase}Icon"
  }
}

// File: logo.svg
import logoSrc from "./logo.svg"; // ✅ Correct
import logoSrc from "./logo.svg"; // ❌ Incorrect

2. Constants in UPPER_SNAKE_CASE

{
  "importPathRegexToTemplate": {
    "\\/constants\\/.*\\.ts$": "${value|snakecase|uppercase}"
  }
}

// File: constants/user-config.ts
import userConfig_1 from "./constants/user-config.ts"; // ✅ Correct
import userConfig from "./constants/user-config.ts"; // ❌ Incorrect

3. Service Files with Suffix

{
  "importPathRegexToTemplate": {
    ".*\\.ts$": "${value|pascalcase}Service"
  }
}

// File: user.ts
import user_1 from "./user.ts"; // ✅ Correct
import user from "./user.ts"; // ❌ Incorrect

4. React Hooks with use Prefix

{
  "importPathRegexToTemplate": {
    "\\/hooks\\/.*\\.ts$": "use${value|pascalcase}"
  }
}

// File: hooks/user.ts
import user_1 from "./hooks/user.ts"; // ✅ Correct
import user from "./hooks/user.ts"; // ❌ Incorrect

Multiple Patterns

When multiple patterns match a file, the last will be used. For example:

{
  "importPathRegexToTemplate": {
    ".*\\.ts$": "notUse${value|pascalcase}",
    "\\/hooks\\/.*\\.ts$": "use${value|pascalcase}"
  }
}

// File: hooks/get-user.ts
import getUser_1 from "./hooks/get-user.ts"; // ✅ Correct
import getUser from "./hooks/get-user.ts"; // ❌ Incorrect

ignoredSourceRegexes

The ignoredSourceRegexes option allows you to specify patterns for import sources that should be ignored by the rule.

Default Configuration

By default, the rule ignores:

{
  "ignoredSourceRegexes": [
    // Third party modules that are not path alias
    "^(?![@~])[^.]*$",
    // Scoped packages
    "^@[a-zA-Z0-9-_]+/[a-zA-Z0-9-_.]+$"
  ]
}

Examples

1. Ignore Specific Files

{
  "ignoredSourceRegexes": ["ignoredSource.astro$"]
}

import IgnoredSource from "./ignoredSource.astro"; // ✅ Ignored

2. Ignore Third-party Libraries

{
  "ignoredSourceRegexes": ["^third-party-lib"]
}

import something from "third-party-lib"; // ✅ Ignored