私たちは仕事でプラットフォームを積極的に使用しています ソナーキューブ コードの品質を高いレベルで維持します。 で書かれたプロジェクトの XNUMX つを統合するとき VueJs+Typescript、問題が発生しました。 そこで、どのようにしてそれらを解決することができたのか、詳しくお話したいと思います。

この記事では、上で書いたように、SonarQube プラットフォームについて説明します。 初めてそれについて聞く人のために、ちょっとした理論 - 一般的にはどのようなものかを説明します。

ソナーキューブ （前者 ソナー) は、継続的な検査とコード品質測定のためのオープンソース プラットフォームです。
MISRA C、MISRA C++、MITER/CWE、および CERT セキュア コーディング標準プログラミング標準のルールに従ったコード分析とエラー検出をサポートします。 また、OWASP Top 10 および CWE/SANS Top 25 プログラミング エラー リストのエラーも認識できます。
プラットフォームではさまざまな既製のツールが使用されているにもかかわらず、SonarQube は結果を XNUMX つのダッシュボードにまとめて実行の履歴を保持するため、開発中のソフトウェア品質の変化の一般的な傾向を確認できます。

詳細については、次の URL を参照してください。 公式サイト

多数のプログラミング言語がサポートされています。 上記のリンクからの情報から判断すると、これらは 25 以上の言語です。 特定の言語をサポートするには、適切なプラグインをインストールする必要があります。 コミュニティバージョンには、連携するためのプラグインが含まれています Javascriptを (typescript を含む)、ただし wiki には反対のことが書かれています。 後ろに Javascriptを プラグインの回答 SonarJS、タイプスクリプトの場合 ソナーTS それぞれ。

公式クライアントは取材情報の送信に使用されます ソナーキューブスキャナーの設定を使用します。 設定-file、このデータをサーバーに送信します ソナーキューブ さらなる統合と集約のために。

のために Javascriptを がある npmラッパー。 それでは、段階的な実装を始めましょう ソナーキューブ в ヴュー-プロジェクトを使用して タイプスクリプト.

サーバーを展開するには ソナーキューブ 活用しましょう ドッカーの作成.

ソナー.yaml:

version: '1'
    services:
        simplesample-sonar:
            image: sonarqube:lts
            ports:
                - 9001:9000
                - 9092:9092
            network_mode: bridge

実行：

docker-compose -f sonar.yml up

その後 ソナーキューブ で入手可能になります: http://localhost:9001 .

まだプロジェクトはありませんが、それは当然です。 この状況を修正します。 公式のサンプルプロジェクトを使用しました 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"
      ...
   },
 …
}

次に、スキャナーを動作させるには、特別なファイルでプロジェクト設定を行う必要があります。 基本から始めましょう。

ソナープロジェクトのプロパティ:

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

• ソナー.ホスト.url - 住所 ソナー'あ;
• sonar.projectKey – サーバー上の一意のプロジェクト識別子 ソナー'あ;
• ソナー.プロジェクト名 – プロジェクトは次のように識別されるため、いつでも変更できます。 プロジェクトキー;
• ソナーソース – ソースのあるフォルダー、通常はこれ SRC、でも何でも構いません。 このフォルダーは、スキャナーが起動されるフォルダーであるルート フォルダーを基準にして設定されます。
• ソナーテスト – 前のパラメータと連動するパラメータ。 これはテストが配置されているフォルダーです。 このプロジェクトにはそのようなフォルダーはなく、テストはフォルダー内のテスト対象コンポーネントの隣にあります。test' なので、今は無視して次のパラメータを使用します。
• ソナーテストインクルージョン – マスクを使用したテストのパス。複数の要素がカンマで区切られてリストされる場合があります。
• sonar.sourceEncoding – ソースファイルのエンコーディング。

スキャナーの最初の起動では、先行する主なアクションを除いて、すべての準備が整っています。テスト エンジン自体を起動して、スキャナーが後で使用するカバレッジに関する情報を生成できるようにします。

ただし、これを行うには、この情報を生成するようにテスト エンジンを構成する必要があります。 このプロジェクトでは、テスト エンジンは次のとおりです。 冗談。 その設定はファイルの対応するセクションにあります package.json.

これらの設定を追加しましょう。

"collectCoverage": true,
"collectCoverageFrom": [
      "src/**/*",
      "!src/main.ts",
      "!src/App.vue",
      "!src/**/*.d.*",
      "!src/**/*__tests__*"
],

つまり、カバレッジとそれが形成されるベースとなるソース (例外も含む) を計算する必要があるかどうかを示すフラグ自体を設定します。

では、テストを実行してみましょう。

yarn test

次のことがわかります。

その理由は、コンポーネント自体にコードが存在しないためです。 これを修正しましょう。

HelloWorld.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.
言う必要があります ソナー「どこから入手できますか？」 したがって、構成ファイルに次の行を追加しましょう。 ただし、ポイントが XNUMX つあります。プロジェクトは多言語にすることができます。つまり、フォルダー内でプロジェクトを多言語にすることができます。 SRC いくつかのプログラミング言語のソース コードがあり、いずれかに属しており、いずれかのプラグインの使用はその拡張子によって決まります。 また、カバレッジ情報はプログラミング言語ごとに異なる場所に保存できるため、言語ごとにこれを設定するための独自のセクションがあります。 私たちのプロジェクトでは、 タイプスクリプトしたがって、そのためだけに設定セクションが必要です。

