Add config/rules that comply with our Vue.js style guide
Our Vue.js style guide contains many dos and don'ts about writing Vue code. Rather than document these, and rely on reviewers to catch/discuss these, we should just automatically lint against them.
I'd even be in favour of removing the documentation that we implement lint rules for.
The styles we document that we could lint for include:
Name | Lintable? | Do we lint it? |
---|---|---|
Reference Naming: Use PascalCase for component definitions |
|
|
Props Naming: Avoid using DOM attribute prop names. |
|
|
Props Naming: Use kebab-case instead of camelCase to provide props in templates. |
|
|
Always use double quotes " inside templates |
|
|
Props should be declared as an object |
|
|
Required key should always be provided when declaring a prop |
|
|
Default key should be provided if the prop is not required |
|
|
data method should always be a function |
|
|
Shorthand @ is preferable over v-on |
|
|
Shorthand : is preferable over v-bind |
|
|
Shorthand # is preferable over v-slot |
|
|
Prefer self-closing component tags |
|
|
Tag order in .vue file |
|
|
Absolute vs relative paths for modules (don't import from more than two levels up) |
|
|
Use kebab-case for components in templates |
|
|
Edited by Mark Florian