{"_id":"@brenoepic/vue-mess-detector","name":"@brenoepic/vue-mess-detector","dist-tags":{"latest":"0.43.0"},"versions":{"0.43.0":{"name":"@brenoepic/vue-mess-detector","type":"module","version":"0.43.0","packageManager":"yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72","description":"A static code analysis tool for detecting code smells and best practice violations in Vue.js and Nuxt.js projects","author":{"name":"rrd"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/rrd108/vue-mess-detector.git"},"keywords":["nuxt","vue","code","quality","analyzis","static code analizis","code quality","code smell","cli"],"main":"dist/vue-mess-detector.es.js","bin":{"vue-mess-detector":"dist/cli.js"},"scripts":{"build":"vite build && cp ./src/cli.js ./dist/","analyze":"node ./dist/cli.js analyze","test":"vitest run","lint":"eslint .","lint:fix":"eslint . --fix","docs:dev":"vitepress dev docs","docs:missing":"node ./docs/missingDocs.js","rules:generate":"node ./src/generator/createRule.js","rules:missing":"node ./src/missingRules.js","docs:generate":"node ./src/generator/createDoc.js","docs:build":"vitepress build docs","docs:preview":"vitepress preview docs"},"dependencies":{"@vue/compiler-sfc":"^3.4.27","cli-table3":"^0.6.5","html-tags":"^4.0.0","magic-regexp":"^0.8.0","prettier-eslint":"^16.3.0","yargs":"^17.7.2"},"devDependencies":{"@antfu/eslint-config":"^2.27.0","@types/node":"^20.13.0","@types/yargs":"^17.0.32","@typescript-eslint/eslint-plugin":"^6.5.0","@typescript-eslint/parser":"^6.5.0","@vitejs/plugin-vue":"^4.5.0","eslint":"^8.57.0","eslint-plugin-vue":"^9.12.0","execa":"^9.3.0","inquirer":"^10.1.8","pkg":"^5.8.1","pkg-install":"^1.0.0","typescript":"^5.2.2","vite":"^5.0.0","vitepress":"^1.3.1","vitest":"^1.1.3","vue":"^3.4.27","vue-tsc":"^1.8.22"},"_id":"@brenoepic/vue-mess-detector@0.43.0","gitHead":"6515ef067e03474d0f7a147feafb9d29c3394646","bugs":{"url":"https://github.com/rrd108/vue-mess-detector/issues"},"homepage":"https://github.com/rrd108/vue-mess-detector#readme","_nodeVersion":"20.17.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-P+N04tH8CheA7+Nj5ZJPP9TIQnxmi9zm1s8P0w/6zyo6CWkjp9LxyQ6mUPB0DhXTBB9FIu19NAUpyW881KVcSQ==","shasum":"3dcc4d3463fccd1b8c1300dbf4044de5b86f65fc","tarball":"https://registry.npmjs.org/@brenoepic/vue-mess-detector/-/vue-mess-detector-0.43.0.tgz","fileCount":5,"unpackedSize":140801,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGiXFPZgp4HPLUReErnHtuDf8uCVPHa4F0sOEq/9MQFvAiAXrkwgKU8ZmuKewX/yN2aBQAy0tKJzhRok0LdSRzuG8w=="}]},"_npmUser":{"name":"brenoepic","email":"ibreno076@gmail.com"},"directories":{},"maintainers":[{"name":"brenoepic","email":"ibreno076@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-mess-detector_0.43.0_1725440504855_0.1377433451242609"},"_hasShrinkwrap":false}},"time":{"created":"2024-09-04T09:01:44.739Z","0.43.0":"2024-09-04T09:01:45.054Z","modified":"2024-09-04T09:01:45.285Z"},"maintainers":[{"name":"brenoepic","email":"ibreno076@gmail.com"}],"description":"A static code analysis tool for detecting code smells and best practice violations in Vue.js and Nuxt.js projects","homepage":"https://github.com/rrd108/vue-mess-detector#readme","keywords":["nuxt","vue","code","quality","analyzis","static code analizis","code quality","code smell","cli"],"repository":{"type":"git","url":"git+https://github.com/rrd108/vue-mess-detector.git"},"author":{"name":"rrd"},"bugs":{"url":"https://github.com/rrd108/vue-mess-detector/issues"},"license":"MIT","readme":"# Vue Mess Detector\r\n\r\nA static code analysis tool for detecting code smells and best practice violations in Vue.js and Nuxt.js projects.\r\n\r\n## 👥 Core Team\r\n\r\n<table>\r\n  <tr>\r\n    <td align=\"center\" style=\"border: none;\">\r\n      <a href=\"https://github.com/rrd108\">\r\n        <img src=\"https://github.com/rrd108.png?size=100\" width=\"100px;\" alt=\"rrd\"/>\r\n        <br />\r\n        <sub><b>rrd</b></sub>\r\n      </a>\r\n    </td>\r\n    <td align=\"center\" style=\"border: none;\">\r\n      <a href=\"https://github.com/David-Pena\">\r\n        <img src=\"https://github.com/David-Pena.png?size=100\" width=\"100px;\" alt=\"David-Pena\"/>\r\n        <br />\r\n        <sub><b>David Pena</b></sub>\r\n      </a>\r\n    </td>\r\n  </tr>\r\n</table>\r\n\r\n## ⬇️ Installation\r\n\r\n### As a vscode extension\r\n\r\nLaunch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.\r\n\r\n```\r\next install WebMania.vue-mess-detector\r\n```\r\n\r\nMore info: https://marketplace.visualstudio.com/items?itemName=WebMania.vue-mess-detector\r\n\r\n### From npm registry\r\n\r\n```bash\r\n# using pnpm\r\npnpm add vue-mess-detector -D\r\n\r\n# using yarn\r\nyarn add vue-mess-detector -D\r\n\r\n# using npm\r\nnpm install vue-mess-detector --save-dev\r\n\r\n# using bun\r\nbun add @rrd/vue-mess-detector --dev\r\n```\r\n\r\n### From JSR registry\r\n\r\n```bash\r\n# using deno\r\ndeno add @rrd/vue-mess-detector\r\n\r\n# using pnpm\r\npnpm dlx jsr add @rrd/vue-mess-detector -D\r\n\r\n# using yarn\r\nyarn dlx jsr add @rrd/vue-mess-detector -D\r\n\r\n# using npm\r\nnpx jsr add @rrd/vue-mess-detector --save-dev\r\n\r\n# using bun\r\nbunx jsr add @rrd/vue-mess-detector --dev\r\n```\r\n\r\n## ⚙️ Usage\r\n\r\nBasic usage:\r\n\r\n```bash\r\nnpx vue-mess-detector analyze [path]\r\n```\r\n\r\nOptions:\r\n\r\n| Option      | Description                                             | Default | Example                                                |\r\n| ----------- | ------------------------------------------------------- | ------- | ------------------------------------------------------ |\r\n| `[path]`    | Specify directory or file to analyze                    | `./src` | `./src/components/AppHeader.vue` |\r\n| `--exclude` | Exclude directories or files (comma-separated)          | None    | `--exclude=components,Gauranga.vue`                    |\r\n| `--apply`   | Apply **only** specific rulesets or rules (comma-separated) | All rules | `--apply=vue-essential,magicNumbers`        |\r\n| `--ignore`  | Ignore **only** specific rulesets or rules (comma-separated) | -    | `--ignore=vue-caution,functionSize`                    |\r\n| `--group`   | Group results by `file` or `rule`                       | `rule`  | `--group=file`                                         |\r\n| `--order`   | Order results (`asc` or `desc`)                         | `asc`   | `--order=desc`                                         |\r\n| `--level`   | Show only specific level (`error` or `warning`)         | Both    | `--level=error`                                        |\r\n| `--output`  | Output format `text` or `table` or `json`               | `text`  | `--output=table`                                        |\r\n\r\n\r\nIf you want to store your flags in a configuration file, you can create a `vue-mess-detector.json` file in the root of your project with the following content:\r\n\r\n```json\r\n{\r\n  \"apply\": \"vue-strong,rrd\",\r\n  \"level\": \"error\"\r\n}\r\n```\r\n\r\nThen you can run the command without flags:\r\n\r\n```bash\r\nnpx vue-mess-detector analyze\r\n```\r\n\r\nAll flags will be read from the configuration file. All missing flags will be set to their default values except if you provide them as flags in the command line.\r\n\r\n## 📊 Example output\r\n\r\n#### Without `--group` flag (default behavior is to group per rule) ⬇️\r\n\r\n![Output Image - Group By Rule](./docs/public/results-per-rule.png)\r\n\r\n#### With `--group=file` flag ⬇️\r\n\r\n![Output Image - Group By File](./docs/public/results-per-file.png)\r\n\r\n## 🧾 Output explanation\r\n\r\n**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.\r\n\r\n**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.\r\n\r\n- **Rule**: The blue line that defines the specific rule being evaluated.\r\n- **File**: Shows the path to the file where the rule is applied.\r\n- **Description**: A concise explanation of the rule, often accompanied by a link to relevant documentation for further details.\r\n- **Message**: Indicates the line of code where the rule was violated.\r\n\r\n> [!IMPORTANT]\r\n> Yellow messages are warnings, suggesting best practices, while red messages highlight errors that must be corrected.\r\n\r\n## 📈 Code Health\r\n\r\n![Output Image - Code Health](./docs/public/code-health.png)\r\n\r\nAccording to the number of errors and warnings, and the lines of code in your project, we calculate a health score for your project.\r\n\r\nThe code health is:\r\n\r\n- **low** if the score is under 75%\r\n- **medium** if the score is between 75% and 85%\r\n- **ok** if the score is between 86% and 95%\r\n- **good** if the score is above 95%\r\n\r\n## 📚 Documentation\r\n\r\n> 👉 For more information, see the [documentation](https://vue-mess-detector.webmania.cc/).\r\n\r\n## 🤝 How to contribute?\r\n\r\nSee [CONTRIBUTING.md](https://github.com/rrd108/vue-mess-detector/blob/main/CONTRIBUTING.md) file.\r\n","readmeFilename":"README.md"}