Mastering Import/Extensions in ESLint with TypeScript

In modern TypeScript development, maintaining a high - quality codebase is crucial. ESLint is a popular linting tool that helps developers catch errors and enforce coding standards. When working with TypeScript, handling imports and their extensions properly is an important aspect. This blog post will explore the fundamental concepts, usage methods, common practices, and best practices related to import/extensions in ESLint with TypeScript.

Table of Contents#

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

1. Fundamental Concepts#

1.1 Import Statements in TypeScript#

In TypeScript, import statements are used to bring in functionality from other modules. There are different types of import statements:

  • Named Imports:
// moduleA.ts
export const variableA = 10;
export function functionA() {
    return 'Hello from functionA';
}
 
// main.ts
import { variableA, functionA } from './moduleA';
console.log(variableA);
console.log(functionA());
  • Default Imports:
// moduleB.ts
const defaultExport = 'This is a default export';
export default defaultExport;
 
// main.ts
import defaultExport from './moduleB';
console.log(defaultExport);

1.2 File Extensions in TypeScript#

TypeScript files typically have the .ts or .tsx (for React - related TypeScript files) extensions. When importing these files, the extension can be specified or omitted depending on the configuration.

1.3 ESLint and Import/Extensions#

ESLint has a rule called import/extensions that enforces consistent use of file extensions in import statements. This rule helps in maintaining a uniform codebase and can prevent issues related to incorrect imports.

2. Usage Methods#

2.1 Installing Dependencies#

First, make sure you have eslint, @typescript-eslint/parser, and @typescript-eslint/eslint-plugin installed in your project. You also need the eslint-plugin-import package.

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import --save-dev

2.2 Configuring ESLint#

Create or update your .eslintrc.js file:

module.exports = {
    parser: '@typescript-eslint/parser',
    plugins: ['@typescript-eslint', 'import'],
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:import/recommended',
        'plugin:import/typescript'
    ],
    rules: {
        'import/extensions': [
            'error',
            'ignorePackages',
            {
                ts: 'never',
                tsx: 'never'
            }
        ]
    }
};

In the above configuration:

  • 'error' indicates that violations of the rule will result in an error.
  • 'ignorePackages' means that the rule will not apply to imports from npm packages.
  • { ts: 'never', tsx: 'never' } specifies that the .ts and .tsx extensions should never be included in import statements.

2.3 Running ESLint#

You can run ESLint on your TypeScript files using the following command:

npx eslint src/**/*.ts src/**/*.tsx

3. Common Practices#

3.1 Omitting Extensions#

As shown in the configuration above, it is a common practice to omit the .ts and .tsx extensions in import statements. This makes the code look cleaner and more consistent.

// Good
import { someFunction } from './utils';
 
// Bad
import { someFunction } from './utils.ts';

3.2 Handling Third - Party Packages#

When importing from third - party packages, the import/extensions rule usually does not apply. You can import them without worrying about file extensions.

import React from 'react';

3.3 Consistent Import Order#

It is also a good practice to keep a consistent order of imports. For example, you can group imports by type (third - party, local) and sort them alphabetically.

// Third - party imports
import React from 'react';
import { useEffect } from 'react';
 
// Local imports
import { someFunction } from './utils';
import { anotherFunction } from './helpers';

4. Best Practices#

4.1 Using ESLint Auto - Fix#

ESLint has an auto - fix feature that can automatically correct many of the import/extension issues. You can run the following command to apply auto - fixes:

npx eslint src/**/*.ts src/**/*.tsx --fix

4.2 Documenting Import Rules#

In a team environment, it is important to document the import rules in your project's style guide. This ensures that all developers are aware of and follow the same practices.

4.3 Regularly Updating Dependencies#

Keep your ESLint, @typescript-eslint, and eslint-plugin-import packages up - to - date. Newer versions may have bug fixes and improved functionality related to import/extensions.

5. Conclusion#

Properly handling import/extensions in ESLint with TypeScript is essential for maintaining a clean, consistent, and error - free codebase. By understanding the fundamental concepts, following the usage methods, and adopting common and best practices, developers can ensure that their TypeScript projects are well - structured and easy to maintain.

6. References#

2025-10