Skip to content

Commit d4ab529

Browse files
committed
feat: add component naming convention rule with tests and documentation
1 parent 4177ccc commit d4ab529

File tree

10 files changed

+366
-39
lines changed

10 files changed

+366
-39
lines changed

Makefile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@PHONY: lint install test update release update-meta
1+
@PHONY: lint install test update release
22

33
install:
44
npm install

README.md

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ export default [
4747
'vue-modular/no-cross-module-imports': 'error',
4848
'vue-modular/enforce-src-structure': 'error',
4949
'vue-modular/enforce-module-exports': 'error',
50+
// Optional: Enable component naming convention
51+
// 'vue-modular/component-naming-convention': 'error',
5052
},
5153
languageOptions: {
5254
ecmaVersion: 2022,
@@ -56,32 +58,46 @@ export default [
5658
]
5759
```
5860

59-
You can also use the plugin's bundled flat configuration for convenience:
61+
You can also use the plugin's bundled configurations for convenience:
6062

6163
```js
6264
// eslint.config.js
6365
import pluginVueModular from 'eslint-plugin-vue-modular'
6466

67+
// Recommended config (core architectural rules)
6568
export default [pluginVueModular.configs['flat/recommended']]
69+
70+
// OR strict config (includes all rules, including style-related)
71+
export default [pluginVueModular.configs['flat/strict']]
6672
```
6773

68-
This will apply the recommended rules and settings for ESLint v9+ (flat config) without manually listing each rule.
74+
- **Recommended config**: Includes core architectural rules that enforce modular boundaries
75+
- **Strict config**: Includes all rules, including style-related rules like component naming conventions
6976

7077
### Legacy Config (ESLint v8 and below)
7178

7279
```js
7380
// .eslintrc.js
7481
module.exports = {
7582
plugins: ['vue-modular'],
76-
extends: ['plugin:vue-modular/recommended'],
83+
extends: [
84+
'plugin:vue-modular/recommended', // Core architectural rules
85+
// OR
86+
// 'plugin:vue-modular/strict', // All rules including style-related
87+
],
7788
rules: {
7889
'vue-modular/no-cross-feature-imports': 'error',
7990
'vue-modular/no-cross-module-imports': 'error',
8091
'vue-modular/enforce-src-structure': 'error',
92+
// Optional: Enable component naming convention
93+
// 'vue-modular/component-naming-convention': 'error',
8194
},
8295
}
8396
```
8497

98+
- **Recommended preset**: Includes core architectural rules that enforce modular boundaries
99+
- **Strict preset**: Includes all rules, including style-related rules like component naming conventions
100+
85101
## Rules
86102

87103
This plugin provides rules to enforce modular architecture boundaries in Vue.js applications.
@@ -95,6 +111,7 @@ This plugin provides rules to enforce modular architecture boundaries in Vue.js
95111
- [`vue-modular/enforce-app-structure`](./docs/rules/enforce-app-structure.md): Enforces presence of application infrastructure under `src/app`
96112
- [`vue-modular/enforce-module-exports`](./docs/rules/enforce-module-exports.md): Ensures modules expose a public API via `index.ts`/`index.js`
97113
- [`vue-modular/enforce-feature-exports`](./docs/rules/enforce-feature-exports.md): Ensures global features expose a public API via `index.ts`/`index.js`
114+
- [`vue-modular/component-naming-convention`](./docs/rules/component-naming-convention.md): Enforce consistent naming patterns for Vue components
98115

99116
For detailed documentation about rules, see the [Rules Documentation](./docs/rules.md).
100117

docs/roadmap.md

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,25 @@ This document outlines the current status and planned development of rules for e
66

77
### Implemented Rules
88

9-
| Rule | Status | Description |
10-
| --------------------------------------- | ------------ | ------------------------------------------------------------------------------------ |
11-
| `vue-modular/no-cross-feature-imports` | **Released** | Prevents direct imports from deep inside feature folders |
12-
| `vue-modular/no-cross-module-imports` | **Released** | Prevents deep imports between modules; prefer module public API |
13-
| `vue-modular/enforce-import-boundaries` | **Released** | Enforces proper import paths and module/feature boundaries across the project |
14-
| `vue-modular/enforce-src-structure` | **Released** | Enforces allowed top-level folders/files in the `src/` folder |
15-
| `vue-modular/enforce-app-structure` | **Released** | Validates `src/app` contains the expected entries (router, stores, layouts, App.vue) |
16-
| `vue-modular/enforce-module-exports` | **Released** | Ensures each `src/modules/*` exposes a public API index file |
17-
| `vue-modular/enforce-feature-exports` | **Released** | Ensures each `src/features/*` exposes a public API index file |
9+
| Rule | Status | Description |
10+
| ----------------------------------------- | ------------ | ------------------------------------------------------------------------------------ |
11+
| `vue-modular/no-cross-feature-imports` | **Released** | Prevents direct imports from deep inside feature folders |
12+
| `vue-modular/no-cross-module-imports` | **Released** | Prevents deep imports between modules; prefer module public API |
13+
| `vue-modular/enforce-import-boundaries` | **Released** | Enforces proper import paths and module/feature boundaries across the project |
14+
| `vue-modular/enforce-src-structure` | **Released** | Enforces allowed top-level folders/files in the `src/` folder |
15+
| `vue-modular/enforce-app-structure` | **Released** | Validates `src/app` contains the expected entries (router, stores, layouts, App.vue) |
16+
| `vue-modular/enforce-module-exports` | **Released** | Ensures each `src/modules/*` exposes a public API index file |
17+
| `vue-modular/enforce-feature-exports` | **Released** | Ensures each `src/features/*` exposes a public API index file |
18+
| `vue-modular/component-naming-convention` | **Released** | Enforce consistent naming patterns for Vue components |
1819

1920
---
2021

2122
## Planned Rules
2223

23-
### Module Boundary Enforcement
24-
25-
| Rule | Priority | Description | Status |
26-
| ---------------------------------- | ---------- | ----------------------------------------------------------- | ----------- |
27-
| `vue-modular/no-shared-in-modules` | **Medium** | Prevent modules from importing shared utilities incorrectly | **Planned** |
28-
2924
### Component Organization
3025

3126
| Rule | Priority | Description | Status |
3227
| ----------------------------------------- | ---------- | ----------------------------------------------------- | ----------- |
33-
| `vue-modular/component-naming-convention` | **Medium** | Enforce consistent naming patterns for components | **Planned** |
3428
| `vue-modular/no-business-logic-in-ui-kit` | **Medium** | Prevent business logic in shared/ui components | **Planned** |
3529
| `vue-modular/prefer-composition-api` | **Low** | Encourage Composition API usage in modular components | **Planned** |
3630

@@ -190,10 +184,10 @@ Rules are prioritized based on:
190184

191185
## Rule Count Summary
192186

193-
- **Released**: 7 rules (core structure & boundary enforcement)
194-
- **Total Planned Rules**: 39 remaining across categories (projected total 46)
187+
- **Released**: 8 rules (core structure & boundary enforcement + component naming)
188+
- **Total Planned Rules**: 38 remaining across categories (projected total 46)
195189
- **High Priority**: ~8 rules remaining
196-
- **Medium Priority**: ~22 rules remaining
190+
- **Medium Priority**: ~21 rules remaining
197191
- **Low Priority**: ~10 rules remaining
198192

199193
### Categories Overview
@@ -215,4 +209,4 @@ Rules are prioritized based on:
215209

216210
---
217211

218-
Last updated: August 25, 2025
212+
Last updated: August 26, 2025

docs/rules.md

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ This plugin provides rules to enforce modular architecture boundaries in Vue.js
44

55
## Available Rules
66

7-
| Rule | Description | Type | Recommended | Fixable |
8-
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------- | ----------- | ------- |
9-
| [`vue-modular/no-cross-feature-imports`](./rules/no-cross-feature-imports.md) | Prevents direct imports from deep inside feature folders | Problem |||
10-
| [`vue-modular/no-cross-module-imports`](./rules/no-cross-module-imports.md) | Prevents imports between different modules | Problem |||
11-
| [`vue-modular/enforce-src-structure`](./rules/enforce-src-structure.md) | Enforces allowed top-level folders/files in source directory | Problem |||
12-
| [`vue-modular/enforce-app-structure`](./rules/enforce-app-structure.md) | Enforces presence of application infrastructure under `src/app` | Problem |||
13-
| [`vue-modular/enforce-module-exports`](./rules/enforce-module-exports.md) | Ensures modules expose a public API via index.ts/index.js | Problem |||
14-
| [`vue-modular/enforce-feature-exports`](./rules/enforce-feature-exports.md) | Ensures global features expose a public API via index.ts/index.js | Problem |||
7+
| Rule | Description | Type | Recommended | Fixable |
8+
| ----------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ---------- | ----------- | ------- |
9+
| [`vue-modular/no-cross-feature-imports`](./rules/no-cross-feature-imports.md) | Prevents direct imports from deep inside feature folders | Problem |||
10+
| [`vue-modular/no-cross-module-imports`](./rules/no-cross-module-imports.md) | Prevents imports between different modules | Problem |||
11+
| [`vue-modular/enforce-import-boundaries`](./rules/enforce-import-boundaries.md) | Consolidated import-boundary enforcement | Problem |||
12+
| [`vue-modular/enforce-src-structure`](./rules/enforce-src-structure.md) | Enforces allowed top-level folders/files in source directory | Problem |||
13+
| [`vue-modular/enforce-app-structure`](./rules/enforce-app-structure.md) | Enforces presence of application infrastructure under `src/app` | Problem |||
14+
| [`vue-modular/enforce-module-exports`](./rules/enforce-module-exports.md) | Ensures modules expose a public API via index.ts/index.js | Problem |||
15+
| [`vue-modular/enforce-feature-exports`](./rules/enforce-feature-exports.md) | Ensures global features expose a public API via index.ts/index.js | Problem |||
16+
| [`vue-modular/component-naming-convention`](./rules/component-naming-convention.md) | Enforce consistent naming patterns for Vue components | Suggestion |||
1517

1618
## Rule Categories
1719

@@ -21,12 +23,18 @@ Rules that help maintain clean architectural boundaries in your Vue.js applicati
2123

2224
- [`vue-modular/no-cross-feature-imports`](./rules/no-cross-feature-imports.md) - Enforces that features should only be imported through their entry points
2325
- [`vue-modular/no-cross-module-imports`](./rules/no-cross-module-imports.md) - Prevents imports between different modules
24-
- [`vue-modular/enforce-src-structure`](./rules/enforce-src-structure.md) - Enforces allowed top-level folders/files in source directory
26+
- [`vue-modular/enforce-import-boundaries`](./rules/enforce-import-boundaries.md) - Consolidated import-boundary enforcement (modules/features/app/shared)
2527
- [`vue-modular/enforce-src-structure`](./rules/enforce-src-structure.md) - Enforces allowed top-level folders/files in source directory
2628
- [`vue-modular/enforce-app-structure`](./rules/enforce-app-structure.md) - Enforces presence of application infrastructure under `src/app`
2729
- [`vue-modular/enforce-module-exports`](./rules/enforce-module-exports.md) - Ensures modules expose a public API via `index.ts`/`index.js`
2830
- [`vue-modular/enforce-feature-exports`](./rules/enforce-feature-exports.md) - Ensures global features expose a public API via `index.ts`/`index.js`
2931

32+
### Component Organization
33+
34+
Rules that help maintain consistent component organization and naming:
35+
36+
- [`vue-modular/component-naming-convention`](./rules/component-naming-convention.md) - Enforce consistent naming patterns for Vue components
37+
3038
## Planned Rules
3139

3240
For a comprehensive list of planned rules and development timeline, see our [Roadmap](./roadmap.md).
Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# vue-modular/component-naming-convention
2+
3+
Enforce consistent naming patterns for Vue components.
4+
5+
## Rule Details
6+
7+
This rule enforces consistent naming conventions for Vue component `name` properties. It ensures that component names follow proper case conventions (PascalCase by default) and optionally validates that filenames match component names.
8+
9+
### Examples
10+
11+
#### ❌ Incorrect
12+
13+
```js
14+
// Component name should be PascalCase
15+
export default {
16+
name: 'user-card',
17+
}
18+
```
19+
20+
```js
21+
// Filename should match component name (if requireFileNameMatches: true)
22+
// File: src/components/user-card.js
23+
export default {
24+
name: 'UserCard',
25+
}
26+
```
27+
28+
#### ✅ Correct
29+
30+
```js
31+
// PascalCase component name
32+
export default {
33+
name: 'UserCard',
34+
}
35+
```
36+
37+
```js
38+
// Matching filename and component name
39+
// File: src/components/UserCard.js
40+
export default {
41+
name: 'UserCard',
42+
}
43+
```
44+
45+
```js
46+
// Component without explicit name (allowed by default)
47+
export default {
48+
// Component logic without name property
49+
}
50+
```
51+
52+
## Options
53+
54+
```js
55+
{
56+
"vue-modular/component-naming-convention": ["error", {
57+
"style": "PascalCase",
58+
"requireFileNameMatches": true
59+
}]
60+
}
61+
```
62+
63+
### `style` (default: `"PascalCase"`)
64+
65+
Defines the naming convention for component names:
66+
67+
- `"PascalCase"` - Component names should use PascalCase (e.g., `UserCard`, `LoginForm`)
68+
- `"kebab-case"` - Component names should use kebab-case (e.g., `user-card`, `login-form`)
69+
70+
### `requireFileNameMatches` (default: `true`)
71+
72+
When enabled, requires that the filename matches the component name exactly.
73+
74+
- `true` - Filename must match component name
75+
- `false` - No filename validation
76+
77+
## Configuration Examples
78+
79+
### Default Configuration
80+
81+
```js
82+
{
83+
"vue-modular/component-naming-convention": "error"
84+
}
85+
```
86+
87+
This enforces:
88+
89+
- PascalCase component names
90+
- Filename must match component name
91+
92+
### Custom Style
93+
94+
```js
95+
{
96+
"vue-modular/component-naming-convention": ["error", {
97+
"style": "kebab-case"
98+
}]
99+
}
100+
```
101+
102+
### Disable Filename Matching
103+
104+
```js
105+
{
106+
"vue-modular/component-naming-convention": ["error", {
107+
"requireFileNameMatches": false
108+
}]
109+
}
110+
```
111+
112+
## When Not To Use
113+
114+
- If your project uses a different naming convention that doesn't follow standard Vue.js practices
115+
- If you have legacy components that can't be easily renamed
116+
- If your build process handles component name transformations automatically
117+
118+
## Related Rules
119+
120+
- [Vue.js Style Guide - Component Name Casing](https://vuejs.org/style-guide/rules-strongly-recommended.html#component-name-casing-in-templates)
121+
- [Vue.js Style Guide - Component Names](https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names)
122+
123+
## Further Reading
124+
125+
- [Vue.js Component Naming Best Practices](https://vuejs.org/style-guide/)
126+
- [JavaScript Naming Conventions](https://www.robinwieruch.de/javascript-naming-conventions)

package-lock.json

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
},
2323
"homepage": "https://github.com/andrewmolyuk/eslint-plugin-vue-modular#readme",
2424
"scripts": {
25-
"test": "vitest"
25+
"test": "CI=CI vitest"
2626
},
2727
"devDependencies": {
2828
"eslint": "^9.34.0",
@@ -31,7 +31,7 @@
3131
"eslint-plugin-prettier": "^5.5.4",
3232
"markdownlint": "^0.38.0",
3333
"markdownlint-cli": "^0.45.0",
34-
"npm-check-updates": "^18.0.2",
34+
"npm-check-updates": "^18.0.3",
3535
"prettier": "^3.6.2",
3636
"standard-version": "^9.5.0",
3737
"vitest": "^3.2.4"

0 commit comments

Comments
 (0)