doc all rules moved to its own file

docs/.vitepress/config.ts

@@ -7,7 +7,7 @@ export default defineConfig({
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     search: {
-      provider: 'local'
+      provider: 'local',
     },
     nav: [
       { text: 'Home', link: '/' },
@@ -20,13 +20,38 @@ export default defineConfig({
           {
             text: 'Rulesets',
             items: [
-              { text: 'Vue Essential', link: '/rules/vue-essential' },
-              { text: 'Vue Strong', link: '/rules/vue-strong' },
-              { text: 'Vue Recommended', link: '/rules/vue-recommended' },
-              { text: 'Vue Caution', link: '/rules/vue-caution', items:[
+              { text: 'Vue Essential', link: '/rules/vue-essential', collapsed: true, items: [
+                { text: 'Global Styles', link: '/rules/vue-essential/global-styles' },
+                { text: 'Keyed v-for', link: '/rules/vue-essential/keyed-vfor' },
+                { text: 'Simple Props Definition', link: '/rules/vue-essential/simple-props-definition' },
+                { text: 'v-if With v-for', link: '/rules/vue-essential/vif-with-vfor' },
+              ] },
+              { text: 'Vue Strong', link: '/rules/vue-strong', collapsed: true, items: [
+                { text: 'Component Filename Casing', link: '/rules/vue-strong/component-file-name-casing' },
+                { text: 'Directive Shorthands', link: '/rules/vue-strong/directive-shorthands' },
+                { text: 'Prop Name Casing', link: '/rules/vue-strong/prop-name-casing' },
+                { text: 'Quoted Attribute Values', link: '/rules/vue-strong/quoted-attribute-values' },
+                { text: 'Self Closing Components', link: '/rules/vue-strong/self-closing-components' },
+                { text: 'Simple Computed Properties', link: '/rules/vue-strong/simple-computed-properties' },
+                { text: 'Template Simple Expressions', link: '/rules/vue-strong/template-simple-expressions' },
+              ] },
+              { text: 'Vue Recommended', link: '/rules/vue-recommended', collapsed: true, items: [
+                { text: 'SFC Top-level Element Order', link: '/rules/vue-recommended/sfc-top-level-element-order' },
+              ] },
+              { text: 'Vue Caution', link: '/rules/vue-caution', collapsed: true, items: [
                 { text: 'Implicit parent-child communication', link: '/rules/vue-caution/implicit-parent-child-communication' },
               ] },
-              { text: 'rrd', link: '/rules/rrd' },
+              { text: 'rrd', link: '/rules/rrd', collapsed: true, items: [
+                { text: 'Cyclomatic Complexity', link: '/rules/rrd/cyclomatic-complexity' },
+                { text: 'Deep Indentation', link: '/rules/rrd/deep-indentation' },
+                { text: 'Else Conditions', link: '/rules/rrd/else-conditions' },
+                { text: 'Function Size', link: '/rules/rrd/function-size' },
+                { text: 'Parameter Count', link: '/rules/rrd/parameter-count' },
+                { text: 'Plain Script', link: '/rules/rrd/plain-script' },
+                { text: 'Script Length', link: '/rules/rrd/script-length' },
+                { text: 'Short Variable Name', link: '/rules/rrd/short-variable-name' },
+                { text: 'Too Many Props', link: '/rules/rrd/too-many-props' },
+              ] },
             ],
           },
           { text: 'Contribute', link: '/contribute' },

docs/rules/rrd/cyclomatic-complexity.md

@@ -0,0 +1,17 @@
+# Cyclomatic Complexity
+
+Checks if the cyclomatic complexity of a component is too high. The default threshold is 5. Between 5 and 10 you get a warning, above 10 you get an error.
+
+## 📖 What is cyclomatic complexity?
+
+Complexity is determined by the number of decision points in a component's `script` block. The decision points are `if`, `else`, `while`, `for`, `while` and `case`. If the complexity is between 5 and 10, you get a warning. If it's above 10, you get an error.
+
+The more decision points a component has, the more complex it is. High complexity can make your code harder to read, test, maintain, and debug. Components in general should be small, simple and focused.
+
+## Why it's good to follow this rule?
+
+- **Readability:** Components with high complexity are harder to read and understand. By keeping complexity low, you make your code easier to maintain and debug.
+- **Testability:** Components with high complexity are harder to test. By keeping complexity low, you make your code easier to test.
+- **Maintainability:** Components with high complexity are harder to maintain. By keeping complexity low, you make your code easier to maintain.
+- **Scalability:** As your application grows, keeping complexity low helps manage complexity.
+- **Performance:** Components with high complexity can be slower to render. By keeping complexity low, you can improve performance.

docs/rules/rrd/deep-indentation.md

@@ -0,0 +1,3 @@
+# Deep Indentation
+
+Checks if the indentation of the component is too deep. The default for `tabs` is 5, for `spaces` is 15.

docs/rules/rrd/else-conditions.md

@@ -0,0 +1,3 @@
+# `else` conditions
+
+Checks if there are any `else` condition in the `script` block. This is a code smell because it can be hard to read and understand.

docs/rules/rrd/function-size.md

@@ -0,0 +1,3 @@
+# Function Size
+
+Checks if functions inside `script setup` block are less than 20 lines of code. It handles regular and arrow functions.

docs/rules/rrd/index.md

@@ -0,0 +1,7 @@
+# 💻 rrd Rules
+
+These ruleset is the most opinionated with rules that are not part of the *offical* Vue style guide. They are based on the experience of this repo owner and are meant to help you write better Vue code.
+
+## Why it's good to follow this ruleset?
+
+Opinionated means that there is a clear path to follow. This is good for teams because it helps to have a consistent codebase. It also helps to avoid common pitfalls and bugs.

docs/rules/rrd/parameter-count.md

@@ -0,0 +1,3 @@
+# Parameter Count
+
+Checks if functions inside `script setup` block have less than 4 parameters. It handles regular and arrow functions.

docs/rules/rrd/plain-script.md

@@ -0,0 +1,3 @@
+# Plain Script
+
+Checks if the script section of a Vue component is not using `<script setup>`

docs/rules/rrd/script-length.md

@@ -0,0 +1,3 @@
+# Script Length
+
+Checks if the script section of a Vue component is too long. The default threshold is 100 lines. Between 100 and 200 lines you get a warning, above 200 lines you get an error.

docs/rules/rrd/short-variable-name.md

@@ -0,0 +1,3 @@
+# Short Variable Name
+
+Checks if variable names inside `<script setup>` block have less than 4 chars.

docs/rules/rrd/too-many-props.md

@@ -0,0 +1,3 @@
+## Too many props
+
+Checks if the component got more then 5 props.

docs/rules/vue-essential/global-styles.md

@@ -0,0 +1,4 @@
+## Global Styles
+
+Checks if the component is using global styles instead of `scoped` styles. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-essential.html#use-component-scoped-styling

docs/rules/vue-essential/index.md

@@ -0,0 +1,3 @@
+# ⭐ Vue Essential Rules
+
+These rules help prevent errors, so learn and abide by them at all costs. Exceptions *may* exist, but should be *very rare* and only be made by those with *expert* knowledge of both JavaScript and Vue.

docs/rules/vue-essential/keyed-vfor.md

@@ -0,0 +1,5 @@
+# Keyed `v-for`
+
+Checks if the component is using `v-for` without a `key` property. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-essential.html#use-keyed-v-for
+

docs/rules/vue-essential/simple-props-definition.md

@@ -0,0 +1,4 @@
+# Simple Props Definitions
+
+Checks if the component is using simple props definitions. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-essential.html#use-detailed-prop-definitions

docs/rules/vue-essential/single-name-components.md

@@ -0,0 +1,4 @@
+# Single Name Component
+
+Checks if the component name is a single word. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names

docs/rules/vue-essential/vif-with-vfor.md

@@ -0,0 +1,4 @@
+# `v-if` With `v-for`
+
+Checks if the component is using `v-if` with `v-for`. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for

docs/rules/vue-recommended/index.md

@@ -0,0 +1,3 @@
+# ✅ Vue Recommended Rules
+
+Where multiple, equally good options exist, an arbitrary choice can be made to ensure consistency. In these rules, we describe each acceptable option and suggest a default choice. That means you can feel free to make a different choice in your own codebase, as long as you're consistent and have a good reason. 

docs/rules/vue-recommended.md → docs/rules/vue-recommended/sfc-top-level-element-order.md

@@ -1,11 +1,9 @@
-# ✅ Vue Recommended Rules
-
-## Single-file component top-level element order
+# Single-file component top-level element order
 
 Checks if the component always uses `script`, `template`, and `style` tags' order consistently. &nbsp;&nbsp;<br />
 👉 https://vuejs.org/style-guide/rules-recommended.html#single-file-component-top-level-element-order
 
-### Why it's good to follow this rule
+## Why it's good to follow this rule?
 
 - **Consistency:** The rule encourages consistent ordering of `script`, `template`, and `style` tags within Vue single-file components. Consistency in code structure makes it easier for developers to navigate and understand the codebase quickly.
 - **Readability:** A consistent order of elements improves readability. Developers can quickly locate specific sections of the component without having to search through the entire file.

docs/rules/vue-strong/component-file-name-casing.md

@@ -0,0 +1,4 @@
+# Component File Name Casing
+
+Checks if the component file name is in PascalCase or kebab-case. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#single-file-component-filename-casing

docs/rules/vue-strong/directive-shorthands.md

@@ -0,0 +1,8 @@
+# Directive Shorthands
+
+Checks if the template is using directive shorthands. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands
+
+::: warning
+This rule enforces using directive shorthands for better readability. While the official style guide allows using shorthands "**always** or **never**", this rule will flag non-shorthands as code smell.
+:::

docs/rules/vue-strong/index.md

@@ -0,0 +1,3 @@
+# 👍 Vue Strongly Recommended Rules
+
+These rules have been found to improve readability and/or developer experience in most projects. Your code will still run if you violate them, but violations should be rare and well-justified.

docs/rules/vue-strong/prop-name-casing.md

@@ -0,0 +1,4 @@
+# Prop Name Casing
+
+Checks if the props name is in camelCase. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#prop-name-casing

docs/rules/vue-strong/quoted-attribute-values.md

@@ -0,0 +1,4 @@
+# Quoted Attribute Values
+
+Checks if the template is using quoted attribute values. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#quoted-attribute-values

docs/rules/vue-strong/self-closing-components.md

@@ -0,0 +1,4 @@
+# Self Closing Components
+
+Checks if the template is using self-closing components. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#self-closing-components

docs/rules/vue-strong/simple-computed-properties.md

@@ -0,0 +1,4 @@
+# Simple computed properties
+
+Checks if any computed properties are bigger than 5 lines. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#simple-computed-properties

docs/rules/vue-strong/template-simple-expressions.md

@@ -0,0 +1,4 @@
+# Template Simple Expressions
+
+Checks if the template is using only simple expressions. &nbsp;&nbsp;<br />
+👉 https://vuejs.org/style-guide/rules-strongly-recommended.html#simple-expressions-in-templates

src/rules/rrd/cyclomaticComplexity.ts

@@ -1,6 +1,6 @@
-import { SFCScriptBlock } from '@vue/compiler-sfc'
-import { BG_INFO, BG_RESET, BG_WARN, TEXT_WARN, TEXT_RESET, BG_ERR, TEXT_INFO } from '../asceeCodes'
+import type { SFCScriptBlock } from '@vue/compiler-sfc'
 import { caseInsensitive, createRegExp, global, wordBoundary } from 'magic-regexp'
+import { BG_ERR, BG_INFO, BG_RESET, BG_WARN, TEXT_INFO, TEXT_RESET, TEXT_WARN } from '../asceeCodes'
 
 /**
  * Defines complexity thresholds.
@@ -11,7 +11,7 @@ const COMPLEXITY_HIGH = 10
 /**
  * Array to store files with medium or high cyclomatic complexity.
  */
-const cyclomaticComplexityFiles: { fileName: string; cyclomaticComplexity: number }[] = []
+const cyclomaticComplexityFiles: { fileName: string, cyclomaticComplexity: number }[] = []
 
 /**
  * Function to check cyclomatic complexity of a SFC script block.
@@ -35,12 +35,12 @@ const checkCyclomaticComplexity = (script: SFCScriptBlock | null, file: string)
   const _whileCount = script.content.match(_while)
   const _caseCount = script.content.match(_case)
 
-  const cyclomaticComplexity =
-    (_ifCount?.length || 0) +
-    (_elseCount?.length || 0) +
-    (_forCount?.length || 0) +
-    (_whileCount?.length || 0) +
-    (_caseCount?.length || 0)
+  const cyclomaticComplexity
+    = (_ifCount?.length || 0)
+    + (_elseCount?.length || 0)
+    + (_forCount?.length || 0)
+    + (_whileCount?.length || 0)
+    + (_caseCount?.length || 0)
 
   if (cyclomaticComplexity > COMPLEXITY_MODERATE) {
     cyclomaticComplexityFiles.push({ fileName: file, cyclomaticComplexity })
@@ -55,14 +55,14 @@ const checkCyclomaticComplexity = (script: SFCScriptBlock | null, file: string)
 const reportCyclomaticComplexity = () => {
   if (cyclomaticComplexityFiles.length > 0) {
     console.log(
-      `\n${TEXT_INFO}rrd${TEXT_RESET} ${BG_INFO}cyclomaticComplexity${BG_RESET} is above moderate in ${cyclomaticComplexityFiles.length} files.`
+      `\n${TEXT_INFO}rrd${TEXT_RESET} ${BG_INFO}cyclomaticComplexity${BG_RESET} is above moderate in ${cyclomaticComplexityFiles.length} files.`,
     )
     console.log(`👉 ${TEXT_WARN}Try to reduce complexity.${TEXT_RESET}`)
-    cyclomaticComplexityFiles.forEach(file => {
+    cyclomaticComplexityFiles.forEach((file) => {
       console.log(
         `- ${file.fileName} ${file.cyclomaticComplexity > COMPLEXITY_HIGH ? BG_ERR : BG_WARN}(${
           file.cyclomaticComplexity
-        })${BG_RESET}`
+        })${BG_RESET}`,
       )
     })
   }