Merge pull request #13 from andrewmolyuk/components-index-required

feat: add sfc-required rule to enforce Single File Component structure for Vue components

Author: andrewmolyuk

.github/workflows/test-pr.yml

@@ -29,3 +29,8 @@ jobs:
       - run: make install
 
       - run: make build
+
+      - uses: codacy/codacy-coverage-reporter-action@v1.3.0
+        with:
+          project-token: ${{ secrets.CODACY_PROJECT_TOKEN }}
+          coverage-reports: coverage/lcov.info

bun.lock

@@ -10,6 +10,7 @@
         "minimatch": "^10.0.3",
         "typescript": "^5.9.2",
         "typescript-eslint": "^8.43.0",
+        "vue-eslint-parser": "^10.2.0",
       },
       "devDependencies": {
         "@commitlint/cli": "^19.8.1",
@@ -22,7 +23,7 @@
         "husky": "^9.1.7",
         "markdownlint": "^0.38.0",
         "markdownlint-cli": "^0.45.0",
-        "npm-check-updates": "^18.1.0",
+        "npm-check-updates": "^18.1.1",
         "prettier": "^3.6.2",
         "semantic-release": "^24.2.8",
         "vitest": "^3.2.4",
@@ -844,7 +845,7 @@
 
     "npm": ["npm@10.9.3", "", { "dependencies": { "@isaacs/string-locale-compare": "^1.1.0", "@npmcli/arborist": "^8.0.1", "@npmcli/config": "^9.0.0", "@npmcli/fs": "^4.0.0", "@npmcli/map-workspaces": "^4.0.2", "@npmcli/package-json": "^6.2.0", "@npmcli/promise-spawn": "^8.0.2", "@npmcli/redact": "^3.2.2", "@npmcli/run-script": "^9.1.0", "@sigstore/tuf": "^3.1.1", "abbrev": "^3.0.1", "archy": "~1.0.0", "cacache": "^19.0.1", "chalk": "^5.4.1", "ci-info": "^4.2.0", "cli-columns": "^4.0.0", "fastest-levenshtein": "^1.0.16", "fs-minipass": "^3.0.3", "glob": "^10.4.5", "graceful-fs": "^4.2.11", "hosted-git-info": "^8.1.0", "ini": "^5.0.0", "init-package-json": "^7.0.2", "is-cidr": "^5.1.1", "json-parse-even-better-errors": "^4.0.0", "libnpmaccess": "^9.0.0", "libnpmdiff": "^7.0.1", "libnpmexec": "^9.0.1", "libnpmfund": "^6.0.1", "libnpmhook": "^11.0.0", "libnpmorg": "^7.0.0", "libnpmpack": "^8.0.1", "libnpmpublish": "^10.0.1", "libnpmsearch": "^8.0.0", "libnpmteam": "^7.0.0", "libnpmversion": "^7.0.0", "make-fetch-happen": "^14.0.3", "minimatch": "^9.0.5", "minipass": "^7.1.1", "minipass-pipeline": "^1.2.4", "ms": "^2.1.2", "node-gyp": "^11.2.0", "nopt": "^8.1.0", "normalize-package-data": "^7.0.0", "npm-audit-report": "^6.0.0", "npm-install-checks": "^7.1.1", "npm-package-arg": "^12.0.2", "npm-pick-manifest": "^10.0.0", "npm-profile": "^11.0.1", "npm-registry-fetch": "^18.0.2", "npm-user-validate": "^3.0.0", "p-map": "^7.0.3", "pacote": "^19.0.1", "parse-conflict-json": "^4.0.0", "proc-log": "^5.0.0", "qrcode-terminal": "^0.12.0", "read": "^4.1.0", "semver": "^7.7.2", "spdx-expression-parse": "^4.0.0", "ssri": "^12.0.0", "supports-color": "^9.4.0", "tar": "^6.2.1", "text-table": "~0.2.0", "tiny-relative-date": "^1.3.0", "treeverse": "^3.0.0", "validate-npm-package-name": "^6.0.1", "which": "^5.0.0", "write-file-atomic": "^6.0.0" }, "bin": { "npm": "bin/npm-cli.js", "npx": "bin/npx-cli.js" } }, "sha512-6Eh1u5Q+kIVXeA8e7l2c/HpnFFcwrkt37xDMujD5be1gloWa9p6j3Fsv3mByXXmqJHy+2cElRMML8opNT7xIJQ=="],
 
-    "npm-check-updates": ["npm-check-updates@18.1.0", "", { "bin": { "npm-check-updates": "build/cli.js", "ncu": "build/cli.js" } }, "sha512-1TQ6fO4HxVW4K/TWUPOa1KRbaL0Y9+CgDJeTkrA3c4YFgaW8uoxllCKlm4OM/28C9E9NR3MlkxtcFs0Z1VaCPg=="],
+    "npm-check-updates": ["npm-check-updates@18.1.1", "", { "bin": { "npm-check-updates": "build/cli.js", "ncu": "build/cli.js" } }, "sha512-sr+z5tEZop9n+uxAv/FVbpIdrayfG3Dr/D91igb+GyBl9eiudYUfGUZEBsmHq6kMOGEssSM3YWrP3njQjVU4Gw=="],
 
     "npm-run-path": ["npm-run-path@4.0.1", "", { "dependencies": { "path-key": "^3.0.0" } }, "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw=="],
 
@@ -1096,6 +1097,8 @@
 
     "vitest": ["vitest@3.2.4", "", { "dependencies": { "@types/chai": "^5.2.2", "@vitest/expect": "3.2.4", "@vitest/mocker": "3.2.4", "@vitest/pretty-format": "^3.2.4", "@vitest/runner": "3.2.4", "@vitest/snapshot": "3.2.4", "@vitest/spy": "3.2.4", "@vitest/utils": "3.2.4", "chai": "^5.2.0", "debug": "^4.4.1", "expect-type": "^1.2.1", "magic-string": "^0.30.17", "pathe": "^2.0.3", "picomatch": "^4.0.2", "std-env": "^3.9.0", "tinybench": "^2.9.0", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.14", "tinypool": "^1.1.1", "tinyrainbow": "^2.0.0", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0", "vite-node": "3.2.4", "why-is-node-running": "^2.3.0" }, "peerDependencies": { "@edge-runtime/vm": "*", "@types/debug": "^4.1.12", "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "@vitest/browser": "3.2.4", "@vitest/ui": "3.2.4", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@types/debug", "@types/node", "@vitest/browser", "@vitest/ui", "happy-dom", "jsdom"], "bin": { "vitest": "vitest.mjs" } }, "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A=="],
 
+    "vue-eslint-parser": ["vue-eslint-parser@10.2.0", "", { "dependencies": { "debug": "^4.4.0", "eslint-scope": "^8.2.0", "eslint-visitor-keys": "^4.2.0", "espree": "^10.3.0", "esquery": "^1.6.0", "semver": "^7.6.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0" } }, "sha512-CydUvFOQKD928UzZhTp4pr2vWz1L+H99t7Pkln2QSPdvmURT0MoC4wUccfCnuEaihNsu9aYYyk+bep8rlfkUXw=="],
+
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
 
     "why-is-node-running": ["why-is-node-running@2.3.0", "", { "dependencies": { "siginfo": "^2.0.0", "stackback": "0.0.2" }, "bin": { "why-is-node-running": "cli.js" } }, "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w=="],

eslint.config.mjs

@@ -4,7 +4,7 @@ import prettierPluginRecommended from 'eslint-plugin-prettier/recommended'
 import tseslint from 'typescript-eslint'
 
 export default [
-  { ignores: ['\\!JS/**', 'node_modules/**', 'dist/**', '.git/**', '**/*.d.ts'] },
+  { ignores: ['node_modules/**', 'dist/**', '.git/**', '**/*.d.ts'] },
   // Base recommended configuration
   eslint.configs.recommended,
 

package.json

@@ -44,7 +44,7 @@
     "husky": "^9.1.7",
     "markdownlint-cli": "^0.45.0",
     "markdownlint": "^0.38.0",
-    "npm-check-updates": "^18.1.0",
+    "npm-check-updates": "^18.1.1",
     "prettier": "^3.6.2",
     "semantic-release": "^24.2.8",
     "vitest": "^3.2.4"
@@ -54,7 +54,8 @@
     "@vue/compiler-sfc": "^3.5.21",
     "eslint": "^9.35.0",
     "minimatch": "^10.0.3",
+    "typescript": "^5.9.2",
     "typescript-eslint": "^8.43.0",
-    "typescript": "^5.9.2"
+    "vue-eslint-parser": "^10.2.0"
   }
 }

