solana-labs / eslint-plugin-require-extensions Goto Github PK
View Code? Open in Web Editor NEWLicense: Apache License 2.0
License: Apache License 2.0
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.
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!
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 ๐ฅณ
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.
I have this in my mocha test
before(() => import('../../sparql'))
The plugin did not recognize this as a needing .js
extension
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
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
how to use it in the new eslint flat config
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
.
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"
]
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.