eslint-plugin-require-script-setup

An ESLint plugin to enforce the exclusive use of <script setup> syntax in all Vue 3 Single File Components (SFCs).

Why?

Vue 3 introduced the <script setup> syntax as a more concise and ergonomic way to use the Composition API within Single File Components. While Vue still supports the traditional <script> block with export default (using either Options API or the setup() function), many teams prefer to standardize on <script setup> for consistency and improved developer experience (e.g., simpler variable exposure, better type inference with TypeScript).

This plugin helps enforce this standardization by reporting an error whenever a standard <script> block is found in a .vue file, guiding developers to refactor using <script setup>.

Features

• Detects standard <script> blocks (with or without export default) in .vue files
• Reports an error, encouraging the use of <script setup>
• Correctly handles files containing only <script setup>
• Correctly handles files with no <script> block at all (e.g., template/style only)
• Works regardless of the lang attribute (e.g., <script lang="ts">)
• Uses Vue’s official @vue/compiler-sfc for accurate parsing

Installation

First install ESLint and vue-eslint-parser (if not already present):

npm install --save-dev eslint vue-eslint-parser
# or
yarn add --dev eslint vue-eslint-parser
# or
pnpm add --save-dev eslint vue-eslint-parser

Then install this plugin:

npm install --save-dev eslint-plugin-require-script-setup
# or
yarn add --dev eslint-plugin-require-script-setup
# or
pnpm add --save-dev eslint-plugin-require-script-setup

# If your package uses a scope (replace @your-scope):
# npm install --save-dev @your-scope/eslint-plugin-require-script-setup

Usage

Configure your ESLint setup to use vue-eslint-parser and enable the plugin and its rule.

Flat Config (eslint.config.js or eslint.config.ts - Recommended for ESLint v9+)

// eslint.config.js (or .ts)
import vueParser from "vue-eslint-parser";
import tsParser from "@typescript-eslint/parser"; // If using TypeScript
import requireScriptSetupPlugin from "eslint-plugin-require-script-setup";
// If using scope: import requireScriptSetupPlugin from '@your-scope/eslint-plugin-require-script-setup';

export default [
  // ... other configurations
  {
    files: ["**/*.vue"],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: tsParser,
        sourceType: "module",
        ecmaVersion: 2022,
      },
    },
    plugins: {
      "require-script-setup": requireScriptSetupPlugin,
    },
    rules: {
      "require-script-setup/require-script-setup": "error",
      // ... other rules
    },
  },
];

Legacy Config (.eslintrc.js, .eslintrc.json, etc.—ESLint v8 and older)

// .eslintrc.js
module.exports = {
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: 2022,
    sourceType: "module",
  },
  plugins: [
    "vue",
    "require-script-setup",
    // If using scope: '@your-scope/require-script-setup'
  ],
  extends: ["eslint:recommended", "plugin:vue/vue3-recommended"],
  rules: {
    "require-script-setup/require-script-setup": "error",
    // ... other rules
  },
};

Rule Details

require-script-setup/require-script-setup

Enforces that all Vue Single File Components must use <script setup>. Reports an error if a standard <script> block (without setup attribute) is found.

Incorrect Examples

<!-- InvalidA.vue -->
<template>...</template>
<script lang="ts">
export default {
  name: "MyComponent",
};
</script>

<!-- InvalidB.vue -->
<template>...</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    const msg = ref("Hello");
    return { msg };
  },
};
</script>

<!-- InvalidC.vue -->
<template>...</template>
<script src="./logic.js"></script>
<!-- src without setup -->

<!-- InvalidD.vue -->
<template>...</template>
<script>
console.log("Legacy block");
</script>
<script setup>
console.log("Setup block");
</script>

Correct Examples

<!-- CorrectA.vue -->
<template>...</template>
<script setup lang="ts">
import { ref } from "vue";
const message = ref("Hello from <script setup>");
</script>

<!-- CorrectB.vue -->
<template>...</template>
<script setup>
const count = 0;
</script>

<!-- CorrectC.vue -->
<template>...</template>
<script setup src="./logic.ts"></script>

<!-- CorrectD.vue -->
<template>...</template>
<!-- No <script> block is also valid -->