From c84cbe50185444c036dfa7e9c5102685a983693e Mon Sep 17 00:00:00 2001 From: Jesus Berdugo Date: Fri, 9 Aug 2024 19:54:57 -0500 Subject: [PATCH 1/4] feat: output explanation --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 86561787..904c97b4 100644 --- a/README.md +++ b/README.md @@ -110,6 +110,17 @@ npx vue-mess-detector analyze ./src --group=file #### With `--group=file` flag âŦ‡ī¸ ![Output Image - Group By File](./docs/public/results-per-file.png) +## Output explanation + +**Group per rule:** Here we can see a first line of blue color, this line is the rule that is being evaluated, then we will be seeing blocks of information with the following structure file, description and message. + +**Group per file:** Here it varies a little with respect to the previous one and it is that in the first line we will be able to see the path of the file that is being evaluated then we will be seeing blocks of information with the following structure rule, description, message. + +- **Rule:** Blue line that defines the ruler. +- **File:** It will show us the path to the file where the rule is evaluated. +- **Description:** A short description of what should be done, accompanied by a link to the respective documentation. +- **Message:** This message will tell you the line of code where it was detected that the rule is not met, something to keep in mind is that the yellow messages are warnings that it is advisable to follow, but the messages that are red, it is definitive that a change must be made. + ## Documentation > 👉 For more information, see the [documentation](https://vue-mess-detector.webmania.cc/). From 4638db091122282891ee5514ac498780f2132b42 Mon Sep 17 00:00:00 2001 From: Jesus Berdugo Date: Sun, 11 Aug 2024 12:59:34 -0500 Subject: [PATCH 2/4] feat: new description for the output explanation --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 904c97b4..d4086dfd 100644 --- a/README.md +++ b/README.md @@ -112,14 +112,17 @@ npx vue-mess-detector analyze ./src --group=file ## Output explanation -**Group per rule:** Here we can see a first line of blue color, this line is the rule that is being evaluated, then we will be seeing blocks of information with the following structure file, description and message. +Group by Rule: In this view, the first line is highlighted in blue, representing the rule being evaluated. Following this, you'll see blocks of information structured as follows: file path, description, and message. -**Group per file:** Here it varies a little with respect to the previous one and it is that in the first line we will be able to see the path of the file that is being evaluated then we will be seeing blocks of information with the following structure rule, description, message. +Group by File: In this view, the first line displays the file path being evaluated. Below this, you'll see blocks of information with the following structure: rule, description, and message. -- **Rule:** Blue line that defines the ruler. -- **File:** It will show us the path to the file where the rule is evaluated. -- **Description:** A short description of what should be done, accompanied by a link to the respective documentation. -- **Message:** This message will tell you the line of code where it was detected that the rule is not met, something to keep in mind is that the yellow messages are warnings that it is advisable to follow, but the messages that are red, it is definitive that a change must be made. +Rule: The blue line that defines the specific rule being evaluated. + +File: Shows the path to the file where the rule is applied. + +Description: A concise explanation of the rule, often accompanied by a link to relevant documentation for further details. + +Message: Indicates the line of code where the rule was violated. Yellow messages are warnings, suggesting best practices, while red messages highlight errors that must be corrected. ## Documentation From 22bff29da7de2211ade903df4179d9cecc462b53 Mon Sep 17 00:00:00 2001 From: Jesus Berdugo Date: Sun, 11 Aug 2024 22:44:46 -0500 Subject: [PATCH 3/4] chore: output explanation --- docs/get-started.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/get-started.md b/docs/get-started.md index e1ee6cde..6a416fe7 100644 --- a/docs/get-started.md +++ b/docs/get-started.md @@ -98,7 +98,7 @@ If you want to *group* the results by file add the `--group` flag with one of th npx vue-mess-detector analyze ./src --group=file ``` -## Example output +## 📊 Example output #### Without `--group` flag (default behavior is to group per rule) âŦ‡ī¸ ![Output Image - Group By Rule](./public/results-per-rule.png) @@ -106,6 +106,17 @@ npx vue-mess-detector analyze ./src --group=file #### With `--group=file` flag âŦ‡ī¸ ![Output Image - Group By File](./public/results-per-file.png) +## ℹī¸ Output explanation + +**Group by Rule:** In this view, the first line is highlighted in blue, representing the rule being evaluated. Following this, you'll see blocks of information structured as follows: file path, description, and message. + +**Group by File:** In this view, the first line displays the file path being evaluated. Below this, you'll see blocks of information with the following structure: rule, description, and message. + +- Rule: The blue line that defines the specific rule being evaluated. +- File: Shows the path to the file where the rule is applied. +- Description: A concise explanation of the rule, often accompanied by a link to relevant documentation for further details. +- Message: Indicates the line of code where the rule was violated. Yellow messages are warnings, suggesting best practices, while red messages highlight errors that must be corrected. + ## 📋 Rulesets There are five rulesets available in Vue Mess Detector. Each ruleset has a different purpose and level of strictness. From a0ffd518e1b4f30deaa05a1d4fb3bc3b03a65878 Mon Sep 17 00:00:00 2001 From: Jesus Berdugo Date: Sun, 11 Aug 2024 22:51:02 -0500 Subject: [PATCH 4/4] feat: add emojis for the readme --- README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index d4086dfd..130baae0 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ A static code analysis tool for detecting code smells and best practice violations in Vue.js and Nuxt.js projects. -## Contributors +## đŸ‘Ĩ Contributors @@ -23,7 +23,7 @@ A static code analysis tool for detecting code smells and best practice violatio
-## Installation +## âŦ‡ī¸ Installation ### As a vscode extension @@ -70,7 +70,7 @@ npx jsr add @rrd/vue-mess-detector --save-dev bunx jsr add @rrd/vue-mess-detector --dev ``` -## Usage +## ⚙ī¸ Usage If you want to analyze your full project directory. @@ -102,7 +102,7 @@ If you want to *group* the results by file add the `--group` flag with one of th npx vue-mess-detector analyze ./src --group=file ``` -## Example output +## 📊 Example output #### Without `--group` flag (default behavior is to group per rule) âŦ‡ī¸ ![Output Image - Group By Rule](./docs/public/results-per-rule.png) @@ -110,7 +110,7 @@ npx vue-mess-detector analyze ./src --group=file #### With `--group=file` flag âŦ‡ī¸ ![Output Image - Group By File](./docs/public/results-per-file.png) -## Output explanation +## ℹī¸ Output explanation Group by Rule: In this view, the first line is highlighted in blue, representing the rule being evaluated. Following this, you'll see blocks of information structured as follows: file path, description, and message. @@ -124,10 +124,10 @@ Description: A concise explanation of the rule, often accompanied by a link to r Message: Indicates the line of code where the rule was violated. Yellow messages are warnings, suggesting best practices, while red messages highlight errors that must be corrected. -## Documentation +## 📚 Documentation > 👉 For more information, see the [documentation](https://vue-mess-detector.webmania.cc/). -## How to contribute? +## 🤝 How to contribute? See [CONTRIBUTING.md](https://github.com/rrd108/vue-mess-detector/blob/main/CONTRIBUTING.md) file.