Setting Up Vue Dev Environment for Consistent Development Practices

{
  "title": "Setting Up Vue Dev Environment for Consistent Development Practices",
  "description": "Learn how to configure a development environment that promotes consistency in coding styles and practices in Vue projects.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "name": "Enforce Component Naming Conventions",
      "description": "Ensure all Vue components are named using PascalCase to maintain consistency and readability.",
      "pattern": "components/**/*.vue",
      "action": "validate",
      "parameters": {
        "namingConvention": "PascalCase"
      }
    },
    {
      "name": "Validate Prop Definitions",
      "description": "Require all component props to have defined types and default values to enhance type safety and maintainability.",
      "pattern": "components/**/*.vue",
      "action": "validate",
      "parameters": {
        "propValidation": true
      }
    },
    {
      "name": "Enforce Single Responsibility Principle",
      "description": "Ensure each component has a single responsibility by limiting the number of methods and data properties.",
      "pattern": "components/**/*.vue",
      "action": "validate",
      "parameters": {
        "maxMethods": 5,
        "maxDataProperties": 5
      }
    },
    {
      "name": "Disallow v-if with v-for",
      "description": "Prevent the use of v-if on the same element as v-for to avoid performance issues.",
      "pattern": "components/**/*.vue",
      "action": "validate",
      "parameters": {
        "disallowVIfWithVFor": true
      }
    },
    {
      "name": "Enforce Template Attribute Order",
      "description": "Maintain a consistent order of attributes in templates: directives, global attributes, then custom attributes.",
      "pattern": "components/**/*.vue",
      "action": "validate",
      "parameters": {
        "attributeOrder": ["directives", "global", "custom"]
      }
    },
    {
      "name": "Require Component Documentation",
      "description": "Ensure all components have a JSDoc comment block describing their purpose and usage.",
      "pattern": "components/**/*.vue",
      "action": "validate",
      "parameters": {
        "requireJSDoc": true
      }
    },
    {
      "name": "Limit Computed Property Complexity",
      "description": "Restrict the complexity of computed properties to improve maintainability.",
      "pattern": "components/**/*.vue",
      "action": "validate",
      "parameters": {
        "maxComputedComplexity": 10
      }
    },
    {
      "name": "Enforce Consistent Indentation",
      "description": "Use 2 spaces for indentation across all Vue files to maintain code consistency.",
      "pattern": "**/*.vue",
      "action": "format",
      "parameters": {
        "indentation": 2
      }
    },
    {
      "name": "Disallow Magic Numbers",
      "description": "Prohibit the use of magic numbers in code to improve readability and maintainability.",
      "pattern": "**/*.vue",
      "action": "validate",
      "parameters": {
        "disallowMagicNumbers": true
      }
    },
    {
      "name": "Enforce Consistent Event Naming",
      "description": "Use kebab-case for event names to maintain consistency with HTML attributes.",
      "pattern": "components/**/*.vue",
      "action": "validate",
      "parameters": {
        "eventNamingConvention": "kebab-case"
      }
    }
  ]
}