Rule proposal: `prefer-extension-over-mime`

[RND332]

Description

If the MIME type is not strictly accurate, suggest using a specific file extension.

Examples

// ❌
<input type="file" accept="image/x-icon" />

// ✅
<input type="file" accept=".ico" />

// ❌
<input type="file" accept="application/x-rar-compressed" />

// ✅
<input type="file" accept=".rar" />

// ❌
<input type="file" accept="application/x-zip-compressed" />

// ✅
<input type="file" accept=".zip" />

// ❌
const input = document.createElement('input');
input.type = 'file';
input.setAttribute('accept', 'image/x-icon');
// Or: input.accept = 'image/x-icon';

// ✅
input.setAttribute('accept', '.ico');
// Or: input.accept = '.ico';

Proposed rule name

prefer-extension-over-mime

Additional Info

example of "bad" MIME type: https://en.wikipedia.org/wiki/ICO_(file_format)#MIME_type

[sindresorhus]

I think generally MIME type is better. Extensions can more often be ambiguous.

[RND332]

How about forcing the use of all applicable MIME types for the extension instead?

// ❌
<input type="file" accept="image/x-icon" />

// ✅
<input type="file" accept="image/x-icon, image/vnd.microsoft.icon" />

Same for .rar and .zip

[silverwind]

I prefer extensions because they are unambiguous while mime is up to interpretation of the UA. Also for exhaustiveness, this should also check inputElement.setAttribute.

BTW I wasn't aware that this plugin also has JSX rules.

[RND332]

Thanks for pointing out, i updated example. Also maybe its make sense to make this rule just an option for #2913?
Like

rules: {
    'unicorn/valid-mime-type': ['error', { 'prefer-extension-over-mime': true }]
}