src/rules.ts

@@ -1,6 +1,18 @@
+import { componentsIndexRequired } from './rules/components-index-required'
+import { featureIndexRequired } from './rules/feature-index-required'
+import { fileComponentNaming } from './rules/file-component-naming'
 import { fileTsNaming } from './rules/file-ts-naming'
+import { folderKebabCase } from './rules/folder-kebab-case'
+import { sfcRequired } from './rules/sfc-required'
+import { sharedIndexRequired } from './rules/shared-ui-index-required'
 import { VueModularRuleModule } from './types'
 
 export const rules: Record<string, VueModularRuleModule> = {
+  'components-index-required': componentsIndexRequired,
+  'feature-index-required': featureIndexRequired,
+  'file-component-naming': fileComponentNaming,
   'file-ts-naming': fileTsNaming,
+  'folder-kebab-case': folderKebabCase,
+  'shared-ui-index-required': sharedIndexRequired,
+  'sfc-required': sfcRequired,
 }

src/rules/sfc-required.ts

@@ -0,0 +1,59 @@
+import { createRule, parseRuleOptions, isIgnored, isComponent, parseProjectOptions } from '../utils'
+import type { VueModularRuleModule, VueModularRuleContext } from '../types'
+import { parse } from '@vue/compiler-sfc'
+
+const defaultOptions = {
+  ignores: [''],
+}
+
+//
+export const sfcRequired = createRule<VueModularRuleModule>({
+  create(context: VueModularRuleContext) {
+    const options = parseRuleOptions(context, defaultOptions)
+    if (isIgnored(context.filename, options.ignores)) return {}
+
+    const projectOptions = parseProjectOptions(context)
+
+    // Only check Component files
+    if (!isComponent(context.filename, projectOptions.rootPath, projectOptions.rootAlias, projectOptions.componentsFolderName)) return {}
+
+    return {
+      Program(node) {
+        const { descriptor } = parse(context.sourceCode.text)
+        const hasTemplate = !!descriptor.template
+        const hasScript = !!descriptor.script || !!descriptor.scriptSetup
+
+        if (!hasTemplate && !hasScript) {
+          context.report({
+            node,
+            messageId: 'missingSfcBlock',
+            data: { name: context.filename },
+          })
+        }
+      },
+    }
+  },
+  name: 'sfc-required',
+  recommended: true,
+  level: 'warn',
+  meta: {
+    type: 'suggestion',
+    docs: {
+      category: 'Component Rules',
+      description: 'Require Single File Component structure for Vue components',
+    },
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          ignores: { type: 'array', items: { type: 'string' } },
+        },
+        additionalProperties: false,
+      },
+    ],
+    defaultOptions: [defaultOptions],
+    messages: {
+      missingSfcBlock: 'Vue file "{{name}}" should contain at least a <template> or a <script> block.',
+    },
+  },
+})

