solana-labs/eslint-plugin-require-extensions

eslint-plugin-require-extensions

TypeScript doesn't transform extensions and doesn't enforce file extensions.

This is a simple eslint plugin that ensures that relative imports and exports have .js extensions.

Credit for the original implementation goes to johnrees. ❤️

1. Install

npm install --save-dev eslint-plugin-require-extensions

2. Edit .eslintrc

{
    "extends": [
        "plugin:require-extensions/recommended"
    ],
    "plugins": [
        "require-extensions"
    ]
}

3. Code

// source.js

import Target from './target';

4. Lint

eslint .

source.js
  1:1  error  Relative imports and exports must end with .js  require-extensions/require-extensions

5. Fix

eslint --fix .

// source.js

import Target from './target.js';

eslint-plugin-require-extensions's Issues

How to properly combine it with import/extensions rule in an ESM project?

If I use your conf from README and also do (FYI I'm using airbnb eslint conf):

"import/extensions": [
  "error",
  "ignorePackages",
  {
    "js": "always",
    "cjs": "always",
    "jsx": "always",
    "ts": "never",
    "tsx": "never",
    "json": "always"
  }
]

then eslint doesn't complain if I import a ts/tsx file without an extension, e.g.:

import Root from 'components/Root'; // no errors for this tsx file

If I change import/extensions conf and say "tsx": "always" instead, then I get:

Missing file extension "tsx" for "components/Root" eslint[import/extensions]

When I import it as a js file there are no errors and that's great:

import Root from 'components/Root.js'; // great, but I need the error when the .js extension is missing

So how come your extension isn't jumping out of joy to step in and save the day :)

Thanks

TypeScript paths

When using custom TypeScript paths the import is completely ignored (and therefore ESM invalid):

import { hello } from "@/world"; // IGNORED!
import { test } from "@/world/wow" // IGNORED!

Correct behaviour:

import { hello } from "@/world/index.js";
import { test } from "@/world/wow.js"

There is the need to understand if the import path points to a folder or a file and then apply the corresponding logic.

.jsx support?

Hello!

Thank you for this great library!

However, it seems that it doesn't treat the .jsx extensions right.

It replaces imports like:
import { Component } from './component.jsx'; to
import { Component } from './component.jsx.js';
which is obviously wrong.

Thanks!

[Question] Why I need to set extends and plugins in config?

What is the purpose of the "plugins" section? For me it works well with just the extends section.

{
    "extends": [
        "plugin:require-extensions/recommended"
    ],
    "plugins": [
        "require-extensions"
    ]
}

Autofix broken for index file imports

Index files are often imported by the name of the folder that contains them,
i.e. a file with modules:
./externalTypes/index.js

could be imported like so:
import * from ./externalTypes.

Once an extension is added, however, the index file needs to be specified correctly. The expected lint fix behavior for the above would be:
import * from ./externalTypes/index.js

...but the observed behavior is:
import * from ./externalTypes.js
(which is a file that doesn't exist)

To reproduce:

git clone [email protected]:apollographql/apollo-server.git
git checkout trevor/import-lint

Open apollo-server/packages/server/src/ApolloServer.ts
Remove /index.js from L54 import (./externalTypes/index.js)
Trigger autofix (via save), note the incorrect import.

For the last step...it seems like VSCode is using our eslint config correctly but the CLI isn't for some reason (news to me). If reproduction via editor is insufficient let me know and I can try to get that resolved so that my last step in the reproduction can become npx eslint . --fix.

Allow "parametrised" imports

Web bundlers such as vite or webpack, allow adding "query strings" to import paths to trigger special behaviour.

For example, vite has a built-in feature to load any file as string by appending ?raw to the module path.

I fixed that on a branch and will be happy to submit a PR once #4 is merged

False-negative on JSON import

This could potentially affect other non-script imports?

I have in my code this import:

import mockObjects from './mock-data.json' assert { type: 'json' }

The plugin complains and when "fixed", it changes that line into

import mockObjects from './mock-data.json.js' assert { type: 'json' }

I think that rule should only apply to some pattern, like/.+(t|j)s(x)?/ by default. Possibly configurable.

`require-extension` rule does not apply to dynamic imports

I have this in my mocha test

before(() => import('../../sparql'))

The plugin did not recognize this as a needing .js extension

usage in eslint flat config

how to use it in the new eslint flat config

Quotes

Premise: Thanks for this plugin, is awesome!

When autofixing via eslint --fix this plugin forces all imports to have single quotes (').
The correct behaviour should apply the correct configured quotes (", ', `).

Thanks 🥳