docs: add code examples

docs/.vitepress/config.ts

@@ -88,4 +88,11 @@ export default defineConfig({
       { icon: 'github', link: 'https://github.com/rrd108/vue-mess-detector' },
     ],
   },
+  markdown: {
+    theme: {
+      light: 'vitesse-light',
+      dark: 'vitesse-dark',
+    },
+    lineNumbers: true,
+  },
 })

docs/rules/rrd/cyclomatic-complexity.md

@@ -15,3 +15,61 @@ The more decision points a component has, the more complex it is. High complexit
 - **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.
+
+## 😱 Examples of code for which this rule will throw a warning
+
+::: warning
+The following code has a high cyclomatic complexity, which means it contains too many decision points (such as `if`, `for`, `while` statements). High complexity can make the code difficult to understand, maintain, and test.
+:::
+
+```vue
+<script setup>
+if (condition1) {
+  if (condition2) {
+    // code
+  }
+  else {
+    // code
+  }
+}
+else if (condition3) {
+  for (let i = 0; i < 10; i++) {
+    // code
+  }
+}
+else {
+  while (condition4) {
+    // code
+  }
+}
+</script>
+```
+
+In this example, the code's cyclomatic complexity is high due to multiple nested conditionals and loops, making the logic harder to follow and increasing the chances of bugs.
+
+## 🤩 How to fix it?
+
+::: tip
+To improve the code, consider refactoring to reduce the number of decision points and simplify the logic. You can break down the logic into smaller, more focused functions or components, each with lower complexity.
+:::
+
+```vue
+<script setup>
+import handleCondition1 from './useHandleCondition1'
+import handleCondition2 from './useHandleCondition2'
+
+if (condition1) {
+  handleCondition1(condition2)
+}
+else if (condition3) {
+  for (let i = 0; i < 10; i++) {
+    // simpler code
+  }
+}
+else {
+  handleCondition2(condition4)
+}
+</script>
+```
+
+In the refactored example, the complex nested logic is moved into separate functions or composables (`handleCondition1`, `handleCondition2`), reducing the overall cyclomatic complexity of the script. This makes the code more modular, easier to test, and maintain.

docs/rules/rrd/deep-indentation.md

@@ -1,3 +1,49 @@
 # Deep Indentation
 
 Checks if the indentation of the component is too deep. The default for `tabs` is 5, for `spaces` is 15.
+
+## 😱 Examples of code for which this rule will throw a warning
+
+::: warning
+The following code contains deep indentation, which can make the code harder to read and maintain. Excessive indentation often indicates that the code is doing too much in a single function or component, and it may benefit from refactoring.
+:::
+
+```vue
+<script setup>
+function init() {
+  if (condition) {
+    for (let i = 0; i < 10; i++) {
+      while (anotherCondition) {
+        // deeply nested code here
+      }
+    }
+  }
+}
+</script>
+```
+
+In this example, the code inside the `<script>` block is indented too deeply, making it difficult to follow the logic and increasing the chances of errors or misunderstandings.
+
+## 🤩 How to fix it?
+
+::: tip
+To improve readability and maintainability, consider refactoring the code by breaking down the logic into smaller, more focused functions or components. This will reduce the need for deep indentation and make the code easier to understand.
+:::
+
+```vue
+<script setup>
+import useHandleCondition from './useHandleCondition'
+
+if (condition) {
+  handleLoops()
+}
+
+function handleLoops() {
+  for (let i = 0; i < 10; i++) {
+    useHandleCondition()
+  }
+}
+</script>
+```
+
+In the refactored example, the deeply nested logic is moved into a separate function or even a custom composable (like useHandleCondition), which reduces the indentation level and makes the main code more concise and easier to read.

docs/rules/rrd/else-condition.md

@@ -8,3 +8,35 @@ Checks if there are any `else` condition in the `script` block. This is a code s
 - **Maintainability**: Code without `else` conditions is easier to maintain and refactor.
 - **Testability**: Code without `else` conditions is easier to test.
 
+## 😱 Examples of code for which this rule will throw a warning
+
+::: danger
+The following code contains an else clause. It indicates that the logic could potentially be simplified to avoid using the else statement altogether.
+:::
+
+```javascript
+function checkUserStatus(isLoggedIn) {
+  if (isLoggedIn) {
+    console.log('Welcome back!')
+  }
+  else {
+    console.log('Please log in.')
+  }
+}
+```
+
+## 🤩 How to fix it?
+
+::: tip
+Refactor the code to avoid the else clause by using a guard clause or combining the conditions into a single if statement. This will enhance readability and reduce complexity.
+:::
+
+```javascript
+function checkUserStatus(isLoggedIn) {
+  if (!isLoggedIn) {
+    console.log('Please log in.')
+    return // Early return to eliminate else
+  }
+  console.log('Welcome back!')
+}
+```

docs/rules/rrd/function-size.md

@@ -8,3 +8,116 @@ Checks if functions inside `script setup` block are less than 20 lines of code.
 - **Readability**: Smaller functions are easier to read and understand.
 - **Maintainability**: Smaller functions are easier to maintain and refactor.
 - **Testability**: Smaller functions are easier to test.
