Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

⭐️New: Add component-definition-name-casing rule. #646

Merged
merged 1 commit into from Dec 26, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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', {

})
```

armano2 marked this conversation as resolved.
Show resolved Hide resolved
:+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