tests/rules/file-component-naming.test.ts

@@ -1,8 +1,8 @@
 import { describe, it } from 'vitest'
 import { fileComponentNaming } from '../../src/rules/file-component-naming'
-import { RuleTester } from 'eslint'
+import { getRuleTester } from '../test-utils'
 
-const ruleTester = new RuleTester()
+const ruleTester = getRuleTester()
 
 describe('file-component-naming', () => {
   it('should pass for PascalCase .vue filename', () => {

tests/rules/sfc-required.test.ts

@@ -0,0 +1,32 @@
+import { getRuleTester } from '../test-utils'
+import { sfcRequired } from '../../src/rules/sfc-required'
+import { describe, it } from 'vitest'
+
+const ruleTester = getRuleTester()
+
+describe('sfc-required', () => {
+  it('test cases for sfc-required rule', () => {
+    ruleTester.run('sfc-required', sfcRequired, {
+      valid: [
+        { code: '<div></div>', filename: 'app/components/MyComp.vue' },
+        { code: '', filename: 'src/components/MyComp.vue', options: [{ ignores: ['**/MyComp.vue'] }] },
+        { code: '<template><div/></template>', filename: 'src/components/MyComp.vue' },
+        { code: '<script>export default {}</script>', filename: 'src/components/MyComp.vue' },
+        { code: '<script setup>export default {}</script>', filename: 'src/components/MyComp.vue' },
+        { code: '<template><div/></template><style></style><script></script>', filename: 'src/components/MyComp.vue' },
+      ],
+      invalid: [
+        {
+          code: '<div></div>',
+          filename: 'src/components/MyComp.vue',
+          errors: [{ messageId: 'missingSfcBlock', data: { name: 'src/components/MyComp.vue' } }],
+        },
+        {
+          code: '<style></style>',
+          filename: 'src/components/MyComp.vue',
+          errors: [{ messageId: 'missingSfcBlock', data: { name: 'src/components/MyComp.vue' } }],
+        },
+      ],
+    })
+  })
+})

tests/test-utils/getRuleTester.ts

@@ -0,0 +1,11 @@
+import parser from 'vue-eslint-parser'
+import { RuleTester } from 'eslint'
+
+// Utility to create a RuleTester instance with Vue parser and default options
+export const getRuleTester = () => {
+  return new RuleTester({
+    languageOptions: {
+      parser,
+    },
+  })
+}

tests/test-utils/index.ts

@@ -1,3 +1,4 @@
 export * from './mockFile'
 export * from './setupTest'
 export * from './runRule'
+export * from './getRuleTester.ts'