我们在工作中积极使用该平台 声纳 保持高水平的代码质量。 当集成编写的项目之一时 VueJs+Typescript，问题出现了。 因此，我想更详细地告诉您我们是如何解决这些问题的。
正如我上面所写，在本文中我们将讨论 SonarQube 平台。 一些理论——对于那些第一次听说它的人来说，它通常是什么：
声纳 （以前的 声纳）是一个用于持续检查和代码质量测量的开源平台。
支持根据 MISRA C、MISRA C++、MITRE/CWE 和 CERT 安全编码标准编程标准的规则进行代码分析和错误检测。 它还可以识别 OWASP Top 10 和 CWE/SANS Top 25 编程错误列表中的错误。
尽管该平台使用各种现成的工具，SonarQube 将结果简化为单个仪表板，保留运行历史记录，从而使您能够看到开发过程中软件质量变化的总体趋势。
更多详细信息请参见
支持大量编程语言。 从上面链接的信息来看，这些语言超过 25 种。 要支持特定语言，您必须安装适当的插件。 社区版本包含一个用于使用的插件 使用Javascript （包括 typesсript），尽管 wiki 的说法相反。 在后面 使用Javascript 插件答案 声纳JS, 对于打字稿 声纳TS 分别
官方客户端用于发送覆盖信息 声纳扫描仪，其中，使用来自的设置 配置-file，将此数据发送到服务器 声纳 以便进一步整合和聚合。
为 使用Javascript 有 。 那么，让我们开始逐步实施 声纳 в Vue公司-项目使用 打字稿.
部署服务器 声纳 让我们利用 泊坞窗，撰写.
声纳.yaml:
version: '1'
services:
simplesample-sonar:
image: sonarqube:lts
ports:
- 9001:9000
- 9092:9092
network_mode: bridge发射：
docker-compose -f sonar.yml up此后 声纳 将于： .
目前还没有项目，这是公平的。 我们将纠正这种情况。 我拿了官方的示例项目 VueJS+TS+Jest。 让我们把它转向我们自己：
git clone https://github.com/vuejs/vue-test-utils-typescript-example.git首先我们需要安装客户端 声纳， 这就是所谓的 声纳扫描仪为 NPM 有一个包装器：
yarn add sonarqube-scanner并立即将命令添加到 脚本 与它一起工作。
包.json：
{
…
scripts: {
...
"sonar": "sonar-scanner"
...
},
…
}接下来，为了使扫描仪工作，您需要在一个特殊文件中设置项目设置。 让我们从基础开始。
声纳项目.properties:
sonar.host.url=http://localhost:9001
sonar.projectKey=test-project-vuejs-ts
sonar.projectName=Test Application (VueJS+TS)
sonar.sources=src
# sonar.tests=
sonar.test.inclusions=src/**/*tests*/**
sonar.sourceEncoding=UTF-8- 声纳.host.url - 地址 声纳'A;
- 声纳.projectKey – 服务器上唯一的项目标识符 声纳'A;
- 声纳.项目名称 – 它的名称，可以随时更改，因为该项目是由 项目密钥;
- 声纳源 – 包含源的文件夹，通常是这个 SRC，但可以是任何东西。 该文件夹是相对于根文件夹设置的，根文件夹是启动扫描仪的文件夹；
- 声纳测试 – 与前一个参数同时使用的参数。 这是测试所在的文件夹。 在这个项目中，没有这样的文件夹，测试位于文件夹中正在测试的组件旁边test'，所以我们暂时忽略它并使用下一个参数；
- 声纳.测试.包含 – 使用掩码进行测试的路径，可能会列出多个以逗号分隔的元素；
- 声纳.sourceEncoding – 源文件的编码。
对于首次启动扫描仪，一切都已准备就绪，除了前面的主要操作：启动测试引擎本身，以便它可以生成有关扫描仪随后将使用的覆盖范围的信息。
但要做到这一点，您需要配置测试引擎来生成此信息。 在这个项目中，测试引擎是 有。 它的设置在文件的相应部分 的package.json.
让我们添加这些设置：
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*",
"!src/main.ts",
"!src/App.vue",
"!src/**/*.d.*",
"!src/**/*__tests__*"
],也就是说，我们根据需要计算覆盖范围和形成覆盖范围的来源（以及例外情况）设置标志本身。
现在让我们运行测试：
yarn test我们将看到以下内容：
原因是组件本身没有代码。 让我们解决这个问题。
你好世界.vue：
...
methods: {
calc(n) {
return n + 1;
}
},
mounted() {
this.msg1 = this.msg + this.calc(1);
},
...这足以计算覆盖范围。
重新启动测试后，我们将确保：
在屏幕上我们应该看到有关覆盖范围的信息，并且将在项目文件夹中创建一个文件夹 覆盖 具有通用格式的测试覆盖率信息 LCOV（LTP GCOV 扩展）.
冠状病毒 是一个免费分发的实用程序，用于检查代码覆盖率。 Gcov 为程序中的每个语句生成准确的执行次数，并允许您向源代码添加注释。 Gcov 作为 GCC 包的一部分作为标准实用程序。
左冠状病毒 - gcov 的图形界面。 它为多个源文件组装 gcov 文件，并生成一组包含代码和覆盖率信息的 HTML 页面。 还生成页面以使导航更容易。 Lcov 支持字符串、函数和分支的覆盖。
测试完成后，覆盖范围信息将位于 报道/lcov.info.
我们需要说 声纳'我可以从哪里得到它？ 因此，我们将以下几行添加到其配置文件中。 但有一点：项目可以是多语言的，即在文件夹中 SRC 有多种编程语言的源代码以及其中一种或另一种的从属关系，反过来，一种或另一种插件的使用取决于其扩展名。 对于不同的编程语言，覆盖信息可以存储在不同的位置，因此每种语言都有自己的部分用于设置。 我们的项目使用 打字稿，所以我们需要一个专门的设置部分：
声纳项目.properties:
sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.info一切准备就绪，等待扫描仪的首次启动。 我想指出的是，该项目是 声纳'e 是在您第一次为给定项目运行扫描程序时自动创建的。 在随后的时间里，信息将被积累，以便了解项目参数随时间变化的动态。
因此，让我们使用之前创建的命令 的package.json:
yarn run sonar 注： 您还可以使用参数 -X 以获得更详细的日志记录。
如果扫描仪是第一次启动，那么将首先下载扫描仪本身的二进制文件。 之后它启动并开始扫描服务器 声纳'a 用于安装的插件，从而计算支持的语言。 还加载其操作的各种其他参数： 质量配置文件、活动规则、指标存储库、服务器规则.
注： 我们不会在本文的框架内详细讨论它们，但您可以随时联系官方消息来源。
接下来开始文件夹分析 SRC 了解所有（如果未明确指定特定一种）受支持语言的源文件及其后续索引的可用性。
接下来是各种其他分析，我们在本文中不重点讨论这些分析（例如，linting、代码重复检测等）。
在扫描仪工作的最后，所有收集到的信息都会被汇总、存档并发送到服务器。
之后，我们已经可以看到 Web 界面中发生了什么：
正如我们所看到的，有些东西起作用了，甚至显示了某种覆盖范围，但它与我们的不符 有-报告。
让我们弄清楚一下。 让我们更详细地查看该项目，单击覆盖率值，然后“穿透”进入详细的文件报告：
在这里我们看到，除了主文件之外，还检查了文件 HelloWorld.vue，还有一个文件 主文件，这破坏了报道的全貌。 但为什么我们将其排除在覆盖范围的计算之外呢？ 是的，一切都是正确的，但这是在水平上 有，但扫描仪对其进行了索引，因此它最终出现在计算中。
让我们解决这个问题：
声纳项目.properties:
...
sonar.exclusions=src/main.ts
...我想澄清一下：除了该参数中指定的文件夹外，还会添加该参数中列出的所有文件夹 声纳.测试.包含.
启动扫描仪后，我们看到正确的信息：
让我们看下一点—— 质量概况。 我上面谈到了支持 声纳同时使用多种语言。 这正是我们所看到的。 但我们知道我们的项目是用 TS，那么为什么要对扫描仪进行不必要的操作和检查呢？ 我们将通过在配置文件中添加一个参数来设置分析语言 声纳'A：
声纳项目.properties:
...
sonar.language=ts
...让我们再次运行扫描仪并查看结果：
覆盖范围完全消失了。
如果我们查看扫描仪日志，我们可以看到以下行：
也就是说，我们的项目文件根本没有索引。
情况如下：官方支持 浏览器 是在插件里的 声纳JS谁负责 使用Javascript.
但这个支持不在插件中 声纳TS 为 TS，在 bug 跟踪器中为此开出了正式票证 声纳'A：
以下是 SonarQube 开发人员代表之一的一些回答，证实了这一事实。
但你反对，一切都对我们有用。 是的，我们来尝试一下 “黑客”.
如果有支持的话 .vue- 文件 声纳'哦，那么让我们试着告诉他将它们视为 打字稿.
让我们添加一个参数：
声纳项目.properties:
...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...让我们启动扫描仪：
而且，瞧，一切都恢复正常了，并且只有一个配置文件 打字稿。 也就是说，我们设法解决了支持中的问题 VueJs+TS 为 声纳.
让我们尝试更进一步并稍微改进一下覆盖信息。
到目前为止我们做了什么：
- 添加到项目中 声纳-扫描器;
- 设置 有 生成覆盖信息；
- 配置好的 声纳-扫描器;
- 解决了支持问题 .vue-文件+ 打字稿.
除了测试覆盖率之外，还有其他有趣的有用的代码质量标准，例如项目的代码重复和行数（涉及与代码复杂性相关的系数的计算）。
在当前使用的插件实现中 TS (声纳TS） 不管用 CPD（复制粘贴检测器） 并计算代码行数 .vue- 文件。
要创建代码重复的综合情况，只需使用不同的名称复制组件文件并将其添加到代码中 主文件 一个虚拟函数并用不同的名称复制它。 检查重复项，如下所示 .vue和在 .ts - 文件。
主.ts：
...
function name(params:string): void {
console.log(params);
}
...为此，您需要暂时注释掉配置行：
声纳项目.properties:
...
sonar.exclusions=src/main.ts
...让我们重新启动扫描仪并进行测试：
yarn test && yarn run sonar当然，我们的覆盖范围会下降，但现在我们对此不感兴趣。
就复制代码行而言，我们将看到：
为了检查我们将使用 持续专业发展-公用事业 - jscpd:
npx jscpd src
对于代码行：
也许这个问题会在未来的插件版本中得到解决 声纳JS(TS)。 我想指出的是，他们正在逐渐开始将这两个插件合并为一个 声纳JS，我认为这是正确的。
现在我想考虑改进覆盖信息的选项。
到目前为止，我们可以看到整个项目（尤其是文件）的测试覆盖率百分比。 但可以用有关数量的信息来扩展该指标 单元- 项目以及文件上下文中的测试。
有一个图书馆可以 有- 将报告转换为以下格式 声纳'A：
通用测试数据 - .
让我们在我们的项目中安装这个库：
yarn add jest-sonar-reporter并将其添加到配置中 有:
包.json：
…
"testResultsProcessor": "jest-sonar-reporter"
…现在让我们运行测试：
yarn test之后将在项目的根目录中创建一个文件 测试报告.xml.
让我们在配置中使用它 声纳'A：
声纳项目.properties:
…
sonar.testExecutionReportPaths=test-report.xml
…并重新启动扫描仪：
yarn run sonar我们来看看界面有什么变化 声纳'A：
一切都没有改变。 事实是 Sonar 并不将 Jest 报告中描述的文件视为文件 单元-测试。 为了纠正这种情况，我们使用配置参数 声纳 声纳测试，其中我们将明确指出包含测试的文件夹（目前我们只有一个）：
声纳项目.properties:
…
sonar.tests=src/components/__tests__
…让我们重新启动扫描仪：
yarn run sonar我们来看看界面发生了什么变化：
现在我们已经看到了我们的数量 单元-测试，如果单击内部失败，我们可以看到该数字在项目文件中的分布：
结论
因此，我们研究了一种连续分析工具 声纳。 我们成功地将一个编写的项目集成到其中 VueJs+TS。 修复了一些兼容性问题。 我们增加了测试覆盖率指标的信息内容。 在本文中，我们仅检查了其中一项代码质量标准（也许是主要标准之一），但是 声纳 支持其他质量标准，包括安全测试。 但并非所有这些功能都完全可用 社体的一部分-版本。 有趣且有用的功能之一是集成 声纳 使用各种代码存储库管理系统，例如 GitLab 和 BitBucket。 阻止 合并拉取（合并）请求当覆盖范围降低时，'a 到存储库的主分支。 但这是一篇完全不同的文章的故事。
PS： 文章中以代码形式描述的所有内容都可以在 .
只有注册用户才能参与调查。 拜托
您是否使用SonarQube平台：
-
26,3%是5
-
15,8%3号
-
15,8%我听说过这个平台并想使用3
-
10,5%我听说过这个平台，但不想使用2
-
0,0%我正在使用不同的平台0
-
31,6%第一次听说她6
19 位用户投票。 3 名用户弃权。
来源： habr.com