Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Chore: update document of match-component-file-name.md (#788)
Updated according to the document style of vuepress.
  • Loading branch information
ota-meshi authored and michalsnik committed Feb 3, 2019
1 parent 58d4a68 commit f46c75b
Show file tree
Hide file tree
Showing 2 changed files with 175 additions and 64 deletions.
17 changes: 14 additions & 3 deletions docs/.vuepress/components/eslint-code-block.vue
Expand Up @@ -6,8 +6,8 @@
:code="code"
:style="{ height }"
class="eslint-code-block"
filename="example.vue"
language="html"
:filename="filename"
:language="language"
:preprocess="preprocess"
:postprocess="postprocess"
dark
Expand Down Expand Up @@ -36,6 +36,14 @@ export default {
default () {
return {}
}
},
filename: {
type: String,
default: 'example.vue'
},
language: {
type: String,
default: 'html'
}
},
Expand Down Expand Up @@ -83,7 +91,10 @@ export default {
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 2019,
sourceType: 'module'
sourceType: 'module',
ecmaFeatures: {
jsx: true
}
}
}
},
Expand Down
222 changes: 161 additions & 61 deletions docs/rules/match-component-file-name.md
Expand Up @@ -25,139 +25,204 @@ This rule has some options.
}
```

By default this rule will only verify components in a file with a `.jsx`
extension.
By default this rule will only verify components in a file with a `.jsx` extension.

You can use any combination of `".jsx"`, `".vue"` and `".js"` extensions.

You can also enforce same case between the component's name and its file name.

If you are defining multiple components within the same file, this rule will be ignored.

:-1: Examples of **incorrect** code for this rule:
<eslint-code-block filename="src/MyComponent.jsx" language="javascript" :rules="{'vue/match-component-file-name': ['error']}">

```jsx
// file name: src/MyComponent.jsx
export default {
name: 'MComponent', // note the missing y
render: () {
/* ✓ GOOD */
name: 'MyComponent',
render() {
return <h1>Hello world</h1>
}
}
```

```vue
// file name: src/MyComponent.vue
// options: {extensions: ["vue"]}
<script>
export default {
name: 'MComponent',
template: '<div />'
}
</script>
```
</eslint-code-block>

```js
// file name: src/MyComponent.js
// options: {extensions: ["js"]}
new Vue({
name: 'MComponent',
template: '<div />'
})
```

```js
// file name: src/MyComponent.js
// options: {extensions: ["js"]}
Vue.component('MComponent', {
template: '<div />'
})
```
<eslint-code-block filename="src/MyComponent.jsx" language="javascript" :rules="{'vue/match-component-file-name': ['error']}">

```jsx
// file name: src/MyComponent.jsx
// options: {shouldMatchCase: true}
export default {
/* ✓ GOOD */
name: 'my-component',
render() { return <div /> }
}
```

```jsx
// file name: src/my-component.jsx
// options: {shouldMatchCase: true}
export default {
name: 'MyComponent',
render() { return <div /> }
}
```
</eslint-code-block>

:+1: Examples of **correct** code for this rule:
<eslint-code-block filename="src/MyComponent.jsx" language="javascript" :rules="{'vue/match-component-file-name': ['error']}">

```jsx
// file name: src/MyComponent.jsx
export default {
name: 'MyComponent',
render: () {
/* ✗ BAD */
name: 'MComponent', // note the missing y
render() {
return <h1>Hello world</h1>
}
}
```

</eslint-code-block>

<eslint-code-block filename="src/MyComponent.jsx" language="javascript" :rules="{'vue/match-component-file-name': ['error']}">

```jsx
// file name: src/MyComponent.jsx
// no name property defined
/* no name property defined */
export default {
render: () {
render() {
return <h1>Hello world</h1>
}
}
```

</eslint-code-block>

<eslint-code-block filename="src/MyComponent.vue" :rules="{'vue/match-component-file-name': ['error']}">

```vue
<!-- file name: src/MyComponent.vue -->
<script>
export default {
/* The default does not verify to `.vue`. */
name: 'MComponent',
template: '<div />'
}
</script>
```

</eslint-code-block>

## :wrench: Options

```json
{
"vue/match-component-file-name": ["error", {
"extensions": ["jsx"],
"shouldMatchCase": false
}]
}
```

- `"extensions": []` ... array of file extensions to be verified. Default is set to `["jsx"]`.
- `"shouldMatchCase": false` ... boolean indicating if component's name
should also match its file name case. Default is set to `false`.

### `{extensions: ["vue"]}`

<eslint-code-block filename="src/MyComponent.vue" :rules="{'vue/match-component-file-name': ['error', {extensions: ['vue']}]}">

```vue
// file name: src/MyComponent.vue
<!-- file name: src/MyComponent.vue -->
<script>
export default {
/* ✓ GOOD */
name: 'MyComponent',
template: '<div />'
}
</script>
```

</eslint-code-block>

<eslint-code-block filename="src/MyComponent.vue" :rules="{'vue/match-component-file-name': ['error', {extensions: ['vue']}]}">

```vue
<!-- file name: src/MyComponent.vue -->
<script>
export default {
/* ✗ BAD */
name: 'MComponent',
template: '<div />'
}
</script>
```

</eslint-code-block>

<eslint-code-block filename="src/MyComponent.vue" :rules="{'vue/match-component-file-name': ['error', {extensions: ['vue']}]}">

```vue
// file name: src/MyComponent.vue
<!-- file name: src/MyComponent.vue -->
<script>
/* no name property defined */
export default {
template: '<div />'
}
</script>
```

</eslint-code-block>

### `{extensions: ["js"]}`

<eslint-code-block filename="src/MyComponent.js" language="javascript" :rules="{'vue/match-component-file-name': ['error', {extensions: ['js']}]}">

```js
// file name: src/MyComponent.js
new Vue({
/* ✓ GOOD */
name: 'MyComponent',
template: '<div />'
})
```

</eslint-code-block>

<eslint-code-block filename="src/MyComponent.js" language="javascript" :rules="{'vue/match-component-file-name': ['error', {extensions: ['js']}]}">

```js
// file name: src/MyComponent.js
/* ✓ GOOD */
Vue.component('MyComponent', {
template: '<div />'
})
```

</eslint-code-block>

<eslint-code-block filename="src/MyComponent.js" language="javascript" :rules="{'vue/match-component-file-name': ['error', {extensions: ['js']}]}">

```js
// file name: src/MyComponent.js
new Vue({
/* ✗ BAD */
name: 'MComponent',
template: '<div />'
})
```

</eslint-code-block>

<eslint-code-block filename="src/MyComponent.js" language="javascript" :rules="{'vue/match-component-file-name': ['error', {extensions: ['js']}]}">

```js
// file name: src/MyComponent.js
Vue.component('MyComponent', {
/* ✗ BAD */
Vue.component('MComponent', {
template: '<div />'
})
```

</eslint-code-block>

<eslint-code-block filename="src/components.js" language="javascript" :rules="{'vue/match-component-file-name': ['error', {extensions: ['js']}]}">

```js
// file name: src/components.js
// defines multiple components, so this rule is ignored
/* defines multiple components, so this rule is ignored */
Vue.component('MyComponent', {
template: '<div />'
})
Expand All @@ -172,38 +237,73 @@ new Vue({
})
```

</eslint-code-block>

<eslint-code-block filename="src/MyComponent.js" language="javascript" :rules="{'vue/match-component-file-name': ['error', {extensions: ['js']}]}">

```js
// file name: src/MyComponent.js
/* no name property defined */
new Vue({
template: '<div />'
})
```

</eslint-code-block>

### `{shouldMatchCase: true}`

<eslint-code-block filename="src/MyComponent.jsx" language="javascript" :rules="{'vue/match-component-file-name': ['error', {shouldMatchCase: true}]}">

```jsx
// file name: src/MyComponent.jsx
// options: {shouldMatchCase: true}
export default {
/* ✓ GOOD */
name: 'MyComponent',
render() { return <div /> }
}
```

</eslint-code-block>

<eslint-code-block filename="src/my-component.jsx" language="javascript" :rules="{'vue/match-component-file-name': ['error', {shouldMatchCase: true}]}">

```jsx
// file name: src/my-component.jsx
// options: {shouldMatchCase: true}
export default {
/* ✓ GOOD */
name: 'my-component',
render() { return <div /> }
}
```

## :wrench: Options
</eslint-code-block>

```json
{
"vue/match-component-file-name": ["error", {
"extensions": ["jsx"],
"shouldMatchCase": false
}]
<eslint-code-block filename="src/MyComponent.jsx" language="javascript" :rules="{'vue/match-component-file-name': ['error', {shouldMatchCase: true}]}">

```jsx
// file name: src/MyComponent.jsx
export default {
/* ✗ BAD */
name: 'my-component',
render() { return <div /> }
}
```

- `"extensions": []` ... array of file extensions to be verified. Default is set to `["jsx"]`.
- `"shouldMatchCase": false` ... boolean indicating if component's name
should also match its file name case. Default is set to `false`.
</eslint-code-block>

<eslint-code-block filename="src/my-component.jsx" language="javascript" :rules="{'vue/match-component-file-name': ['error', {shouldMatchCase: true}]}">

```jsx
// file name: src/my-component.jsx
export default {
/* ✗ BAD */
name: 'MyComponent',
render() { return <div /> }
}
```

</eslint-code-block>

## :books: Further reading

Expand Down

0 comments on commit f46c75b

Please sign in to comment.