Skip to content

Commit 2d4a55a

Browse files
committed
Add component-definition-name-casing rule.
1 parent c6bbd95 commit 2d4a55a

5 files changed

+500
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# enforce specific casing for component definition name (vue/component-definition-name-casing)
2+
3+
- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
4+
5+
Define a style for component definition name casing for consistency purposes.
6+
7+
## :book: Rule Details
8+
9+
:+1: Examples of **correct** code for `PascalCase`:
10+
11+
```js
12+
export default {
13+
name: 'MyComponent'
14+
}
15+
```
16+
```js
17+
Vue.component('MyComponent', {
18+
19+
})
20+
```
21+
22+
:+1: Examples of **correct** code for `kebab-case`:
23+
24+
```js
25+
export default {
26+
name: 'my-component'
27+
}
28+
```
29+
```js
30+
Vue.component('my-component', {
31+
32+
})
33+
```
34+
35+
## :wrench: Options
36+
37+
Default casing is set to `PascalCase`.
38+
39+
```json
40+
{
41+
"vue/component-definition-name-casing": ["error", "PascalCase|kebab-case"]
42+
}
43+
```
44+
45+
## Related links
46+
47+
- [Style guide - Component name casing in JS/JSX](https://vuejs.org/v2/style-guide/#Component-name-casing-in-JS-JSX-strongly-recommended)

docs/rules/name-property-casing.md

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
44
- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
5+
- :warning: This rule was **deprecated** and replaced by [vue/component-definition-name-casing](component-definition-name-casing.md) rule.
56

67
Define a style for the `name` property casing for consistency purposes.
78

Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/**
2+
* @fileoverview enforce specific casing for component definition name
3+
* @author Armano
4+
*/
5+
'use strict'
6+
7+
const utils = require('../utils')
8+
const casing = require('../utils/casing')
9+
const allowedCaseOptions = ['PascalCase', 'kebab-case']
10+
11+
// ------------------------------------------------------------------------------
12+
// Rule Definition
13+
// ------------------------------------------------------------------------------
14+
15+
module.exports = {
16+
meta: {
17+
docs: {
18+
description: 'enforce specific casing for component definition name',
19+
category: undefined,
20+
url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.3/docs/rules/component-definition-name-casing.md'
21+
},
22+
fixable: 'code', // or "code" or "whitespace"
23+
schema: [
24+
{
25+
enum: allowedCaseOptions
26+
}
27+
]
28+
},
29+
30+
create (context) {
31+
const options = context.options[0]
32+
const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : 'PascalCase'
33+
34+
// ----------------------------------------------------------------------
35+
// Public
36+
// ----------------------------------------------------------------------
37+
38+
function convertName (node) {
39+
let nodeValue
40+
let range
41+
if (node.type === 'TemplateLiteral') {
42+
const quasis = node.quasis[0]
43+
nodeValue = quasis.value.cooked
44+
range = quasis.range
45+
} else {
46+
nodeValue = node.value
47+
range = node.range
48+
}
49+
50+
const value = casing.getConverter(caseType)(nodeValue)
51+
if (value !== nodeValue) {
52+
context.report({
53+
node: node,
54+
message: 'Property name "{{value}}" is not {{caseType}}.',
55+
data: {
56+
value: nodeValue,
57+
caseType: caseType
58+
},
59+
fix: fixer => fixer.replaceTextRange([range[0] + 1, range[1] - 1], value)
60+
})
61+
}
62+
}
63+
64+
function canConvert (node) {
65+
return node.type === 'Literal' || (
66+
node.type === 'TemplateLiteral' &&
67+
node.expressions.length === 0 &&
68+
node.quasis.length === 1
69+
)
70+
}
71+
72+
return Object.assign({},
73+
{
74+
"CallExpression > MemberExpression > Identifier[name='component']" (node) {
75+
const parent = node.parent.parent
76+
const calleeObject = utils.unwrapTypes(parent.callee.object)
77+
78+
if (calleeObject.type === 'Identifier' && calleeObject.name === 'Vue') {
79+
if (parent.arguments && parent.arguments.length === 2) {
80+
const argument = parent.arguments[0]
81+
if (canConvert(argument)) {
82+
convertName(argument)
83+
}
84+
}
85+
}
86+
}
87+
},
88+
utils.executeOnVue(context, (obj) => {
89+
const node = obj.properties
90+
.find(item => (
91+
item.type === 'Property' &&
92+
item.key.name === 'name' &&
93+
canConvert(item.value)
94+
))
95+
96+
if (!node) return
97+
convertName(node.value)
98+
})
99+
)
100+
}
101+
}

lib/rules/name-property-casing.js

+2
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ module.exports = {
2020
category: 'strongly-recommended',
2121
url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.5/docs/rules/name-property-casing.md'
2222
},
23+
deprecated: true,
24+
replacedBy: ['component-definition-name-casing'],
2325
fixable: 'code', // or "code" or "whitespace"
2426
schema: [
2527
{

0 commit comments

Comments
 (0)