Supports for <script setup> and <style> variable injection

[ota-meshi]

eslint-plugin-vue should be change to support <script setup> and <style> variable injection.
I will list the work needed to support these on this issue.

These features were released as experimental features in Vue.js 3.0.
So I think that the inclusion or not of the changes listed here will not affect the release of eslint-plugin-vue 7.0.0.

---

Core

• Change the parser to parse multiple <script> blocks. (issue Supports for <script setup> and <style> variable injection vue-eslint-parser#78)
• Change the parser to parse <style vars="...">. (issue Supports for <script setup> and <style> variable injection vue-eslint-parser#78)
• Change the parser to parse <script setup="...">. (issue Supports for <script setup> and <style> variable injection vue-eslint-parser#78)
• more

Rules

• Add vue/valid-define-props rule #1560 Add no-refer-vars-script-setup-define-props rule that disallows referencing variables in defineProps() of <script setup>.
• Add vue/valid-define-emits rule #1561 Add no-refer-vars-script-setup-define-emit rule that disallows referencing variables in defineEmit() of <script setup>.
• Add vue/no-export-in-script-setup rule #1559 Add no-export-in-script-setup rule that disallows ES export in <script setup>.
• Change no-parsing-error rule to reports parsing errors in <script setup="...">.
• Change no-parsing-error rule to reports parsing errors in <style vars="...">.
• Add valid-script-setup rule that checks whether <script setup="..."> is valid arguments.
• Add valid-style-vars rule that checks whether <style vars="..."> is valid expression.
• Add no-vars-setup-export-default rule that disallows referencing variables in export default of <script setup>.
• more

---

vuejs/rfcs#227
https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
vuejs/rfcs#231
https://github.com/vuejs/rfcs/blob/style-vars-2/active-rfcs/0000-sfc-style-variables.md

https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md
https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-style-variables.md

[ux-engineer]

I can see you've added this new rule vue/experimental-script-setup-vars in pull 1303. Do you still need to implement the logic for this rule?

[ux-engineer]

I'm getting error `Definition for rule 'vue/experimental-script-setup-vars' was not found.In package-lock.json it can see the installed version for this package to be. 7.0.0-beta.3

@ota-meshi is there a way to install the newest beta.4 where this rule was added, by using Vue CLI, or do I need to await for some CLI plugins to be updated?

[steffchep]

I have the same issue. Still using vue2, too, so that rule seems irrelevant for me

[ota-meshi]

Please open a new issue.

[mellester]

not sure if this is they correct issues to comment on or if I should move this to a separate issue.

My problem is I have a <script setup async> block and I get parsing errors if I use the 'await' keyword.
Edit:Spelling

[ota-meshi]

As you can see from the fact that this issue has not been resolved, eslint-plugin-vue does not yet support <script setup>.

[yyx990803]

The RFC has been finalized and we should start working on this!

[ota-meshi]

I started working on it 😉