feat: implement rule for directive shorthands fix #36

Author: rrd108

.gitignore

@@ -1 +1,2 @@
 node_modules
+test

README.md

@@ -107,7 +107,14 @@ See: https://vuejs.org/style-guide/rules-strongly-recommended.html#simple-expres
 ### Quoted Attribute Values (vue-strong)
 
 Checks if the template is using quoted attribute values.
-See:https://vuejs.org/style-guide/rules-strongly-recommended.html#quoted-attribute-values
+See: https://vuejs.org/style-guide/rules-strongly-recommended.html#quoted-attribute-values
+
+### Directive Shorthands (vue-strong)
+
+Checks if the template is using directive shorthands.
+See: https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands
+
+> 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.
 
 ### Script Length (rrd)
 

dist/vue-mess-detector.es.js

@@ -16,6 +16,7 @@ import { checkPropNameCasing, reportPropNameCasing } from './rules/vue-strong/pr
 import { checkTemplateSimpleExpression, reportTemplateSimpleExpression } from './rules/vue-strong/templateSimpleExpression'
 import { checkQuotedAttributeValues, reportQuotedAttributeValues } from './rules/vue-strong/quotedAttribueValues'
 import { checkSelfClosingComponents, reportSelfClosingComponents } from './rules/vue-strong/selfClosingComponents'
+import { checkDirectiveShorthands, reportDirectiveShorthands } from './rules/vue-strong/directiveShorthands'
 
 let filesCount = 0
 
@@ -54,7 +55,6 @@ export const analyze = (dir: string) => {
   const files: string[] = []
 
   walkSync(dir, filePath => {
-    // skip app.vue and App.vue
     if (filePath.includes('App.vue') || filePath.includes('app.vue')) {
       return
     }
@@ -93,6 +93,7 @@ export const analyze = (dir: string) => {
       checkSelfClosingComponents(descriptor, filePath)
       checkTemplateSimpleExpression(descriptor.template, filePath)
       checkQuotedAttributeValues(descriptor, filePath)
+      checkDirectiveShorthands(descriptor, filePath)
     }
   })
 
@@ -111,6 +112,7 @@ export const analyze = (dir: string) => {
   errors += reportPropNameCasing()
   errors += reportTemplateSimpleExpression()
   errors += reportQuotedAttributeValues()
+  errors += reportDirectiveShorthands()
 
   // vue-reccomended rules
   // vue-caution rules

dist/vue-mess-detector.umd.js

@@ -0,0 +1,47 @@
+import { describe, expect, it, vi } from 'vitest'
+import { SFCDescriptor, SFCTemplateBlock } from '@vue/compiler-sfc'
+import { checkDirectiveShorthands, reportDirectiveShorthands } from './directiveShorthands'
+import { BG_RESET, BG_WARN } from '../asceeCodes'
+
+const mockConsoleLog = vi.spyOn(console, 'log').mockImplementation(() => {})
+
+describe('checkDirectiveShorthands', () => {
+  it('should not report files where directive shorthands are used', () => {
+    const template = `<template #header>
+      <input
+        :value="newTodoText"
+        @input="addTodo"
+        >
+    </template>`
+    const descriptor = {
+      source: template,
+      template: {
+        content: template,
+      },
+    } as SFCDescriptor
+    const fileName = 'directive-shorthands.vue'
+    checkDirectiveShorthands(descriptor, fileName)
+    expect(reportDirectiveShorthands()).toBe(0)
+    expect(mockConsoleLog).not.toHaveBeenCalled()
+  })
+
+  it('should report files where directive shorthands are not used', () => {
+    const template = `<template v-slot:header>
+      <input
+        v-bind:value="newTodoText"
+        v-on:input="addTodo"
+        >
+    </template>`
+    const descriptor = {
+      source: template,
+      template: {
+        content: template,
+      },
+    } as SFCDescriptor
+    const fileName = 'no-directive-shorthands.vue'
+    checkDirectiveShorthands(descriptor, fileName)
+    expect(reportDirectiveShorthands()).toBe(3)
+    expect(mockConsoleLog).toHaveBeenCalled()
+    expect(mockConsoleLog).toHaveBeenLastCalledWith(`- ${fileName}:4 ${BG_WARN}v-on${BG_RESET} 🚨`)
+  })
+})

src/analyzer.ts

@@ -0,0 +1,40 @@
+import { SFCDescriptor } from '@vue/compiler-sfc'
+import { BG_RESET, TEXT_WARN, TEXT_RESET, BG_ERR, TEXT_INFO, BG_WARN } from '../asceeCodes'
+import getLineNumber from '../getLineNumber'
+
+const directiveShorthandsTargets: { message: string }[] = []
+const directiveShorthandsFiles: { filrPath: string }[] = []
+
+const directivesToCheck = ['v-slot', 'v-bind', 'v-on']
+
+const checkDirectiveShorthands = (descriptor: SFCDescriptor, filePath: string) => {
+  const template = descriptor.template! // it is exists otherwise the function is not called at all
+
+  directivesToCheck.forEach(directive => {
+    if (template.content.includes(`${directive}:`)) {
+      const lineNumber = getLineNumber(descriptor.source, directive)
+      directiveShorthandsTargets.push({ message: `${filePath}:${lineNumber} ${BG_WARN}${directive}${BG_RESET}` })
+
+      if (!directiveShorthandsFiles.some(file => file.filrPath === filePath)) {
+        directiveShorthandsFiles.push({ filrPath: filePath })
+      }
+    }
+  })
+}
+
+const reportDirectiveShorthands = () => {
+  if (directiveShorthandsTargets.length > 0) {
+    console.log(
+      `\n${TEXT_INFO}vue-strong${TEXT_RESET} ${BG_ERR}Directive shorthands not used${BG_RESET} in ${directiveShorthandsFiles.length} files.`
+    )
+    console.log(
+      `👉 ${TEXT_WARN}Use ":" for v-bind:, "@" for v-on: and "#" for v-slot.${TEXT_RESET} See: https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands`
+    )
+    directiveShorthandsTargets.forEach(file => {
+      console.log(`- ${file.message} 🚨`)
+    })
+  }
+  return directiveShorthandsTargets.length
+}
+
+export { checkDirectiveShorthands, reportDirectiveShorthands }