linter: script-only rules from eslint-plugin-vue

[haoqunjiang]

I understand that a built-in vue template parser isn't planned currently.

But even without template syntax support, it is possible to incorporate a few dozen correctness rules from eslint-plugin-vue: https://eslint.vuejs.org/rules/#priority-a-essential-error-prevention and that will still be valuable to Vue projects.

I've made a list of these rules:

rule name	note
vue/no-arrow-functions-in-watch
vue/no-async-in-computed-properties
vue/no-computed-properties-in-data
vue/no-dupe-keys
vue/no-export-in-script-setup	need to tweak partial_loader/vue.rs to return more info
vue/no-expose-after-await
vue/no-lifecycle-after-await
vue/no-mutating-props	won’t be complete without template syntax detection, but still useful
vue/no-ref-as-operand
vue/no-reserved-component-names
vue/no-reserved-keys
vue/no-reserved-props
vue/no-shared-component-data
vue/no-side-effects-in-computed-properties
vue/no-use-computed-property-like-method
vue/no-watch-after-await
vue/prefer-import-from-vue
vue/require-prop-type-constructor
vue/require-render-return
vue/require-slots-as-functions
vue/require-valid-default-prop
vue/return-in-computed-property
vue/return-in-emits-validator
vue/valid-define-emits
vue/valid-define-props
vue/valid-next-tick
vue/no-boolean-default	Not listed as essential in the ESLint plugin, but should be IMO
vue/no-required-prop-with-default	Not listed as essential in the ESLint plugin
vue/no-this-in-before-route-enter	Not listed as essential in the ESLint plugin
vue/valid-define-options	Not listed as essential in the ESLint plugin
vue/no-deprecated-data-object-declaration	This and below are deprecation rules to prevent Vue-2 API usage in Vue 3 projects
vue/no-deprecated-destroyed-lifecycle
vue/no-deprecated-dollar-listeners-api
vue/no-deprecated-dollar-scopedslots-api
vue/no-deprecated-events-api
vue/no-deprecated-props-default-this
vue/no-deprecated-vue-config-keycodes
vue/no-deprecated-delete-set
vue/no-deprecated-model-definition

Will Oxlint accept PRs to add these rules? If so, I'm happy to contribute a few.

[Sysix]

I personally would love to support vue rules (which do not require a template parser). @Boshen would like to move vue template parser to a own (sub)-project. (see https://github.com/oxc-project/oxc/issues/8171#issuecomment-2595922299) So my suggestion: The future vue+oxc-project should handle all vue related things + lint rules. When everything is stable we can try to migrate it into the main project if there is interest.

When the core team agrees to implement it in the main project, we need to know the unsupported rules, so we can mark them in a future tracking issue: https://github.com/oxc-project/oxc/blob/2c53a728b0128290260e3ce676e25a2a0d94ff56/tasks/lint_rules/src/oxlint-rules.mjs#L47-L54

[haoqunjiang]

So my suggestion: The future vue+oxc-project should handle all vue related things + lint rules.

But Vue components are not just single file components - the rules I listed in this issue not only apply to <script> blocks in .vue files, but they also work in regular .js/.ts files, and even in .jsx/.tsx files.

There are plenty of large Vue projects that don't use .vue files:

• vuetify, with 2 million+ monthly downloads, is authored in .tsx exclusively (https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAlert/VAlert.tsx)
• quasar, 600k+ monthly downloads, authored in plain h calls: https://github.com/quasarframework/quasar/blob/dev/ui/src/components/avatar/QAvatar.js
• naive-ui uses .tsx: https://github.com/tusen-ai/naive-ui/blob/main/src/alert/src/Alert.tsx

They can all benefit from having these rules built into the oxlint core.

IMO, these are just general JavaScript/TypeScript lint rules with framework-API-awareness, not much different from eslint-plugin-react. If eslint-plugin-react can be built in, why not eslint-plugin-vue?

[Boshen]

I wasn't aware of this situation. I'll do some feasibility research.

[Sysix]

@camc314 can this be closed because of #11440?