@mikey-pro/eslint-config-vue 8.0.3 → 9.0.0

package/README.md

@@ -18,14 +18,29 @@ A preset ESLint Vue configuration
 npm i -D mikey-pro @mikey-pro/eslint-config-vue
 ```
 
-### Configure
+### Configure (Flat ESLint v9+ Default)
 
-Extend to ESLint in `package.json`:
+```js
+// eslint.config.js
+import vueConfig from '@mikey-pro/eslint-config-vue';
+
+export default vueConfig;
+```
+
+### Legacy (eslintrc) Configuration (still supported)
+
+Legacy consumers should explicitly import the legacy entry:
 
 ```json
 {
   "eslintConfig": {
-    "extends": ["@mikey-pro/eslint-config-vue"]
+    "extends": ["@mikey-pro/eslint-config-vue/legacy"]
   }
 }
 ```
+
+Or via direct require:
+
+```js
+module.exports = require('@mikey-pro/eslint-config-vue/legacy');
+```

package/flat.js

@@ -0,0 +1,3 @@
+// Modern Vue ESLint 9 Flat Configuration for Mikey Pro
+
+export { default } from './index.js';

package/index.js

@@ -1,316 +1,156 @@
-import baseConfig from '@mikey-pro/eslint-config';
-import vuePlugin from 'eslint-plugin-vue';
-import vueRecommended from 'eslint-plugin-vue/lib/configs/vue3-recommended.js';
-
-const vueConfig = [
-  ...baseConfig,
-  {
-    files: ['*.vue'],
-    languageOptions: {
-      parser: 'vue-eslint-parser',
-      parserOptions: {
-        parser: {
-          js: '@babel/eslint-parser',
-          ts: '@typescript-eslint/parser',
-          '<template>': 'espree'
-        },
-        babelOptions: {
-          plugins: [
-            [
-              '@babel/plugin-transform-react-jsx',
-              {
-                pragma: 'h',
-                pragmaFrag: 'Fragment',
-                runtime: 'automatic',
-              },
-            ],
-          ],
-          presets: [
-            [
-              '@babel/preset-env',
-              {
-                targets: {
-                  node: 'current',
-                },
-              },
-            ],
-          ],
-        },
-        ecmaVersion: 'latest',
-        requireConfigFile: false,
-        sourceType: 'module',
-        extraFileExtensions: ['.vue'],
-        vueFeatures: {
-          filter: true,
-          interpolationAsNonHTML: false,
-          styleCSSVariableInjection: true
-        }
+// Modern Vue ESLint configuration for Mikey Pro
+import { baseConfig } from '@mikey-pro/eslint-config/base-config.js';
+import { baseOverrides } from '@mikey-pro/eslint-config/overrides.js';
+import vue from 'eslint-plugin-vue';
+import vueParser from 'vue-eslint-parser';
+
+// Vue-specific configuration
+const vueConfig = {
+  files: ['**/*.vue'],
+  languageOptions: {
+    parser: vueParser,
+    parserOptions: {
+      ecmaFeatures: {
+        jsx: true,
       },
+      ecmaVersion: 'latest',
+      sourceType: 'module',
     },
-    plugins: {
-      vue: vuePlugin,
-    },
-    rules: {
-      ...vueRecommended.rules,
-
-      // Vue 3 Composition API
-      'vue/define-macros-order': ['warn', {
-        order: ['defineProps', 'defineEmits']
-      }],
-      'vue/define-props-declaration': ['error', 'type-based'],
-      'vue/component-api-style': ['error', ['script-setup', 'composition']],
-      'vue/no-ref-object-destructure': 'error',
-      'vue/no-setup-props-destructure': 'error',
-
-      // Best Practices
-      'vue/block-order': ['error', {
-        order: ['script', 'template', 'style']
-      }],
-      'vue/component-name-in-template-casing': ['error', 'PascalCase'],
-      'vue/no-duplicate-attr-inheritance': 'error',
-      'vue/no-useless-v-bind': 'error',
-      'vue/prefer-separate-static-class': 'error',
-
-      // Performance
-      'vue/no-async-in-computed-properties': 'error',
-      'vue/no-side-effects-in-computed-properties': 'error',
-      'vue/no-static-inline-styles': 'warn',
-
-      // Type Safety
-      'vue/component-definition-name-casing': ['error', 'PascalCase'],
-      'vue/match-component-file-name': ['error', {
-        extensions: ['vue'],
-        shouldMatchCase: true
-      }],
-      'vue/component-options-name-casing': ['error', 'PascalCase'],
-
-      // Best Practices
-      'vue/prefer-import-from-vue': 'error',
-      'vue/no-unused-refs': 'warn',
-      'vue/no-required-prop-with-default': 'error',
-      'vue/require-typed-ref': 'error',
-      'vue/valid-define-props': 'error',
-
-      // Existing rules...
-      'vue/component-tags-order': [
-        'warn',
-        {
-          order: [['script', 'template'], 'style'],
-        },
-      ],
-      'vue/html-self-closing': [
-        'warn',
-        {
-          html: {
-            component: 'always',
-            normal: 'always',
-            void: 'always',
-          },
-          math: 'always',
-          svg: 'always',
+  },
+  plugins: {
+    vue,
+  },
+  rules: {
+    // Vue rules
+    ...vue.configs['vue3-recommended'].rules,
+
+    // Basic Vue-specific overrides
+    'vue/attribute-hyphenation': ['error', 'always'],
+    'vue/component-definition-name-casing': ['error', 'PascalCase'],
+    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
+    'vue/custom-event-name-casing': ['error', 'camelCase'],
+    'vue/define-emits-declaration': ['error', 'type-based'],
+    'vue/define-props-declaration': ['error', 'type-based'],
+    'vue/html-button-has-type': 'error',
+    'vue/html-indent': ['error', 2],
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          component: 'always',
+          normal: 'always',
+          void: 'always',
         },
-      ],
-      'vue/singleline-html-element-content-newline': 'off',
-      'prettier/prettier': ['warn', { parser: 'vue' }],
-
-      // Enhanced Type Safety
-      'vue/define-emits-declaration': ['error', 'type-based'],
-      'vue/no-export-in-script-setup': 'error',
-
-      // Script Setup
-      'vue/script-setup-uses-vars': 'error',
-      'vue/no-undef-components': ['error', {
-        ignorePatterns: ['router-view', 'router-link'],
-      }],
-
-      // Performance
-      'vue/no-unused-properties': ['warn', {
-        groups: ['props', 'data', 'computed', 'methods', 'setup'],
-      }],
-
-      // Composables
-      'vue/define-macros-order': ['error', {
-        order: [
-          'defineOptions',
-          'defineProps',
-          'defineEmits',
-          'defineSlots',
-          'withDefaults'
-        ]
-      }],
-      'vue/custom-event-name-casing': ['error', 'camelCase', {
-        ignore: []
-      }],
-
-      // Security
-      'vue/no-unescaped-html': 'error',
-      'vue/no-potential-component-option-typo': 'error',
-      'vue/no-restricted-component-options': ['error', {
-        name: 'data',
-        message: 'Use setup() instead'
-      }],
-      'vue/no-restricted-v-bind': ['error', '/^v-/'],
-      'vue/no-restricted-html-elements': [
-        'error',
-        'iframe',
-        'object',
-        'embed'
-      ],
-      'vue/no-use-v-if-with-v-for': ['error', {
-        allowUsingIterationVar: false
-      }],
-
-      // Optimization
-      'vue/no-unused-properties': ['error', {
-        groups: ['props', 'data', 'computed', 'methods', 'setup'],
-        deepData: true
-      }],
-      'vue/no-unused-refs': 'error',
-      'vue/valid-next-tick': 'error',
-
-      // Performance
-      'vue/no-parsing-error': ['error', {
-        'invalid-first-character-of-tag-name': false
-      }],
-      'vue/no-unused-components': ['error', {
-        ignoreWhenBindingPresent: true
-      }],
-      'vue/valid-v-slot': ['error', {
-        allowModifiers: true
-      }],
-
-      // Advanced Vue 3 Features
-      'vue/prefer-true-attribute-shorthand': ['error', 'always'],
-      'vue/v-on-function-call': ['error', 'never'],
-      'vue/no-empty-component-block': 'error',
-      'vue/multi-word-component-names': ['error', {
-        ignores: ['index', 'default']
-      }],
-
-      // Performance Optimizations
-      'vue/no-deprecated-filter': 'error',
-      'vue/prefer-template': 'error',
-      'vue/no-useless-mustaches': 'error',
-      'vue/no-empty-pattern': 'error',
-
-      // Type Safety
-      'vue/block-tag-newline': ['error', {
-        singleline: 'always',
-        multiline: 'always',
-        maxEmptyLines: 1
-      }],
-
-      // Enhanced Performance
-      'vue/no-child-content': ['error', {
-        'ignoreSlots': ['default']
-      }],
-      'vue/no-duplicate-attr-inheritance': ['error', {
-        'ignoreKeys': ['class', 'style']
-      }],
-      'vue/prefer-define-options': 'error',
-
-      // Better Type Safety
-      'vue/define-props-declaration': ['error', {
-        'type-based': true,
-        'required': true
-      }],
-      'vue/define-emits-declaration': ['error', {
-        'type-based': true
-      }],
-
-      // Component Organization
-      'vue/block-order': ['error', {
-        'order': [
-          'script:not([setup])',
-          'script[setup]',
-          'template',
-          'style:not([scoped])',
-          'style[scoped]'
-        ]
-      }],
-
-      // Vue 3.4+ Features
-      'vue/next-tick-style': ['error', 'promise'],
-      'vue/prefer-prop-type-inference': 'error',
-      'vue/require-typed-object-prop': 'error',
-      'vue/no-deprecated-model-definition': ['error', {
-        allowVue3Compat: false
-      }],
-
-      // Memory Optimization
-      'vue/no-ref-as-operand': 'error',
-      'vue/prefer-import-from-vue': ['error', {
-        disallowVuePath: true
-      }],
-      'vue/no-side-effects-in-computed-properties': ['error', {
-        enforceForEventHandlers: true
-      }],
-
-      // Strict Mode Features
-      'vue/component-name-in-template-casing': ['error', 'PascalCase', {
-        registeredComponentsOnly: true,
-        ignores: []
-      }],
-      'vue/define-macros-order': ['error', {
-        order: [
-          'defineOptions',
-          'defineSlots',
-          'defineEmits',
-          'defineModel',
-          'defineProps'
-        ]
-      }],
+        math: 'always',
+        svg: 'always',
+      },
+    ],
+    'vue/max-attributes-per-line': [
+      'error',
+      {
+        multiline: { max: 1 },
+        singleline: { max: 1 },
+      },
+    ],
+    'vue/multi-word-component-names': 'error',
+    'vue/mustache-interpolation-spacing': ['error', 'always'],
+    'vue/no-multiple-template-root': 'off', // Vue 3 allows multiple roots
+    'vue/no-mutating-props': 'error',
+    'vue/no-unused-components': 'error',
+    'vue/no-unused-vars': 'error',
+    'vue/no-use-v-if-with-v-for': 'error',
+    'vue/no-v-html': 'error',
+    'vue/no-v-model-argument': 'off', // Vue 3 supports v-model arguments
+    'vue/object-curly-spacing': ['error', 'always'],
+    'vue/require-component-is': 'error',
+    'vue/require-default-prop': 'error',
+    'vue/require-prop-types': 'error',
+    'vue/require-v-for-key': 'error',
+    'vue/script-indent': ['error', 2, { baseIndent: 0 }],
+    'vue/this-in-template': 'error',
+    'vue/use-v-on-exact': 'error',
+    'vue/v-for-delimiter-style': ['error', 'in'],
+    'vue/v-on-function-call': 'error',
+    'vue/valid-define-emits': 'error',
+    'vue/valid-define-props': 'error',
+    'vue/valid-next-tick': 'error',
+    'vue/valid-template-root': 'off', // Vue 3 allows multiple roots
+    'vue/valid-v-bind-sync': 'error',
+    'vue/valid-v-cloak': 'error',
+    'vue/valid-v-else': 'error',
+    'vue/valid-v-else-if': 'error',
+    'vue/valid-v-for': 'error',
+    'vue/valid-v-html': 'error',
+    'vue/valid-v-if': 'error',
+    'vue/valid-v-is': 'error',
+    'vue/valid-v-model': 'error',
+    'vue/valid-v-on': 'error',
+    'vue/valid-v-once': 'error',
+    'vue/valid-v-pre': 'error',
+    'vue/valid-v-show': 'error',
+    'vue/valid-v-slot': 'error',
+    'vue/valid-v-text': 'error',
+  },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+      },
+    },
+  },
+};
 
-      // Performance Optimizations
-      'vue/no-static-style': 'error',
-      'vue/no-undef-properties': ['error', {
-        ignores: ['/^\\$/']
-      }],
-      'vue/valid-define-options': 'error',
+// Export the complete Vue configuration
+export default [
+  // Global ignores
+  {
+    ignores: [
+      '**/dist/**/*',
+      '**/vendor/**/*',
+      '**/node_modules/**/*',
+      '**/coverage/**/*',
+      '**/.next/**/*',
+      '**/.nuxt/**/*',
+      '**/.output/**/*',
+      '**/.vite/**/*',
+      '**/build/**/*',
+      '**/out/**/*',
+      '*.properties',
+      '*.cclibs',
+      '*.svg',
+      '*.png',
+      '*.jpg',
+      '*.jpeg',
+      '*.gif',
+      '*.ico',
+      '*.webp',
+      '*.aco',
+      '*.psd',
+      '*.ai',
+      '*.ase',
+      '*.sh',
+      '*.bat',
+      '*.cmd',
+      'package-lock.json',
+      'yarn.lock',
+      'pnpm-lock.yaml',
+      'LICENSE',
+      'CNAME',
+      '*.min.js',
+      '*.min.css',
+    ],
+  },
 
-      // Script Setup Safety
-      'vue/script-setup-uses-vars': ['error', {
-        checkTemplate: true
-      }],
-      'vue/valid-define-options': ['error', {
-        presetName: 'script-setup'
-      }],
+  // Base configuration
+  baseConfig,
 
-      // Performance Optimizations
-      'vue/prefer-define-options': ['error', {
-        presets: ['composition-api', 'script-setup']
-      }],
-      'vue/no-duplicate-attr-inheritance': ['error', {
-        ignoreKeys: ['class', 'style', 'key', 'ref']
-      }],
+  // Vue-specific configuration
+  vueConfig,
 
-      // Type Safety
-      'vue/no-setup-props-reactivity-loss': 'error',
-      'vue/no-watch-after-await': 'error',
-      'vue/prefer-prop-type-inference': ['error', {
-        allowAny: false
-      }]
-    },
-    settings: {
-      ...baseConfig.settings,
-      'import/resolver': {
-        typescript: {
-          alwaysTryTypes: true,
-          project: ['./tsconfig.json', './tsconfig.*.json']
-        }
-      },
-      'import/core-modules': ['vue', '@vue/composition-api', '@vue/runtime-core', '@vue/runtime-dom'],
-      'import/parsers': {
-        '@typescript-eslint/parser': ['.ts', '.tsx', '.vue', '.d.ts'],
-      },
-      'vue': {
-        version: '3.4'
-      }
-    }
-  },
+  // File-specific overrides
+  ...baseOverrides,
 ];
 
-export default vueConfig;
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = vueConfig;
-}
+// Export individual components for advanced usage
+export { baseConfig } from '@mikey-pro/eslint-config/base-config.js';
+export { baseOverrides } from '@mikey-pro/eslint-config/overrides.js';

package/legacy.js

@@ -0,0 +1,64 @@
+// Legacy (eslintrc-style) config preserved under /legacy entry point.
+const baseConfig = require('@mikey-pro/eslint-config');
+
+module.exports = {
+  ...baseConfig,
+  overrides: [
+    ...baseConfig.overrides,
+    {
+      extends: ['plugin:vue/vue3-recommended'],
+      files: ['*.vue'],
+      parser: 'vue-eslint-parser',
+      parserOptions: {
+        babelOptions: {
+          plugins: [
+            'eslint-plugin-vue',
+            [
+              '@babel/plugin-transform-react-jsx',
+              {
+                pragma: 'h',
+                pragmaFrag: 'Fragment',
+                runtime: 'automatic',
+              },
+            ],
+          ],
+          presets: [
+            [
+              '@babel/preset-env',
+              {
+                targets: {
+                  node: 'current',
+                },
+              },
+            ],
+          ],
+        },
+        ecmaVersion: 'latest',
+        requireConfigFile: false,
+        sourceType: 'module',
+      },
+      rules: {
+        'vue/component-tags-order': [
+          'warn',
+          {
+            order: [['script', 'template'], 'style'],
+          },
+        ],
+        'vue/html-self-closing': [
+          'warn',
+          {
+            html: {
+              component: 'always',
+              normal: 'always',
+              void: 'always',
+            },
+            math: 'always',
+            svg: 'always',
+          },
+        ],
+        'vue/singleline-html-element-content-newline': 'off',
+        'prettier/prettier': ['warn', { parser: 'vue' }],
+      },
+    },
+  ],
+};

package/package.json

@@ -1,27 +1,21 @@
 {
   "name": "@mikey-pro/eslint-config-vue",
-  "version": "8.0.3",
-  "description": "Mikey Pro ESLint Vue configuration",
+  "version": "9.0.0",
+  "description": "Mikey Pro ESLint Vue configuration - Ultimate Vue coding style guide",
   "type": "module",
   "main": "index.js",
   "dependencies": {
-    "@babel/core": "^7.26.7",
-    "@babel/eslint-parser": "^7.26.5",
-    "@babel/plugin-transform-react-jsx": "^7.25.9",
-    "@babel/preset-env": "^7.26.7",
-    "@mikey-pro/eslint-config": "^8.0.3",
-    "@typescript-eslint/parser": "^8.22.0",
-    "eslint-plugin-vue": "^9.32.0",
-    "vue-eslint-parser": "^9.4.3"
+    "@babel/core": "^7.28.4",
+    "@babel/eslint-parser": "^7.28.4",
+    "@babel/plugin-transform-react-jsx": "^7.28.0",
+    "@babel/preset-env": "^7.28.3",
+    "@mikey-pro/eslint-config": "^9.0.0",
+    "@typescript-eslint/parser": "^8.43.0",
+    "eslint-plugin-vue": "^10.4.0",
+    "vue-eslint-parser": "^10.2.0"
   },
   "peerDependencies": {
-    "@mikey-pro/eslint-config": "^8.0.3",
-    "@types/node": ">=18.0.0",
-    "@vue/compiler-sfc": "^3.4.0",
-    "eslint": "^8.57.0",
-    "prettier": "^3.2.0",
-    "typescript": ">=5.0.0",
-    "vue": "^3.4.0"
+    "@mikey-pro/eslint-config": "^9.0.0"
   },
   "peerDependenciesMeta": {
     "@types/node": {
@@ -33,6 +27,8 @@
   },
   "files": [
     "index.js",
+    "flat.js",
+    "legacy.js",
     "README.md",
     "LICENSE"
   ],
@@ -46,7 +42,7 @@
   },
   "license": "MIT",
   "keywords": [
-    "@mikey-pro/eslint-config",
+    "@mikey-pro/eslint-config-vue",
     "@mikey-pro",
     "mikey-pro",
     "mikey",
@@ -55,16 +51,35 @@
     "eslintconfig",
     "eslint",
     "config",
+    "vue",
     "style-guide",
     "style",
     "guide",
-    "vue"
+    "eslint-9",
+    "flat-config"
   ],
   "author": "Mikl Wolfe <wolfe@mikl.io> (https://mikl.io)",
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0",
+    "pnpm": ">=8.0.0",
+    "yarn": ">=4.0.0"
   },
   "browserslist": [
     "defaults"
-  ]
+  ],
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.js"
+    },
+    "./flat": {
+      "import": "./flat.js",
+      "require": "./flat.js"
+    },
+    "./legacy": {
+      "import": "./legacy.js",
+      "require": "./legacy.js"
+    }
+  }
 }