Skip to content

Latest commit

 

History

History
322 lines (243 loc) · 7.52 KB

match-component-file-name.md

File metadata and controls

322 lines (243 loc) · 7.52 KB
Raw
pageClass sidebarDepth title description since
rule-details
0
vue/match-component-file-name
require component name property to match its file name
v5.2.0

vue/match-component-file-name

require component name property to match its file name

  • 💡 Some problems reported by this rule are manually fixable by editor suggestions.

This rule reports if a component name property does not match its file name.

You can define an array of file extensions this rule should verify for the component's name.

📖 Rule Details

This rule has some options.

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

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

You can use any combination of ".js", ".jsx", ".ts", ".tsx", and ".vue" 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.

// file name: src/MyComponent.jsx
export default {
  /* ✓ GOOD */
  name: 'MyComponent',
  render() {
    return <h1>Hello world</h1>
  }
}
// file name: src/MyComponent.jsx
export default {
  /* ✓ GOOD */
  name: 'my-component',
  render() { return <div /> }
}
// file name: src/MyComponent.jsx
export default {
  /* ✗ BAD */
  name: 'MComponent', // note the missing y
  render() {
    return <h1>Hello world</h1>
  }
}
// file name: src/MyComponent.jsx
/* no name property defined */
export default {
  render() {
    return <h1>Hello world</h1>
  }
}
<!-- file name: src/MyComponent.vue -->
<script>
  export default {
    /* The default does not verify to `.vue`. */
    name: 'MComponent',
    template: '<div />'
  }
</script>

🔧 Options

{
  "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"]}

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

{extensions: ["js"]}

// file name: src/MyComponent.js
new Vue({
  /* ✓ GOOD */
  name: 'MyComponent',
  template: '<div />'
})
// file name: src/MyComponent.js
/* ✓ GOOD */
Vue.component('MyComponent', {
  template: '<div />'
})
// file name: src/MyComponent.js
new Vue({
  /* ✗ BAD */
  name: 'MComponent',
  template: '<div />'
})
// file name: src/MyComponent.js
/* ✗ BAD */
Vue.component('MComponent', {
  template: '<div />'
})
// file name: src/components.js
/* defines multiple components, so this rule is ignored */
Vue.component('MyComponent', {
  template: '<div />'
})

Vue.component('OtherComponent', {
  template: '<div />'
})

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

{shouldMatchCase: true}

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

📚 Further Reading

🚀 Version

This rule was introduced in eslint-plugin-vue v5.2.0

🔍 Implementation