Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

eslint + flow support #23

Closed
eleith opened this issue May 21, 2018 · 5 comments
Closed

eslint + flow support #23

eleith opened this issue May 21, 2018 · 5 comments

Comments

@eleith
Copy link
Contributor

@eleith eleith commented May 21, 2018

my project uses eslint + flow

importing images generally works because they can be found on the file system, but when adding query params, this throws off both eslint and flow.

my workaround right now is to update .flowconfig to strip the query

[ignore]

[include]

[libs]

[lints]

[options]
module.name_mapper='^\(.+\.\(png\|gif\|jpg\|webp\)\)\?\(url\|original\|include\|inline\|webp\|sprite\)$' -> '\1'

[strict]

and to add // eslint-disable-line import/no-unresolved on the import line when i do use a query.

not sure what the best way to fix this. either some extra settings for eslint-plugin-import or to have a different api for how to trigger special actions that don't involve changing up the import line.

either way, this might not be a bug for this repo, but filing it here, in case others run into this. feel free to close.

@cyrilwanner
Copy link
Owner

@cyrilwanner cyrilwanner commented May 27, 2018

Thanks for pointing out issues with flow & eslint, @eleith! I'm using typescript in most of my projects, so I didn't encounter this yet.
The resource query params are supported by the core of webpack, so I think we can't do much and these packages should add support for it. I just saw that there is an open issue for the eslint plugin: import-js/eslint-plugin-import#991

I'll add a link to this issue in the readme to help other flow & eslint users.

@iam4x
Copy link

@iam4x iam4x commented Jun 29, 2018

Thanks 👍

I needed the SVG as well, here is a more complete regex:

module.name_mapper='^\(.+\.\(svg\|png\|gif\|jpg\|webp\)\)\?\(url\|original\|include\|inline\|webp\|sprite\)$' -> '\1'

@eleith
Copy link
Contributor Author

@eleith eleith commented Jan 17, 2019

in my .eslintrc.json i have this

  "rules": {
    "import/no-unresolved": [2, { "ignore": ["\\.(png|jpg|svg)\\?(lqip)$"] }]
  },

and it stops eslint-plugin-import from reporting a import/no-unresolved error. so i'm able to both get a warning if the file doesn't exist but no warnings if the file exists but i want an lqip.

@eleith
Copy link
Contributor Author

@eleith eleith commented Jan 17, 2019

@cyrilwanner this can't be closed by this project, so i recommend closing this ticket.

@eleith eleith closed this Jan 17, 2019
@lededje
Copy link

@lededje lededje commented Mar 23, 2020

The answer is a little out of date now. There is a resize option that includes an additional param of size, for example: ?resize&size=960

This is the regular expression I ended up using, but it is very loose at the end; you might want to tighten it up by limiting the options you can pass to it.

module.name_mapper='^\(.+\.\(svg\|png\|gif\|jpg\|webp\)\)\?\(url\|original\|include\|inline\|webp\|resize\|sprite\).+' -> '\1'

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants