Our team always use eslint for proper coding standards to follow rules and regulations when it es to writing codes. We have used eslint-plugin-import. It pretty solves some of our problem but not all of it.

Take this example below:

Foo.js

const Foo = "Foo"

export default Foo

Foo.jsx

import Bar from './foo'; 
// This still works. 
// It can cause confusion. 
// I want to use the original exported default name Foo instead of Bar
// otherwise show some error in the Code Editor

What I want to happen is use the original name of the default export of that module or file. Otherwise throw some error in the code editor.

Appreciate if someone could help. Thanks in advance.

Our team always use eslint for proper coding standards to follow rules and regulations when it es to writing codes. We have used eslint-plugin-import. It pretty solves some of our problem but not all of it.

Take this example below:

Foo.js

const Foo = "Foo"

export default Foo

Foo.jsx

import Bar from './foo'; 
// This still works. 
// It can cause confusion. 
// I want to use the original exported default name Foo instead of Bar
// otherwise show some error in the Code Editor

What I want to happen is use the original name of the default export of that module or file. Otherwise throw some error in the code editor.

Appreciate if someone could help. Thanks in advance.

• javascript
• eslint

Share Improve this question Follow edited Mar 13, 2019 at 7:57 KnowledgeSeeker asked Mar 13, 2019 at 7:50 KnowledgeSeekerKnowledgeSeeker 1,09822 gold badges2121 silver badges4646 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

The bad news is, there is currently no option for this.

The good news is, there is an active PR in eslint-plugin-import for exactly this feature, which only needs to be approved and the feature is ready to go. You can track the PR here.

I think what you want to do is use this rule from ESLint: no-named-as-default

You can activate this in your .eslintrc file:

{"plugins": [ "import" ], "rules": { import/no-named-as-default }}

And for more information, you can go to the import page.

Answering your question directly

In principle, you can write a custom Eslint rule that targets the ImportDefaultSpecifier and asserts that the value is some expected value. In order to make this work though, you'd need to enforce some predictable relationship between the default variable and the file name (or something similar) so that your rule can determine whether the imported value is "incorrect" in some way. This opens it's own can of worms and kicks the can down the road a bit because you've now introduced a need for another ESLint rule to enforce the consistent naming convention for exports, and any exceptions will be annoying to deal with.

My own 2 cents

I'd remend solving this problem by leveraging the benefits of named exports instead since the main advantage of a default export over a named export is the ability to rename the exported value when importing it elsewhere.

Unless it's too burdensome, I'd suggest the following as a much easier path to what you want.

1. Configure ESlint to enforce only using named exports via the import/no-default-export rule and converting your default exports to named exports.
2. Write a custom ESLint rule to detect import { NamedExport as AliasedExport } from 'source'; statements and disallow them (this is quite easy, I'll show below how to do so)
3. Either publish your rule as package and install and use as normal, or use a plugin like eslint-plugin-local-rules so you can import your rule directly.

import { ESLintUtils, TSESTree } from '@typescript-eslint/utils';
export const disallowImportAliasing = ESLintUtils.RuleCreator.withoutDocs({
    create(context) {
        return {
            ImportDeclaration(node) {
                const importsWithAlias = node.specifiers.filter(specifier => specifier.local.name !== specifier.imported.name)
                importsWithAlias.forEach(importStatement => {
                    context.report({
                        messageId: 'disallow-import-aliasing',
                        node: importStatement
                    })
                })
            },
        };
    },
    meta: {
        docs: {
            description: 'Our team enforces a requirement to use imported variables exactly as named',
        },
        messages: {
            'disallow-import-aliasing': 'Do not alias imports. Use the imported name as imported',
        },
        type: 'suggestion',
        schema: [],
    },
    defaultOptions: [],
});

export default {
    'disallow-import-aliasing': disallowImportAliasing,
} satisfies Record<string, ESLintUtils.RuleModule<any, any>>;