Skip to content

Commit 105dce4

Browse files
committed
Merge commit 'f46c75b391422a651711fe67aac60963faf39406' into issue768
# Conflicts: # tests/lib/rules/no-unused-components.js
2 parents 01a3e51 + f46c75b commit 105dce4

20 files changed

+923
-89
lines changed

docs/.vuepress/components/eslint-code-block.vue

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
:code="code"
77
:style="{ height }"
88
class="eslint-code-block"
9-
filename="example.vue"
10-
language="html"
9+
:filename="filename"
10+
:language="language"
1111
:preprocess="preprocess"
1212
:postprocess="postprocess"
1313
dark
@@ -36,6 +36,14 @@ export default {
3636
default () {
3737
return {}
3838
}
39+
},
40+
filename: {
41+
type: String,
42+
default: 'example.vue'
43+
},
44+
language: {
45+
type: String,
46+
default: 'html'
3947
}
4048
},
4149
@@ -83,7 +91,10 @@ export default {
8391
parser: 'vue-eslint-parser',
8492
parserOptions: {
8593
ecmaVersion: 2019,
86-
sourceType: 'module'
94+
sourceType: 'module',
95+
ecmaFeatures: {
96+
jsx: true
97+
}
8798
}
8899
}
89100
},

docs/rules/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,12 +149,14 @@ For example:
149149
| [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` | :wrench: |
150150
| [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties | :wrench: |
151151
| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name | |
152+
| [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
152153
| [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax | |
153154
| [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces | :wrench: |
154155
| [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported | |
155156
| [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: |
156157
| [vue/space-infix-ops](./space-infix-ops.md) | require spacing around infix operators | :wrench: |
157158
| [vue/space-unary-ops](./space-unary-ops.md) | enforce consistent spacing before or after unary operators | :wrench: |
159+
| [vue/v-on-function-call](./v-on-function-call.md) | enforce or forbid parentheses after method calls without arguments in `v-on` directives | :wrench: |
158160

159161
## Deprecated
160162

docs/rules/match-component-file-name.md

Lines changed: 161 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -25,139 +25,204 @@ This rule has some options.
2525
}
2626
```
2727

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.
3029

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

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

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

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']}">
3837

3938
```jsx
4039
// file name: src/MyComponent.jsx
4140
export default {
42-
name: 'MComponent', // note the missing y
43-
render: () {
41+
/* ✓ GOOD */
42+
name: 'MyComponent',
43+
render() {
4444
return <h1>Hello world</h1>
4545
}
4646
}
4747
```
4848

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>
5950

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']}">
7652

7753
```jsx
7854
// file name: src/MyComponent.jsx
79-
// options: {shouldMatchCase: true}
8055
export default {
56+
/* ✓ GOOD */
8157
name: 'my-component',
8258
render() { return <div /> }
8359
}
8460
```
8561

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>
9463

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']}">
9665

9766
```jsx
9867
// file name: src/MyComponent.jsx
9968
export default {
100-
name: 'MyComponent',
101-
render: () {
69+
/* ✗ BAD */
70+
name: 'MComponent', // note the missing y
71+
render() {
10272
return <h1>Hello world</h1>
10373
}
10474
}
10575
```
10676

77+
</eslint-code-block>
78+
79+
<eslint-code-block filename="src/MyComponent.jsx" language="javascript" :rules="{'vue/match-component-file-name': ['error']}">
80+
10781
```jsx
10882
// file name: src/MyComponent.jsx
109-
// no name property defined
83+
/* no name property defined */
11084
export default {
111-
render: () {
85+
render() {
11286
return <h1>Hello world</h1>
11387
}
11488
}
11589
```
11690

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+
117127
```vue
118-
// file name: src/MyComponent.vue
128+
<!-- file name: src/MyComponent.vue -->
119129
<script>
120130
export default {
131+
/* ✓ GOOD */
121132
name: 'MyComponent',
122133
template: '<div />'
123134
}
124135
</script>
125136
```
126137

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+
127157
```vue
128-
// file name: src/MyComponent.vue
158+
<!-- file name: src/MyComponent.vue -->
129159
<script>
160+
/* no name property defined */
130161
export default {
131162
template: '<div />'
132163
}
133164
</script>
134165
```
135166

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+
136173
```js
137174
// file name: src/MyComponent.js
138175
new Vue({
176+
/* ✓ GOOD */
139177
name: 'MyComponent',
140178
template: '<div />'
141179
})
142180
```
143181

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+
144198
```js
145199
// file name: src/MyComponent.js
146200
new Vue({
201+
/* ✗ BAD */
202+
name: 'MComponent',
147203
template: '<div />'
148204
})
149205
```
150206

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+
151211
```js
152212
// file name: src/MyComponent.js
153-
Vue.component('MyComponent', {
213+
/* ✗ BAD */
214+
Vue.component('MComponent', {
154215
template: '<div />'
155216
})
156217
```
157218

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+
158223
```js
159224
// file name: src/components.js
160-
// defines multiple components, so this rule is ignored
225+
/* defines multiple components, so this rule is ignored */
161226
Vue.component('MyComponent', {
162227
template: '<div />'
163228
})
@@ -172,38 +237,73 @@ new Vue({
172237
})
173238
```
174239

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+
175258
```jsx
176259
// file name: src/MyComponent.jsx
177-
// options: {shouldMatchCase: true}
178260
export default {
261+
/* ✓ GOOD */
179262
name: 'MyComponent',
180263
render() { return <div /> }
181264
}
182265
```
183266

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+
184271
```jsx
185272
// file name: src/my-component.jsx
186-
// options: {shouldMatchCase: true}
187273
export default {
274+
/* ✓ GOOD */
188275
name: 'my-component',
189276
render() { return <div /> }
190277
}
191278
```
192279

193-
## :wrench: Options
280+
</eslint-code-block>
194281

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 /> }
201290
}
202291
```
203292

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>
207307

208308
## :books: Further reading
209309

0 commit comments

Comments
 (0)