Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

feat(component-api-style): add scriptSetupVapor option#2797

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Open
waynzh wants to merge4 commits intomaster
base:master
Choose a base branch
Loading
fromfeature/vapor
Open
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions.changeset/wild-symbols-grow.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
---
'eslint-plugin-vue': minor
---

[`vue/component-api-style`](https://eslint.vuejs.org/rules/component-api-style.html) now supports Vue 3.6+ Vapor mode style with the new `script-setup-vapor` option
31 changes: 29 additions & 2 deletionsdocs/rules/component-api-style.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ since: v7.18.0

This rule aims to make the API style you use to define Vue components consistent in your project.

For example, if you want to allow only `<script setup>` and Composition API.
For example, if you want to allow only `<script setup>` and Composition API.
(This is the default for this rule.)

<eslint-code-block :rules="{'vue/component-api-style': ['error']}">
Expand DownExpand Up@@ -74,17 +74,44 @@ export default {
```json
{
"vue/component-api-style": ["error",
["script-setup", "composition"] // "script-setup", "composition", "composition-vue2", or "options"
["script-setup", "composition"] // "script-setup", "script-setup-vapor", "composition", "composition-vue2", or "options"
]
}
```

- Array options ... Defines the API styles you want to allow. Default is `["script-setup", "composition"]`. You can use the following values.
- `"script-setup"` ... If set, allows [`<script setup>`](https://vuejs.org/api/sfc-script-setup.html).
- `"script-setup-vapor"` ... If set, allows [`<script setup vapor>`](https://vuejs.org/api/sfc-script-setup.html) (Vue 3.6+).
- `"composition"` ... If set, allows [Composition API](https://vuejs.org/api/#composition-api) (not `<script setup>`).
- `"composition-vue2"` ... If set, allows [Composition API for Vue 2](https://github.com/vuejs/composition-api) (not `<script setup>`). In particular, it allows `render`, `renderTracked` and `renderTriggered` alongside `setup`.
- `"options"` ... If set, allows Options API.

### `["script-setup-vapor"]`

<eslint-code-block :rules="{'vue/component-api-style': ['error', ['script-setup-vapor']]}">

```vue
<!-- ✓ GOOD -->
<script setup vapor>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
```

</eslint-code-block>

<eslint-code-block :rules="{'vue/component-api-style': ['error', ['script-setup-vapor']]}">

```vue
<!-- ✗ BAD -->
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
```

</eslint-code-block>

### `["options"]`

<eslint-code-block :rules="{'vue/component-api-style': ['error', ['options']]}">
Expand Down
79 changes: 70 additions & 9 deletionslib/rules/component-api-style.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,13 +7,14 @@
const utils = require('../utils')

/**
* @typedef { 'script-setup' | 'composition' | 'composition-vue2' | 'options' } PreferOption
* @typedef { 'script-setup' | 'script-setup-vapor' | 'composition' | 'composition-vue2' | 'options' } PreferOption
*
* @typedef {PreferOption[]} UserPreferOption
*
* @typedef {object} NormalizeOptions
* @property {object} allowsSFC
* @property {boolean} [allowsSFC.scriptSetup]
* @property {boolean} [allowsSFC.scriptSetupVapor]
* @property {boolean} [allowsSFC.composition]
* @property {boolean} [allowsSFC.compositionVue2]
* @property {boolean} [allowsSFC.options]
Expand All@@ -26,6 +27,7 @@ const utils = require('../utils')
/** @type {PreferOption[]} */
const STYLE_OPTIONS = [
'script-setup',
'script-setup-vapor',
'composition',
'composition-vue2',
'options'
Expand All@@ -48,6 +50,10 @@ function parseOptions(options) {
opts.allowsSFC.scriptSetup = true
break
}
case 'script-setup-vapor': {
opts.allowsSFC.scriptSetupVapor = true
break
}
case 'composition': {
opts.allowsSFC.composition = true
opts.allowsOther.composition = true
Expand DownExpand Up@@ -143,6 +149,7 @@ const LIFECYCLE_HOOK_OPTIONS = new Set([
/**
* @param {object} allowsOpt
* @param {boolean} [allowsOpt.scriptSetup]
* @param {boolean} [allowsOpt.scriptSetupVapor]
* @param {boolean} [allowsOpt.composition]
* @param {boolean} [allowsOpt.compositionVue2]
* @param {boolean} [allowsOpt.options]
Expand All@@ -152,6 +159,9 @@ function buildAllowedPhrase(allowsOpt) {
if (allowsOpt.scriptSetup) {
phrases.push('`<script setup>`')
}
if (allowsOpt.scriptSetupVapor) {
phrases.push('`<script setup vapor>`')
}
if (allowsOpt.composition) {
phrases.push('Composition API')
}
Expand All@@ -169,13 +179,36 @@ function buildAllowedPhrase(allowsOpt) {
/**
* @param {object} allowsOpt
* @param {boolean} [allowsOpt.scriptSetup]
* @param {boolean} [allowsOpt.scriptSetupVapor]
* @param {boolean} [allowsOpt.composition]
* @param {boolean} [allowsOpt.compositionVue2]
* @param {boolean} [allowsOpt.options]
*/
function isPreferScriptSetup(allowsOpt) {
if (
!allowsOpt.scriptSetup ||
allowsOpt.scriptSetupVapor ||
allowsOpt.composition ||
allowsOpt.compositionVue2 ||
allowsOpt.options
) {
return false
}
return true
}

/**
* @param {object} allowsOpt
* @param {boolean} [allowsOpt.scriptSetup]
* @param {boolean} [allowsOpt.scriptSetupVapor]
* @param {boolean} [allowsOpt.composition]
* @param {boolean} [allowsOpt.compositionVue2]
* @param {boolean} [allowsOpt.options]
*/
function isPreferScriptSetupVapor(allowsOpt) {
if (
!allowsOpt.scriptSetupVapor ||
allowsOpt.scriptSetup ||
allowsOpt.composition ||
allowsOpt.compositionVue2 ||
allowsOpt.options
Expand DownExpand Up@@ -219,10 +252,14 @@ module.exports = {
messages: {
disallowScriptSetup:
'`<script setup>` is not allowed in your project. Use {{allowedApis}} instead.',
disallowScriptSetupVapor:
'`<script setup vapor>` is not allowed in your project. Use {{allowedApis}} instead.',
disallowComponentOption:
'{{disallowedApi}} is not allowed in your project. {{optionPhrase}} is part of the {{disallowedApi}}. Use {{allowedApis}} instead.',
disallowComponentOptionPreferScriptSetup:
'{{disallowedApi}} is not allowed in your project. Use `<script setup>` instead.'
'{{disallowedApi}} is not allowed in your project. Use `<script setup>` instead.',
disallowComponentOptionPreferScriptSetupVapor:
'{{disallowedApi}} is not allowed in your project. Use `<script setup vapor>` instead.'
}
},
/** @param {RuleContext} context */
Expand All@@ -232,13 +269,35 @@ module.exports = {
return utils.compositingVisitors(
{
Program() {
if (options.allowsSFC.scriptSetup) {
const { scriptSetup, scriptSetupVapor } = options.allowsSFC
if (scriptSetup && scriptSetupVapor) {
return
}
const scriptSetupElement = utils.getScriptSetupElement(context)
if (!scriptSetupElement) {
return
}

const hasVapor = utils.hasAttribute(scriptSetupElement, 'vapor')

// <script setup vapor>
if (hasVapor) {
if (!scriptSetupVapor) {
context.report({
node: scriptSetupElement.startTag,
messageId: 'disallowScriptSetupVapor',
data: {
allowedApis: buildAllowedPhrase(options.allowsSFC)
}
})
}
return
}
const scriptSetup = utils.getScriptSetupElement(context)
if (scriptSetup) {

// <script setup>
if (!scriptSetup) {
context.report({
node:scriptSetup.startTag,
node:scriptSetupElement.startTag,
messageId: 'disallowScriptSetup',
data: {
allowedApis: buildAllowedPhrase(options.allowsSFC)
Expand DownExpand Up@@ -290,9 +349,11 @@ module.exports = {
if (disallowApi) {
context.report({
node: prop.key,
messageId: isPreferScriptSetup(allows)
? 'disallowComponentOptionPreferScriptSetup'
: 'disallowComponentOption',
messageId: isPreferScriptSetupVapor(allows)
? 'disallowComponentOptionPreferScriptSetupVapor'
: isPreferScriptSetup(allows)
? 'disallowComponentOptionPreferScriptSetup'
: 'disallowComponentOption',
data: {
disallowedApi: disallowApi.apiName,
optionPhrase: buildOptionPhrase(name),
Expand Down
120 changes: 120 additions & 0 deletionstests/lib/rules/component-api-style.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -103,6 +103,36 @@ tester.run('component-api-style', rule, {
`,
options: [['script-setup']]
},
{
filename: 'test.vue',
code: `
<script setup vapor>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
`,
options: [['script-setup-vapor']]
},
{
filename: 'test.vue',
code: `
<script setup vapor>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
`,
options: [['script-setup', 'script-setup-vapor']]
},
{
filename: 'test.vue',
code: `
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
`,
options: [['script-setup', 'script-setup-vapor']]
},
{
filename: 'test.js',
code: `
Expand DownExpand Up@@ -845,6 +875,96 @@ tester.run('component-api-style', rule, {
column: 9
}
]
},
{
filename: 'test.vue',
code: `
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
`,
options: [['script-setup-vapor']],
errors: [
{
message:
'`<script setup>` is not allowed in your project. Use `<script setup vapor>` instead.',
line: 2,
column: 7,
endLine: 2,
endColumn: 21
}
]
},
{
filename: 'test.vue',
code: `
<script setup vapor>
import { ref } from 'vue'
const msg = ref('Hello World!')
</script>
`,
options: [['script-setup']],
errors: [
{
message:
'`<script setup vapor>` is not allowed in your project. Use `<script setup>` instead.',
line: 2,
column: 7,
endLine: 2,
endColumn: 27
}
]
},
{
filename: 'test.vue',
code: `
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
`,
options: [['script-setup-vapor']],
errors: [
{
message:
'Options API is not allowed in your project. Use `<script setup vapor>` instead.',
line: 4,
column: 9,
endLine: 4,
endColumn: 13
}
]
},
{
filename: 'test.vue',
code: `
<script>
export default {
data () {
return {
msg: 'Hello World!'
}
}
}
</script>
`,
options: [['script-setup-vapor', 'script-setup']],
errors: [
{
message:
'Options API is not allowed in your project. `data` option is part of the Options API. Use `<script setup>` or `<script setup vapor>` instead.',
line: 4,
column: 9,
endLine: 4,
endColumn: 13
}
]
}
]
})
[8]ページ先頭
©2009-2025 Movatter.jp