eslint-plugin-vue-arch

ESLint plugin with architectural rules for Vue 3 and TypeScript projects. Rules encourage explicit dependencies, predictable reactivity, and patterns that scale as the codebase grows.

Installation

npm i -D eslint-plugin-vue-arch

You also need ESLint and parsers for Vue SFC + TypeScript:

npm i -D eslint vue-eslint-parser @typescript-eslint/parser

Usage

Use with ESLint flat config (eslint.config.js):

// eslint.config.js
import vueArch from "eslint-plugin-vue-arch";
import vueParser from "vue-eslint-parser";
import tsParser from "@typescript-eslint/parser";

export default [
  {
    files: ["**/*.vue"],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: tsParser,
        ecmaVersion: "latest",
        sourceType: "module",
      },
    },
  },
  vueArch.configs.recommended,
];

Manual configuration

import vueArch from "eslint-plugin-vue-arch";

export default [
  {
    plugins: {
      "vue-arch": vueArch,
    },
    rules: {
      "vue-arch/no-watch-entire-props": "error",
    },
  },
];

Rules

| Rule | Description | Recommended | | ---- | ----------- | ----------- | | no-watch-entire-props | Disallow passing the entire props object to watch / watchEffect | error |

Presets

| Config | Description | | ------ | ----------- | | recommended | Enables recommended rules at "error" severity |

Import preset:

import vueArch from "eslint-plugin-vue-arch";

export default [vueArch.configs.recommended];

Development

npm install
npm test
npm run build

License

MIT