@@ -9,35 +9,54 @@ This rule would enforce proper casing of props in vue components(camelCase).
99
1010(https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended ).
1111
12- : +1 : Examples of ** correct ** code for ` camelCase ` :
13- 14- ``` js
12+ < eslint- code-block :rules = " {'vue/prop-name-casing': ['error']} " >
13+ ```
14+ <script>
1515export default {
1616 props: {
17- greetingText: String
17+ /* ✓ GOOD */
18+ greetingText: String,
19+
20+ /* ✗ BAD */
21+ 'greeting-text': String,
22+ greeting_text: String
1823 }
1924}
25+ </script>
2026```
27+ </eslint-code-block >
2128
22- : -1 : Examples of ** incorrect ** code for ` camelCase ` :
29+ ## : wrench : Options
2330
24- ``` js
25- export default {
26- props: {
27- ' greeting-text' : String
28- }
31+ ```
32+ {
33+ "vue/prop-name-casing": ["error", "camelCase" | "snake_case"]
2934}
3035```
3136
32- ## :wrench : Options
37+ - ` "camelCase" ` (default) ... Enforce property names in ` props ` to camel case.
38+ - ` "snake_case" ` ... Enforce property names in ` props ` to snake case.
3339
34- Default casing is set to ` camelCase ` .
40+ ### ` "snake_case" `
3541
42+ <eslint-code-block :rules =" {'vue/prop-name-casing': ['error', 'snake_case']} " >
3643```
37- "vue/prop-name-casing": ["error", "camelCase|snake_case"]
44+ <script>
45+ export default {
46+ props: {
47+ /* ✓ GOOD */
48+ greeting_text: String,
49+
50+ /* ✗ BAD */
51+ 'greeting-text': String,
52+ greetingText: String
53+ }
54+ }
55+ </script>
3856```
57+ </eslint-code-block >
3958
40- ## Related links
59+ ## : books : Further reading
4160
4261- [ Style guide - Prop name casing] ( https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended )
4362
0 commit comments