ソナープロジェクトのプロパティ:

sonar.typescript.coveragePlugin=lcov
sonar.typescript.lcov.reportPaths=coverage/lcov.info

スキャナーを初めて起動する準備がすべて整いました。 注意したいのは、このプロジェクトは、 ソナー'e は、特定のプロジェクトに対してスキャナを初めて実行するときに自動的に作成されます。 その後、時間の経過に伴うプロジェクトパラメータの変化のダイナミクスを確認するために情報が蓄積されます。

そこで、前に作成したコマンドを使用してみましょう package.json:

yarn run sonar 

注意： パラメータを使用することもできます -X より詳細なログを記録します。

スキャナーが初めて起動された場合は、スキャナー自体のバイナリが最初にダウンロードされます。 その後、起動してサーバーのスキャンを開始します ソナー'a はインストールされているプラ​​グインを表し、それによってサポートされている言語を計算します。 その操作のための他のさまざまなパラメータもロードされます。 品質プロファイル、アクティブなルール、メトリクス リポジトリ、サーバー ルール.

注意： この記事の枠内では詳しく説明しませんが、いつでも公式情報源に問い合わせることができます。

次に、フォルダーの分析が始まります SRC すべてのサポート対象言語 (特定の言語が明示的に指定されていない場合) のソース ファイルと、その後のインデックス付けの可用性について。

次に、その他のさまざまな分析が行われますが、この記事では取り上げません (たとえば、リンティング、コード重複の検出など)。

スキャナーの作業の最後に、収集されたすべての情報が集約され、アーカイブされてサーバーに送信されます。

この後、Web インターフェイスで何が起こったかがすでに確認できます。

ご覧のとおり、何かは機能し、ある種のカバレッジも表示されていますが、私たちのものとは一致しません 冗談-報告。

それを理解しましょう。 プロジェクトをさらに詳しく見て、カバレッジ値をクリックすると、詳細なファイル レポートが表示されます。

ここでは、メインの調べられたファイルに加えて、 HelloWorld.vue、ファイルもあります main.ts、それは報道の全体像を台無しにします。 しかし、なぜ補償範囲の計算から除外したのでしょうか。 はい、すべて正しいですが、レベル上でした 冗談、しかしスキャナーがインデックスを付けたので、それが計算に含まれてしまいました。

これを修正しましょう:

ソナープロジェクトのプロパティ:

...
sonar.exclusions=src/main.ts
...

明確にしたいのですが、このパラメーターで指定されたフォルダーに加えて、パラメーターにリストされているすべてのフォルダーも追加されます。 ソナーテストインクルージョン.

スキャナーを起動すると、正しい情報が表示されます。

次の点を見てみましょう - 品質プロファイル。 サポートについては上でお話しました ソナー同時に複数の言語を使用できます。 これはまさに私たちが見ているものです。 しかし、私たちのプロジェクトは次のように書かれていることを知っています。 TSでは、なぜ不必要な操作やチェックでスキャナーに負担をかける必要があるのでしょうか。 構成ファイルにパラメーターをもう XNUMX つ追加して、分析用の言語を設定します。 ソナー'A:

ソナープロジェクトのプロパティ:

...
sonar.language=ts
...

スキャナを再度実行して結果を見てみましょう。

カバー力は完全になくなりました。

スキャナーのログを見ると、次の行が表示されます。

つまり、プロジェクト ファイルにインデックスが作成されていないだけです。

状況は次のとおりです：正式にサポートされています VueJ プラグインにあります SonarJS誰が責任を負うのか Javascriptを.

ただし、このサポートはプラグインには含まれていません ソナーTS のために TS、バグトラッカーで公式チケットがオープンされました ソナー'A:

1. https://jira.sonarsource.com/browse/MMF-1441
2. https://github.com/SonarSource/SonarJS/issues/1281

この事実を裏付ける、SonarQube 開発者の代表者の XNUMX 人からの回答をいくつか紹介します。

しかし、私たちにとってはすべてがうまくいきました、あなたは反対します。 そうだね、ちょっと試してみましょう "ハック".
サポートがあれば .vue-ファイル ソナー「ああ、それなら彼にそれらを次のように考えるように伝えてみましょう」 タイプスクリプト.

パラメーターを追加しましょう。

ソナープロジェクトのプロパティ:

...
sonar.typescript.file.suffixes=.ts,.tsx,.vue
...

スキャナーを起動しましょう。

そして、ほら、すべてが正常に戻り、プロファイルが XNUMX つだけになりました。 タイプスクリプト。 つまり、サポートで問題を解決できました VueJs+TS のために ソナーキューブ.

さらに進んで、カバレッジ情報を少し改善してみましょう。

私たちがこれまでに行ったこと:

