Under vite imports of *.vue files do not work without an explicit extension.
- Add a linter rule that will error when a *.vue file is imported without an explicit extension. (example)
- Fix existing imports
Description
Description
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | None | T288685 Establish active/active multi-dc support for Toolhub | |||
| Resolved | bd808 | T115650 Create an authoritative and well promoted catalog of Wikimedia tools | |||
| Resolved | bd808 | T271483 Complete and announce initial production deployment of Toolhub | |||
| Resolved | sbassett | T273020 Security Readiness Review For Toolhub | |||
| Open | None | T288551 Investigate replacing vue-cli with vite and webpack with rollup for Toolhub | |||
| Open | None | T302820 Use explict .vue extension for Vue imports |
Event Timeline
Comment Actions
Not quite sure how to exclude the helper .js imports from the linter rule
I haven't tried myself, but I think the upstream config for the rule (https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/extensions.md) implies that it can be tuned by extension.
Comment Actions
The config that is working best so far for me is the one resulting in the above behavior:
{
"files": [
"vue/src/**/*.vue"
],
"plugins": [
"import"
],
"rules": {
"import/extensions": [ "error", "ignorePackages", { "vue": "always" } ]
},
"settings": {
"import/resolver": {
"alias": {
"map": [
[
"@",
"./src"
]
],
"extensions": [
".vue",
".js",
".json"
]
}
}
}
}On the other hand, configuring the rule as "rules": { "import/extensions": [ "error", { "js": "never", "vue": "always" } ]}, results in all vue imports simply being ignored.
"rules": { "import/extensions": [ "error", "always", { "js": "never" } ]} is even more confusing as it complains about missing .js file extensions EXCEPT for the one import that actually has it, but according to the linter, shouldn't:
