diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
index 13d824a52..ab33abdf1 100644
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ b/docs/.vuepress/components/eslint-code-block.vue
@@ -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
@@ -36,6 +36,14 @@ export default {
       default () {
         return {}
       }
+    },
+    filename: {
+      type: String,
+      default: 'example.vue'
+    },
+    language: {
+      type: String,
+      default: 'html'
     }
   },
 
@@ -83,7 +91,10 @@ export default {
         parser: 'vue-eslint-parser',
         parserOptions: {
           ecmaVersion: 2019,
-          sourceType: 'module'
+          sourceType: 'module',
+          ecmaFeatures: {
+            jsx: true
+          }
         }
       }
     },
diff --git a/docs/rules/match-component-file-name.md b/docs/rules/match-component-file-name.md
index 963295fe9..961937b19 100644
--- a/docs/rules/match-component-file-name.md
+++ b/docs/rules/match-component-file-name.md
@@ -25,8 +25,7 @@ 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.
 
@@ -34,130 +33,196 @@ 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 />'
 })
@@ -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