Update vue/no-unsupported-features rule to support <script setup> (#1554)

Author: ota-meshi

docs/rules/no-unsupported-features.md

@@ -32,6 +32,7 @@ The `"ignores"` option accepts an array of the following strings.
   - Vue.js 3.1.0+
     - `"is-attribute-with-vue-prefix"` ... [`is` attribute with `vue:` prefix](https://v3.vuejs.org/api/special-attributes.html#is)
   - Vue.js 3.0.0+
+    - `"script-setup"` ... [`<script setup>`][Vue RFCs - 0040-script-setup]
     - `"v-model-argument"` ... [argument on `v-model`][Vue RFCs - 0005-replace-v-bind-sync-with-v-model-argument]
     - `"v-model-custom-modifiers"` ... [custom modifiers on `v-model`][Vue RFCs - 0011-v-model-api-change]
     - `"v-is"` ... [v-is](https://v3.vuejs.org/api/directives.html#v-is) directive.
@@ -105,13 +106,15 @@ The `"ignores"` option accepts an array of the following strings.
 - [Vue RFCs - 0003-dynamic-directive-arguments]
 - [Vue RFCs - 0005-replace-v-bind-sync-with-v-model-argument]
 - [Vue RFCs - 0011-v-model-api-change]
+- [Vue RFCs - 0040-script-setup]
 - [Vue RFCs - v-bind .prop shorthand proposal]
 
 [Vue RFCs - 0001-new-slot-syntax]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0001-new-slot-syntax.md
 [Vue RFCs - 0002-slot-syntax-shorthand]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0002-slot-syntax-shorthand.md
 [Vue RFCs - 0003-dynamic-directive-arguments]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0003-dynamic-directive-arguments.md
 [Vue RFCs - 0005-replace-v-bind-sync-with-v-model-argument]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0005-replace-v-bind-sync-with-v-model-argument.md
 [Vue RFCs - 0011-v-model-api-change]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0011-v-model-api-change.md
+[Vue RFCs - 0040-script-setup]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
 
 [Vue RFCs - v-bind .prop shorthand proposal]: https://github.com/vuejs/rfcs/pull/18
 

lib/rules/no-unsupported-features.js

@@ -26,6 +26,7 @@ const FEATURES = {
   'v-model-argument': require('./syntaxes/v-model-argument'),
   'v-model-custom-modifiers': require('./syntaxes/v-model-custom-modifiers'),
   'v-is': require('./syntaxes/v-is'),
+  'script-setup': require('./syntaxes/script-setup'),
   // Vue.js 3.1.0+
   'is-attribute-with-vue-prefix': require('./syntaxes/is-attribute-with-vue-prefix')
 }
@@ -100,6 +101,9 @@ module.exports = {
       forbiddenVModelCustomModifiers:
         'Custom modifiers on `v-model` are not supported until Vue.js "3.0.0".',
       forbiddenVIs: '`v-is` are not supported until Vue.js "3.0.0".',
+      forbiddenScriptSetup:
+        '`<script setup>` are not supported until Vue.js "3.0.0".',
+      // Vue.js 3.1.0+
       forbiddenIsAttributeWithVuePrefix:
         '`is="vue:"` are not supported until Vue.js "3.1.0".'
     }

lib/rules/syntaxes/script-setup.js

@@ -0,0 +1,28 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../utils')
+
+module.exports = {
+  supported: '>=3.0.0',
+  /** @param {RuleContext} context @returns {TemplateListener} */
+  createScriptVisitor(context) {
+    const scriptSetup = utils.getScriptSetupElement(context)
+    if (!scriptSetup) {
+      return {}
+    }
+    const reportNode =
+      utils.getAttribute(scriptSetup, 'setup') || scriptSetup.startTag
+    return {
+      Program() {
+        context.report({
+          node: reportNode,
+          messageId: 'forbiddenScriptSetup'
+        })
+      }
+    }
+  }
+}

tests/lib/rules/no-unsupported-features/script-setup.js

@@ -0,0 +1,48 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder('script-setup', '^3.0.0')
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2019
+  }
+})
+
+tester.run('no-unsupported-features/script-setup', rule, {
+  valid: [
+    {
+      code: `
+      <script setup>
+      </script>`,
+      options: buildOptions()
+    },
+    {
+      code: `
+      <script>
+      </script>`,
+      options: buildOptions({ version: '^2.6.0' })
+    }
+  ],
+  invalid: [
+    {
+      code: `
+      <script setup>
+      </script>`,
+      options: buildOptions({ version: '^2.6.0' }),
+      errors: [
+        {
+          message: '`<script setup>` are not supported until Vue.js "3.0.0".',
+          line: 2
+        }
+      ]
+    }
+  ]
+})