eslint + flow support

[eleith]

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.

[Cyril Wanner]

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]

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]

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]

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

[Miles Spoor]

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'