Skip to content

Commit 2655921

Browse files
committed
Update docs related to <script setup>.
1 parent a770662 commit 2655921

File tree

3 files changed

+67
-2
lines changed

3 files changed

+67
-2
lines changed

docs/README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@ This plugin allows us to check the `<template>` and `<script>` of `.vue` files w
1515
ESLint editor integrations are useful to check your code in real-time.
1616

1717
:::warning Status of Vue.js 3.x supports
18-
This plugin supports the basic syntax of Vue.js 3.0, but the Vue.js 3.0 experimental features `<script setup>` and `<style vars>` are not yet supported. Follow [#1248](https://github.com/vuejs/eslint-plugin-vue/issues/1248) for more details.
18+
This plugin supports the basic syntax of Vue.js 3.0, but `<script setup>` does not yet fully support it.
19+
Also, the Vue.js 3.0 experimental feature CSS variable injection is not yet supported. Follow [#1248](https://github.com/vuejs/eslint-plugin-vue/issues/1248) for more details.
1920
:::
2021

2122
## :traffic_light: Versioning policy

docs/rules/experimental-script-setup-vars.md

+4
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ This rule will find variables defined in `<script setup="args">` and mark them a
1919

2020
This rule only has an effect when the `no-undef` rule is enabled.
2121

22+
:::warning
23+
`<script setup="args">` syntax wasn't rejected by Vue's RFC. Check out the [new syntax](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md).
24+
:::
25+
2226
## :book: Rule Details
2327

2428
Without this rule this code triggers warning:

docs/user-guide/README.md

+61-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,8 @@ By default all rules from **base** and **essential** categories report ESLint er
7272
:::
7373

7474
:::warning Status of Vue.js 3.x supports
75-
This plugin supports the basic syntax of Vue.js 3.0, but the Vue.js 3.0 experimental features `<script setup>` and `<style vars>` are not yet supported. Follow [#1248](https://github.com/vuejs/eslint-plugin-vue/issues/1248) for more details.
75+
This plugin supports the basic syntax of Vue.js 3.0, but `<script setup>` does not yet fully support it.
76+
Also, the Vue.js 3.0 experimental feature CSS variable injection is not yet supported. Follow [#1248](https://github.com/vuejs/eslint-plugin-vue/issues/1248) for more details.
7677
:::
7778

7879
### Running ESLint from the command line
@@ -333,3 +334,62 @@ Note that you cannot use angle-bracket type assertion style (`var x = <foo>bar;`
333334
You need to turn off Vetur's template validation by adding `vetur.validation.template: false` to your `.vscode/settings.json`.
334335

335336
See also: "[Visual Studio Code](#editor-integrations)" section and [Vetur - Linting](https://vuejs.github.io/vetur/guide/linting-error.html#linting).
337+
338+
### Does not work well with `<script setup>`
339+
340+
#### The variables used in the `<template>` are warned by `no-unused-vars` rule
341+
342+
You must use [vue/script-setup-uses-vars](../rules/script-setup-uses-vars.md) rule.
343+
In your configuration, use the rule set provided by `eslint-plugin-vue` or enable it rule.
344+
345+
Example **.eslintrc.js**:
346+
347+
```js
348+
module.exports = {
349+
// Use the rule set.
350+
extends: ['plugin:vue/base'],
351+
rules: {
352+
// Enable vue/script-setup-uses-vars rule
353+
'vue/script-setup-uses-vars': 'error',
354+
}
355+
}
356+
```
357+
358+
#### Parsing error with Top Level `await`
359+
360+
##### Using ESLint <= v7.x
361+
362+
The parser `espree` that comes with `ESLint` doesn't understand the syntax of ES2022, so it can't parse Top Level `await` either.
363+
However, the `vue-eslint-parser` used by `eslint-plugin-vue` can use `espree` v8, which understands ES2022 by configuration.
364+
365+
```js
366+
module.exports = {
367+
parser: 'vue-eslint-parser',
368+
parserOptions: {
369+
ecmaVersion: 2022, // If you specify 2022, espree >= v8.x will be used automatically.
370+
sourceType: 'module'
371+
},
372+
}
373+
```
374+
375+
However, note that the AST generated by `espree` v8 may not work well with some rules of `ESLint` v7.
376+
377+
<!--
378+
##### Using ESLint >= v8.x
379+
380+
You need to specify `2022` for `parserOptions.ecmaVersion`.
381+
382+
```js
383+
module.exports = {
384+
parserOptions: {
385+
ecmaVersion: 2022,
386+
sourceType: 'module'
387+
},
388+
}
389+
```
390+
-->
391+
392+
#### Other Problems
393+
394+
This `eslint-plugin-vue` does not yet fully support `<script setup>`.
395+
Follow [#1248](https://github.com/vuejs/eslint-plugin-vue/issues/1248) for more details.

0 commit comments

Comments
 (0)