Skip to content

Commit

Permalink
⭐️New: Add component-definition-name-casing rule. vuejs#256
Browse files Browse the repository at this point in the history
this rule replaces `name-property-casing`
fix issue: vuejs#251
  • Loading branch information
armano2 committed Nov 11, 2018
1 parent 501a409 commit 5ed9a17
Show file tree
Hide file tree
Showing 5 changed files with 392 additions and 0 deletions.
47 changes: 47 additions & 0 deletions docs/rules/component-definition-name-casing.md
@@ -0,0 +1,47 @@
# enforce specific casing for component definition name (vue/component-definition-name-casing)

- :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.

Define a style for component definition name casing for consistency purposes.

## :book: Rule Details

:+1: Examples of **correct** code for `PascalCase`:

```js
export default {
name: 'MyComponent'
}
```
```js
Vue.component('MyComponent', {

})
```

:+1: Examples of **correct** code for `kebab-case`:

```js
export default {
name: 'my-component'
}
```
```js
Vue.component('my-component', {

})
```

## :wrench: Options

Default casing is set to `PascalCase`.

```json
{
"vue/component-definition-name-casing": ["error", "PascalCase|kebab-case"]
}
```

## Related links

- [Style guide - Component name casing in JS/JSX](https://vuejs.org/v2/style-guide/#Component-name-casing-in-JS-JSX-strongly-recommended)
1 change: 1 addition & 0 deletions docs/rules/name-property-casing.md
Expand Up @@ -2,6 +2,7 @@

- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
- :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.
- :warning: This rule was **deprecated** and replaced by [vue/component-definition-name-casing](component-definition-name-casing.md) rule.

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

Expand Down
72 changes: 72 additions & 0 deletions lib/rules/component-definition-name-casing.js
@@ -0,0 +1,72 @@
/**
* @fileoverview enforce specific casing for component definition name
* @author Armano
*/
'use strict'

const utils = require('../utils')
const casing = require('../utils/casing')
const allowedCaseOptions = ['PascalCase', 'kebab-case']

// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------

module.exports = {
meta: {
docs: {
description: 'enforce specific casing for component definition name',
category: undefined,
url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.3/docs/rules/component-definition-name-casing.md'
},
fixable: 'code', // or "code" or "whitespace"
schema: [
{
enum: allowedCaseOptions
}
]
},

create (context) {
const options = context.options[0]
const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : 'PascalCase'

// ----------------------------------------------------------------------
// Public
// ----------------------------------------------------------------------

function convertName (node) {
const value = casing.getConverter(caseType)(node.value)
if (value !== node.value) {
context.report({
node: node,
message: 'Property name "{{value}}" is not {{caseType}}.',
data: {
value: node.value,
caseType: caseType
},
fix: fixer => fixer.replaceText(node, node.raw.replace(node.value, value))
})
}
}

return utils.executeOnVue(context, (obj) => {
if (obj.parent && obj.parent.type === 'CallExpression' && obj.parent.arguments && obj.parent.arguments.length === 2) {
const argument = obj.parent.arguments[0]
if (argument.type === 'Literal') {
convertName(argument)
}
}

const node = obj.properties
.find(item => (
item.type === 'Property' &&
item.key.name === 'name' &&
item.value.type === 'Literal'
))

if (!node) return
convertName(node.value)
})
}
}
2 changes: 2 additions & 0 deletions lib/rules/name-property-casing.js
Expand Up @@ -19,6 +19,8 @@ module.exports = {
category: 'strongly-recommended',
url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.3/docs/rules/name-property-casing.md'
},
deprecated: true,
replacedBy: ['component-definition-name-casing'],
fixable: 'code', // or "code" or "whitespace"
schema: [
{
Expand Down

0 comments on commit 5ed9a17

Please sign in to comment.