Skip to content

Commit

Permalink
Add component-definition-name-casing rule.
Browse files Browse the repository at this point in the history
  • Loading branch information
armano2 committed Nov 24, 2018
1 parent c6bbd95 commit c771234
Show file tree
Hide file tree
Showing 5 changed files with 501 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
102 changes: 102 additions & 0 deletions lib/rules/component-definition-name-casing.js
@@ -0,0 +1,102 @@
/**
* @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: {
type: 'suggestion',
docs: {
description: 'enforce specific casing for component definition name',
category: undefined,
url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.5/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) {
let nodeValue
let range
if (node.type === 'TemplateLiteral') {
const quasis = node.quasis[0]
nodeValue = quasis.value.cooked
range = quasis.range
} else {
nodeValue = node.value
range = node.range
}

const value = casing.getConverter(caseType)(nodeValue)
if (value !== nodeValue) {
context.report({
node: node,
message: 'Property name "{{value}}" is not {{caseType}}.',
data: {
value: nodeValue,
caseType: caseType
},
fix: fixer => fixer.replaceTextRange([range[0] + 1, range[1] - 1], value)
})
}
}

function canConvert (node) {
return node.type === 'Literal' || (
node.type === 'TemplateLiteral' &&
node.expressions.length === 0 &&
node.quasis.length === 1
)
}

return Object.assign({},
{
"CallExpression > MemberExpression > Identifier[name='component']" (node) {
const parent = node.parent.parent
const calleeObject = utils.unwrapTypes(parent.callee.object)

if (calleeObject.type === 'Identifier' && calleeObject.name === 'Vue') {
if (parent.arguments && parent.arguments.length === 2) {
const argument = parent.arguments[0]
if (canConvert(argument)) {
convertName(argument)
}
}
}
}
},
utils.executeOnVue(context, (obj) => {
const node = obj.properties
.find(item => (
item.type === 'Property' &&
item.key.name === 'name' &&
canConvert(item.value)
))

if (!node) return
convertName(node.value)
})
)
}
}
2 changes: 2 additions & 0 deletions lib/rules/name-property-casing.js
Expand Up @@ -20,6 +20,8 @@ module.exports = {
category: 'strongly-recommended',
url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.5/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 c771234

Please sign in to comment.