From 851a8b580b9795a8e654cff0cf4dfb4afb40fd73 Mon Sep 17 00:00:00 2001 From: rrd108 Date: Tue, 6 Aug 2024 17:13:36 +0200 Subject: [PATCH] doc add description to vue-essential rules --- docs/rules/vue-essential/global-style.md | 7 +++++++ docs/rules/vue-essential/simple-prop.md | 4 ++++ docs/rules/vue-essential/single-name-component.md | 5 +++++ docs/rules/vue-essential/vfor-no-key.md | 4 ++++ docs/rules/vue-essential/vif-with-vfor.md | 5 +++++ 5 files changed, 25 insertions(+) diff --git a/docs/rules/vue-essential/global-style.md b/docs/rules/vue-essential/global-style.md index 6902608d..e92ba328 100644 --- a/docs/rules/vue-essential/global-style.md +++ b/docs/rules/vue-essential/global-style.md @@ -2,3 +2,10 @@ Checks if the component is using global styles instead of `scoped` styles.   
👉 https://vuejs.org/style-guide/rules-essential.html#use-component-scoped-styling + +## ❓ Why it's good to follow this rule? + +- **Maintainability** limiting the `css` for the actual component makes it easier to maintain and understand. +- **Isolation** the component is isolated and has no unwanted effect on the other parts of the application. +- **Reusability** the component can be reused in other parts of the application with exactly the same look and feel. + diff --git a/docs/rules/vue-essential/simple-prop.md b/docs/rules/vue-essential/simple-prop.md index bc1d5195..204b52dc 100644 --- a/docs/rules/vue-essential/simple-prop.md +++ b/docs/rules/vue-essential/simple-prop.md @@ -2,3 +2,7 @@ Checks if the component is using simple props definitions.   
👉 https://vuejs.org/style-guide/rules-essential.html#use-detailed-prop-definitions + +## ❓ Why it's good to follow this rule? + +- **Readability** the component is easier to understand in details. diff --git a/docs/rules/vue-essential/single-name-component.md b/docs/rules/vue-essential/single-name-component.md index 2386bd6c..55585f40 100644 --- a/docs/rules/vue-essential/single-name-component.md +++ b/docs/rules/vue-essential/single-name-component.md @@ -2,3 +2,8 @@ Checks if the component name is a single word.   
👉 https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names + +## ❓ Why it's good to follow this rule? + +- **Consistency** the component name is consistent with the other components. +- **Readability** the component name is more descriptive about its goal. diff --git a/docs/rules/vue-essential/vfor-no-key.md b/docs/rules/vue-essential/vfor-no-key.md index 1d8eeb30..ede60937 100644 --- a/docs/rules/vue-essential/vfor-no-key.md +++ b/docs/rules/vue-essential/vfor-no-key.md @@ -3,3 +3,7 @@ Checks if the component is using `v-for` without a `key` property.   
👉 https://vuejs.org/style-guide/rules-essential.html#use-keyed-v-for +## ❓ Why it's good to follow this rule? + +- **Performance** adding a `key` property to the `v-for` loop helps Vue to identify the elements and update only the changed elements. +- In certain situations a missing `key` property can lead to unexpected behavior. diff --git a/docs/rules/vue-essential/vif-with-vfor.md b/docs/rules/vue-essential/vif-with-vfor.md index 0d35e8b5..8026ba7e 100644 --- a/docs/rules/vue-essential/vif-with-vfor.md +++ b/docs/rules/vue-essential/vif-with-vfor.md @@ -2,3 +2,8 @@ Checks if the component is using `v-if` with `v-for`.   
👉 https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for + +## ❓ Why it's good to follow this rule? + +- **Performance** using `v-if` with `v-for` can lead to performance issues. +- **Readability** the component is easier to understand and maintain.