This task encompasses the work to automatically detect common pitfalls and style inconsistencies in Vue.js components. [[ https://github.com/wikimedia/eslint-config-wikimedia/pull/225/commits/c0729e0961471fc7ee37732c15a14b5ef0b5b0c9#diff-c2a5ba82b204730128a0a70aad1b07d8 | This functionality is not yet available ]] in eslint-config-wikimedia so this task may require upstream changes to add an initial [[ https://github.com/vuejs/eslint-plugin-vue | eslint-plugin-vue ]] or collaboration with WMDE, which is using [[ https://github.com/wmde/eslint-config-wikimedia-typescript | eslint-config-wikimedia-typescript ]] for their TypeScript Vue.js work (see T249304#6032440).
[[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/MobileFrontend/+/286719f/src/mobile.startup/View.js#452 | MobileFrontend components are inseparable from jQuery ]]. Its usage has encouraged building features in a way that is both verbose and challenging to reason about, and discourages composition. In some cases, the results of our best devs have been nearly incoherent. Additionally, the outputs of the API often return more API-specific types that imply further usage such that any interaction compounds. All of this and large jQuery runtime dependencies. For these reasons, new usages of jQuery should be the exception rather than a rule. Further, jQuery usage from within components should be totally forbidden to avoid the shortcomings of previous frameworks. If we don't make this change, we will miss severall important rationales given for migrating frameworks (see T225453).
== Globals dependencies
The default for components is no dependencies needed until proven otherwise. Implicit global dependencies in general, such as `mw`, `OO`, `$` should be intensely scrutinized to take the most minimal subset possible for shared components. These implicit global dependencies massively bloat the overall shared component library footprint which limits its relevance, shareability, and development abilties outside of the MediaWiki ecosystem. This was a major shortcoming of alternative frameworks considered and a requirement identified in T225572. Great pains should be taken to write components as plainly as possible and to avoid the classic dependencies and their pitfalls that are now well known.
== Acceptance criteria
-  If Vector is used, [[ https://github.com/wikimedia/eslint-config-wikimedia | eslint-config-wikimedia ]] is configured for Vue.js linting (likely just adding an `extends`). If a new project is started, an eslint-config-wikimedia dev dependency and configuration is added with Vue.js linting enabled.
-  All components are linted.
-  ESLint is configured to forbid all jQuery interactions.
-  Regardless of the repo, Vector is configured (with exceptions for the two existing jQuery plugin files).
-  Adding any jQuery anywhere else causes `npm t` to fail.
-  [[ https://www.mediawiki.org/wiki/Vue.js | The wiki ]] is updated to clarify that jQuery and other traditionally implicit MediaWiki dependencies cannot be a dependency of components as a design goal. These dependencies may currently be available on every page load but they will never not be if they're embedded in the components.
-  (Optional) lint dist to ensure only ES5 sources are shipped. E.g., [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/Popups/+/76e02fa/.eslintrc.es5.json | see Popups ]].
== Open questions
-  Are these Wikimedia-specific rules applicable for the project if it's built outside of ResourceLoader? [[ https://wikimedia.slack.com/archives/CT45NKWTY/p1585894320117400 | Many rules assume RL usage ]] so it may make sense to use the Vue plugin directly instead depending on how the project is built.