• プロジェクトに追加されました ソナー-スキャナー;
• 設定 冗談 カバレッジ情報を生成するため。
• 設定済み ソナー-スキャナー;
• サポートの問題を解決しました .vue-ファイル + タイプスクリプト.

テスト カバレッジに加えて、コードの品質については他にも興味深い便利な基準があります。たとえば、プロジェクトのコードの重複や行数 (コードの複雑さに関連する係数の計算に関係する) などです。

現在のプラグインの実装では、 TS (ソナーTS） 動作しないでしょう CPD (コピーペースト検出器) コードの行数を数える .vue-ファイル。

コード重複の合成状況を作成するには、単にコンポーネント ファイルを別の名前で複製し、それをコードに追加します。 main.ts ダミー関数を作成し、別の名前で複製します。 次のように重複をチェックするには .vue、および .ts -ファイル。

main.ts:

...
function name(params:string): void {
  console.log(params);
}
...

これを行うには、構成行を一時的にコメントアウトする必要があります。

ソナープロジェクトのプロパティ:

...
sonar.exclusions=src/main.ts
...

テストとともにスキャナーを再起動してみましょう。

yarn test && yarn run sonar

もちろん、私たちの報道範囲は減りますが、今はそんなことには興味がありません。

コード行の複製に関しては、次のことがわかります。

確認するには、使用します CPD-ユーティリティ - jscpd:

npx jscpd src

コード行の場合:

おそらくこれは将来のプラグインのバージョンで解決されるでしょう ソナーJS(TS)。 これら XNUMX つのプラグインを徐々に XNUMX つに統合し始めていることに注意してください。 SonarJS、それは正しいと思います。

ここで、カバレッジ情報を改善するという選択肢を検討したいと思いました。

これまでのところ、プロジェクト全体、特にファイルのテスト カバレッジをパーセンテージで確認できます。 ただし、数量に関する情報を使用してこの指標を拡張することは可能です。 単位- プロジェクトのテストだけでなく、ファイルのコンテキストでもテストします。

できる図書館があります 冗談-レポートを次の形式に変換します ソナー'A:
一般的なテストデータ - https://docs.sonarqube.org/display/SONAR/Generic+Test+Data.

このライブラリをプロジェクトにインストールしましょう。

yarn add jest-sonar-reporter

そしてそれを構成に追加します 冗談:

パッケージ.json:

…
"testResultsProcessor": "jest-sonar-reporter"
…

では、テストを実行してみましょう。

yarn test

その後、プロジェクトのルートにファイルが作成されます テストレポート.xml.

設定で使ってみましょう ソナー'A:

ソナープロジェクトのプロパティ:

…
sonar.testExecutionReportPaths=test-report.xml
…

そしてスキャナーを再起動します。

yarn run sonar

インターフェースで何が変わったのか見てみましょう ソナー'A:

そして何も変わっていません。 実際のところ、Sonar は Jest レポートに記載されているファイルをファイルとはみなしません。 単位-テスト。 この状況を修正するには、構成パラメータを使用します。 ソナー ソナーテストここでは、テストを含むフォルダーを明示的に示します (今のところは XNUMX つだけです)。

ソナープロジェクトのプロパティ:

…
sonar.tests=src/components/__tests__
…

スキャナを再起動しましょう。

yarn run sonar

インターフェースで何が変わったのか見てみましょう。

これで、私たちの数がわかりました 単位-tests 内をクリックして失敗すると、プロジェクト ファイル間でのこの数値の分布がわかります。

まとめ

そこで、継続的な分析のためのツールを検討しました。 ソナーキューブ。 で書かれたプロジェクトをそれにうまく統合しました。 VueJs+TS。 いくつかの互換性の問題を修正しました。 テストカバレッジインジケーターの情報内容を増加しました。 この記事では、コード品質基準のうち XNUMX つだけ (おそらく主要なものの XNUMX つ) を検討しましたが、 ソナーキューブ 安全性テストなどの他の品質基準もサポートしています。 ただし、これらの機能のすべてが完全に利用できるわけではありません。 コミュニティ-バージョン。 興味深く便利な機能の XNUMX つは統合です。 ソナーキューブ GitLab や BitBucket などのさまざまなコード リポジトリ管理システムを使用します。 防ぐために マージプル(マージ)リクエスト'a カバレッジが低下した場合、リポジトリのメイン ブランチに送信されます。 しかし、これはまったく別の記事の話です。

PS： この記事でコード形式で説明されているものはすべて、次の場所で入手できます。 私のフォーク.

登録ユーザーのみがアンケートに参加できます。 ログインお願いします。

SonarQube プラットフォームを使用していますか:

• 視聴者の３８%がはい5

• 視聴者の３８%がNo3

• 視聴者の３８%がこのプラットフォームについて聞いたので使用したいと思っています3

• 視聴者の３８%がこのプラットフォームについて聞いたことがあるが、使いたくない2

• 視聴者の３８%が別のプラットフォームを使用しています0

• 視聴者の３８%が彼女のことを初めて知りました6

19 人のユーザーが投票しました。 3名のユーザーが棄権した。

出所： habr.com