+
+## 😱 Examples of code for which this rule will throw a warning
+
+::: warning
+The following code contains functions that exceed the recommended size limit. Large functions can be difficult to read, understand, and maintain.
+:::
+
+```javascript
+function dummyRegularFunction() {
+  const firstName = 'john'
+  const lastName = 'doe'
+  const age = 30
+
+  if (age < 18) {
+    console.log('Too young for this function!')
+  }
+  else {
+    console.log('Hello ', firstName)
+  }
+
+  const hobbies = ['reading', 'gaming', 'cooking']
+  for (const hobby of hobbies) {
+    console.log('I enjoy ', hobby)
+  }
+
+  const getRandomNumber = () => Math.floor(Math.random() * 100)
+  const randomNum = getRandomNumber()
+  console.log('Random number: ', randomNum)
+
+  return 'Function execution complete!'
+}
+```
+
+Another example with an arrow function:
+
+```javascript
+const getOpenBookings = page =>
+  axios
+    .get(`${import.meta.env.VITE_APP_API_URL}bookings/listOpen.json?page=${page}`, store.tokenHeader)
+    .then((res) => {
+      bookings.value = res.data.bookings
+      paginate.value = res.data.paginate
+
+      const hobbies = ['reading', 'gaming', 'cooking']
+      for (const hobby of hobbies) {
+        console.log('I enjoy ', hobby)
+      }
+
+      bookings.value = res.data.bookings
+      paginate.value = res.data.paginate
+      bookings.value = res.data.bookings
+      paginate.value = res.data.paginate
+      bookings.value = res.data.bookings
+      paginate.value = res.data.paginate
+      // Additional repetitive lines...
+    })
+    .catch(err => console.error(err))
+```
+
+## 🤩 How to fix it?
+
+::: tip
+Refactor the function to reduce its size by breaking it down into smaller, more focused functions. This improves readability, testability, and maintainability.
+:::
+
+For the first example:
+
+```javascript
+function logAgeMessage(age) {
+  if (age < 18) {
+    console.log('Too young for this function!')
+  }
+  else {
+    console.log('Hello ', firstName)
+  }
+}
+
+function listHobbies(hobbies) {
+  for (const hobby of hobbies) {
+    console.log('I enjoy ', hobby)
+  }
+}
+
+function dummyRegularFunction() {
+  const firstName = 'john'
+  const lastName = 'doe'
+  const age = 30
+
+  logAgeMessage(age)
+  listHobbies(['reading', 'gaming', 'cooking'])
+
+  const randomNum = Math.floor(Math.random() * 100)
+  console.log('Random number: ', randomNum)
+
+  return 'Function execution complete!'
+}
+```
+
+For the arrow function:
+
+```javascript
+const handleResponse = (res) => {
+  bookings.value = res.data.bookings
+  paginate.value = res.data.paginate
+  // Handle repetitive logic here or refactor further
+}
+
+const getOpenBookings = page =>
+  axios
+    .get(`${import.meta.env.VITE_APP_API_URL}bookings/listOpen.json?page=${page}`, store.tokenHeader)
+    .then(handleResponse)
+    .catch(err => console.error(err))
+```

docs/rules/rrd/parameter-count.md

@@ -1,3 +1,49 @@
 # Parameter Count
 
 Checks if functions inside `script setup` block have less than 4 parameters. It handles regular and arrow functions.
+
+## 😱 Examples of code for which this rule will throw a warning
+
+::: warning
+The following code contains functions that exceed the recommended limit on the number of parameters. Having too many parameters in a function can make the code harder to understand and maintain.
+:::
+
+```javascript
+function dummyFuncOne(param1, param2, param3, param4, param5) {
+  return 'One'
+}
+```
+
+Another example with an arrow function:
+
+```javascript
+const dummyFuncTwo = (param1, param2, param3, param4) => {
+  return 'Two'
+}
+```
+
+## 🤩 How to fix it?
+
+::: tip
+Refactor the function to reduce the number of parameters by using objects, destructuring, or considering whether all parameters are necessary. This will improve readability and maintainability.
+:::
+
+For the first example:
+
+```javascript
+function dummyFuncOne({ param1, param2, param3, param4, param5 }) {
+  return 'One'
+}
+```
+
+In this refactor, the parameters are combined into a single object, making the function call cleaner and easier to understand. Alternatively, if not all parameters are needed at the same time, consider splitting the function or removing unnecessary parameters.
+
+For the arrow function:
+
+```javascript
+const dummyFuncTwo = ({ param1, param2, param3, param4 }) => {
+  return 'Two'
+}
+```
+
+This refactor also combines parameters into an object, reducing the cognitive load when using the function. This approach can help avoid the issue of excessive parameters while keeping the codebase clean and maintainable.

docs/rules/rrd/plain-script.md

@@ -1,3 +1,46 @@
 # Plain Script
 
 Checks if the script section of a Vue component is not using `<script setup>`
+
+## 😱 Examples of code for which this rule will throw a warning
+
+::: warning
+The following code uses a plain `<script>` block instead of the recommended `<script setup>`. This can limit the advantages provided by the new Vue 3 Single File Component (SFC) syntax.
+:::
+
+```vue
+<script>
+export default {
+  data() {
+    return {
+      message: 'Hello, world!',
+    }
+  },
+  methods: {
+    greet() {
+      console.log(this.message)
+    }
+  }
+}
+</script>
+```
+
+## 🤩 How to fix it?
+
+::: tip
+Convert the plain `<script>` block to `<script setup>` to take full advantage of Vue 3's Composition API and the simplified SFC syntax.
+:::
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const message = ref('Hello, world!')
+
+function greet() {
+  console.log(message.value)
+}
+</script>
+```
+
+By using `<script setup>`, the code becomes more concise, and you gain the benefits of the Composition API, such as automatic imports and better performance. This approach also aligns with Vue 3's best practices and future-proofing your codebase.