@@ -25,139 +25,204 @@ This rule has some options.
25
25
}
26
26
```
27
27
28
- By default this rule will only verify components in a file with a ` .jsx `
29
- extension.
28
+ By default this rule will only verify components in a file with a ` .jsx ` extension.
30
29
31
30
You can use any combination of ` ".jsx" ` , ` ".vue" ` and ` ".js" ` extensions.
32
31
33
32
You can also enforce same case between the component's name and its file name.
34
33
35
34
If you are defining multiple components within the same file, this rule will be ignored.
36
35
37
- : -1 : Examples of ** incorrect ** code for this rule:
36
+ < eslint- code-block filename = " src/MyComponent.jsx " language = " javascript " :rules = " {'vue/match-component-file-name': ['error']} " >
38
37
39
38
``` jsx
40
39
// file name: src/MyComponent.jsx
41
40
export default {
42
- name: ' MComponent' , // note the missing y
43
- render: () {
41
+ /* ✓ GOOD */
42
+ name: ' MyComponent' ,
43
+ render () {
44
44
return < h1> Hello world< / h1>
45
45
}
46
46
}
47
47
```
48
48
49
- ``` vue
50
- // file name: src/MyComponent.vue
51
- // options: {extensions: ["vue"]}
52
- <script>
53
- export default {
54
- name: 'MComponent',
55
- template: '<div />'
56
- }
57
- </script>
58
- ```
49
+ </eslint-code-block >
59
50
60
- ``` js
61
- // file name: src/MyComponent.js
62
- // options: {extensions: ["js"]}
63
- new Vue ({
64
- name: ' MComponent' ,
65
- template: ' <div />'
66
- })
67
- ```
68
-
69
- ``` js
70
- // file name: src/MyComponent.js
71
- // options: {extensions: ["js"]}
72
- Vue .component (' MComponent' , {
73
- template: ' <div />'
74
- })
75
- ```
51
+ <eslint-code-block filename =" src/MyComponent.jsx " language =" javascript " :rules =" {'vue/match-component-file-name': ['error']} " >
76
52
77
53
``` jsx
78
54
// file name: src/MyComponent.jsx
79
- // options: {shouldMatchCase: true}
80
55
export default {
56
+ /* ✓ GOOD */
81
57
name: ' my-component' ,
82
58
render () { return < div / > }
83
59
}
84
60
```
85
61
86
- ``` jsx
87
- // file name: src/my-component.jsx
88
- // options: {shouldMatchCase: true}
89
- export default {
90
- name: ' MyComponent' ,
91
- render () { return < div / > }
92
- }
93
- ```
62
+ </eslint-code-block >
94
63
95
- : +1 : Examples of ** correct ** code for this rule:
64
+ < eslint- code-block filename = " src/MyComponent.jsx " language = " javascript " :rules = " {'vue/match-component-file-name': ['error']} " >
96
65
97
66
``` jsx
98
67
// file name: src/MyComponent.jsx
99
68
export default {
100
- name: ' MyComponent' ,
101
- render: () {
69
+ /* ✗ BAD */
70
+ name: ' MComponent' , // note the missing y
71
+ render () {
102
72
return < h1> Hello world< / h1>
103
73
}
104
74
}
105
75
```
106
76
77
+ </eslint-code-block >
78
+
79
+ <eslint-code-block filename =" src/MyComponent.jsx " language =" javascript " :rules =" {'vue/match-component-file-name': ['error']} " >
80
+
107
81
``` jsx
108
82
// file name: src/MyComponent.jsx
109
- // no name property defined
83
+ /* no name property defined */
110
84
export default {
111
- render: () {
85
+ render () {
112
86
return < h1> Hello world< / h1>
113
87
}
114
88
}
115
89
```
116
90
91
+ </eslint-code-block >
92
+
93
+ <eslint-code-block filename =" src/MyComponent.vue " :rules =" {'vue/match-component-file-name': ['error']} " >
94
+
95
+ ``` vue
96
+ <!-- file name: src/MyComponent.vue -->
97
+ <script>
98
+ export default {
99
+ /* The default does not verify to `.vue`. */
100
+ name: 'MComponent',
101
+ template: '<div />'
102
+ }
103
+ </script>
104
+ ```
105
+
106
+ </eslint-code-block >
107
+
108
+ ## :wrench : Options
109
+
110
+ ``` json
111
+ {
112
+ "vue/match-component-file-name" : [" error" , {
113
+ "extensions" : [" jsx" ],
114
+ "shouldMatchCase" : false
115
+ }]
116
+ }
117
+ ```
118
+
119
+ - ` "extensions": [] ` ... array of file extensions to be verified. Default is set to ` ["jsx"] ` .
120
+ - ` "shouldMatchCase": false ` ... boolean indicating if component's name
121
+ should also match its file name case. Default is set to ` false ` .
122
+
123
+ ### ` {extensions: ["vue"]} `
124
+
125
+ <eslint-code-block filename =" src/MyComponent.vue " :rules =" {'vue/match-component-file-name': ['error', {extensions: ['vue']}]} " >
126
+
117
127
``` vue
118
- // file name: src/MyComponent.vue
128
+ <!-- file name: src/MyComponent.vue -->
119
129
<script>
120
130
export default {
131
+ /* ✓ GOOD */
121
132
name: 'MyComponent',
122
133
template: '<div />'
123
134
}
124
135
</script>
125
136
```
126
137
138
+ </eslint-code-block >
139
+
140
+ <eslint-code-block filename =" src/MyComponent.vue " :rules =" {'vue/match-component-file-name': ['error', {extensions: ['vue']}]} " >
141
+
142
+ ``` vue
143
+ <!-- file name: src/MyComponent.vue -->
144
+ <script>
145
+ export default {
146
+ /* ✗ BAD */
147
+ name: 'MComponent',
148
+ template: '<div />'
149
+ }
150
+ </script>
151
+ ```
152
+
153
+ </eslint-code-block >
154
+
155
+ <eslint-code-block filename =" src/MyComponent.vue " :rules =" {'vue/match-component-file-name': ['error', {extensions: ['vue']}]} " >
156
+
127
157
``` vue
128
- // file name: src/MyComponent.vue
158
+ <!-- file name: src/MyComponent.vue -->
129
159
<script>
160
+ /* no name property defined */
130
161
export default {
131
162
template: '<div />'
132
163
}
133
164
</script>
134
165
```
135
166
167
+ </eslint-code-block >
168
+
169
+ ### ` {extensions: ["js"]} `
170
+
171
+ <eslint-code-block filename =" src/MyComponent.js " language =" javascript " :rules =" {'vue/match-component-file-name': ['error', {extensions: ['js']}]} " >
172
+
136
173
``` js
137
174
// file name: src/MyComponent.js
138
175
new Vue ({
176
+ /* ✓ GOOD */
139
177
name: ' MyComponent' ,
140
178
template: ' <div />'
141
179
})
142
180
```
143
181
182
+ </eslint-code-block >
183
+
184
+ <eslint-code-block filename =" src/MyComponent.js " language =" javascript " :rules =" {'vue/match-component-file-name': ['error', {extensions: ['js']}]} " >
185
+
186
+ ``` js
187
+ // file name: src/MyComponent.js
188
+ /* ✓ GOOD */
189
+ Vue .component (' MyComponent' , {
190
+ template: ' <div />'
191
+ })
192
+ ```
193
+
194
+ </eslint-code-block >
195
+
196
+ <eslint-code-block filename =" src/MyComponent.js " language =" javascript " :rules =" {'vue/match-component-file-name': ['error', {extensions: ['js']}]} " >
197
+
144
198
``` js
145
199
// file name: src/MyComponent.js
146
200
new Vue ({
201
+ /* ✗ BAD */
202
+ name: ' MComponent' ,
147
203
template: ' <div />'
148
204
})
149
205
```
150
206
207
+ </eslint-code-block >
208
+
209
+ <eslint-code-block filename =" src/MyComponent.js " language =" javascript " :rules =" {'vue/match-component-file-name': ['error', {extensions: ['js']}]} " >
210
+
151
211
``` js
152
212
// file name: src/MyComponent.js
153
- Vue .component (' MyComponent' , {
213
+ /* ✗ BAD */
214
+ Vue .component (' MComponent' , {
154
215
template: ' <div />'
155
216
})
156
217
```
157
218
219
+ </eslint-code-block >
220
+
221
+ <eslint-code-block filename =" src/components.js " language =" javascript " :rules =" {'vue/match-component-file-name': ['error', {extensions: ['js']}]} " >
222
+
158
223
``` js
159
224
// file name: src/components.js
160
- // defines multiple components, so this rule is ignored
225
+ /* defines multiple components, so this rule is ignored */
161
226
Vue .component (' MyComponent' , {
162
227
template: ' <div />'
163
228
})
@@ -172,38 +237,73 @@ new Vue({
172
237
})
173
238
```
174
239
240
+ </eslint-code-block >
241
+
242
+ <eslint-code-block filename =" src/MyComponent.js " language =" javascript " :rules =" {'vue/match-component-file-name': ['error', {extensions: ['js']}]} " >
243
+
244
+ ``` js
245
+ // file name: src/MyComponent.js
246
+ /* no name property defined */
247
+ new Vue ({
248
+ template: ' <div />'
249
+ })
250
+ ```
251
+
252
+ </eslint-code-block >
253
+
254
+ ### ` {shouldMatchCase: true} `
255
+
256
+ <eslint-code-block filename =" src/MyComponent.jsx " language =" javascript " :rules =" {'vue/match-component-file-name': ['error', {shouldMatchCase: true}]} " >
257
+
175
258
``` jsx
176
259
// file name: src/MyComponent.jsx
177
- // options: {shouldMatchCase: true}
178
260
export default {
261
+ /* ✓ GOOD */
179
262
name: ' MyComponent' ,
180
263
render () { return < div / > }
181
264
}
182
265
```
183
266
267
+ </eslint-code-block >
268
+
269
+ <eslint-code-block filename =" src/my-component.jsx " language =" javascript " :rules =" {'vue/match-component-file-name': ['error', {shouldMatchCase: true}]} " >
270
+
184
271
``` jsx
185
272
// file name: src/my-component.jsx
186
- // options: {shouldMatchCase: true}
187
273
export default {
274
+ /* ✓ GOOD */
188
275
name: ' my-component' ,
189
276
render () { return < div / > }
190
277
}
191
278
```
192
279
193
- ## : wrench : Options
280
+ </ eslint-code-block >
194
281
195
- ``` json
196
- {
197
- "vue/match-component-file-name" : [" error" , {
198
- "extensions" : [" jsx" ],
199
- "shouldMatchCase" : false
200
- }]
282
+ <eslint-code-block filename =" src/MyComponent.jsx " language =" javascript " :rules =" {'vue/match-component-file-name': ['error', {shouldMatchCase: true}]} " >
283
+
284
+ ``` jsx
285
+ // file name: src/MyComponent.jsx
286
+ export default {
287
+ /* ✗ BAD */
288
+ name: ' my-component' ,
289
+ render () { return < div / > }
201
290
}
202
291
```
203
292
204
- - ` "extensions": [] ` ... array of file extensions to be verified. Default is set to ` ["jsx"] ` .
205
- - ` "shouldMatchCase": false ` ... boolean indicating if component's name
206
- should also match its file name case. Default is set to ` false ` .
293
+ </eslint-code-block >
294
+
295
+ <eslint-code-block filename =" src/my-component.jsx " language =" javascript " :rules =" {'vue/match-component-file-name': ['error', {shouldMatchCase: true}]} " >
296
+
297
+ ``` jsx
298
+ // file name: src/my-component.jsx
299
+ export default {
300
+ /* ✗ BAD */
301
+ name: ' MyComponent' ,
302
+ render () { return < div / > }
303
+ }
304
+ ```
305
+
306
+ </eslint-code-block >
207
307
208
308
## :books : Further reading
209
309
0 commit comments