JavaScript and TypeScript
すべての Qodana リンターは、特定のプログラミング言語とフレームワーク向けに設計された JetBrains IDE に基づいています。JavaScript および TypeScript プロジェクトを解析するには、以下の特徴を持つ Qodana for JS リンターを使用できます。
特性 | 説明 |
|---|---|
リンター名 |
|
Docker イメージ |
|
ベースとなるもの | WebStorm |
ライセンスに基づいて利用可能 | Ultimate および Ultimate Plus ライセンス |
発送方法 | ネイティブソリューションと Docker イメージ |
サポートされる言語 | JavaScript and TypeScript |
サポートされているテクノロジーと機能のリストを表示するには、このセクションのサポートされているテクノロジーと機能の章に移動してください。
始める前に
プロジェクトの依存関係をインストールする
外部依存関係のない基本的な JavaScript プロジェクトの場合、事前の手順は必要ありません。
プロジェクトに外部依存関係がある場合は、qodana.yaml ファイルの bootstrap キーを使用して設定できます。例: プロジェクトの依存関係がプロジェクトルートの yarn.lock ファイルによって指定されている場合は、qodana.yaml に次の行を追加します。
このコマンドは分析の前に自動的に実行されます。依存関係をインストールするには、pnpm、npm、または yarn コマンドを使用できます。
ESLint の有効化
ESLint は JavaScript プロジェクトで広く使用されています。qodana.yaml ファイルを使用して有効にできます。
Qodana クラウド
Qodana for JS リンターでは、ライセンスを識別および検証するために Qodana Cloud プロジェクトトークンが必要なので、次の手順に従って取得してください。
Qodana クラウド(英語)に移動して、そこでアカウントを作成します。
プロジェクトカードには、このセクションで後で使用するプロジェクトトークンが記載されています。
ソフトウェアを準備する
GitHub UI のタブで、QODANA_TOKEN 暗号化シークレット(英語)を作成し、その値としてプロジェクトトークンを保存します。
Jenkins で、次のプラグインが稼働していることを確認します。
Docker イメージを実行するには、Docker(英語) および Docker パイプライン(英語)が必要です
Jenkins プロジェクトでの Git 操作には Git(英語) が必要です
Docker がインストールされており、Jenkins からアクセスできることを確認します。
該当する場合は、Docker ドキュメントの Docker を非 root ユーザーとして管理する(英語)セクションの説明に従って、
jenkinsユーザーが Docker にアクセスできることを確認してください。Jenkins で、
qodana-token資格情報(英語)を作成し、プロジェクトトークンをその値として保存します。Jenkins で、Jenkins ドキュメントポータル(英語)の説明に従ってマルチブランチパイプラインプロジェクトを作成します。
プロジェクトリポジトリが GitLab CI/CD からアクセスできることを確認します。
GitLab CI/CD で、
QODANA_TOKEN(英語) 変数を作成し、プロジェクトトークンをその値として保存します。
Qodana を実行するマシンに Docker をインストールします。
Linux を使用している場合は、現在の非 root ユーザー(英語)で Docker を実行できるはずです。
GitHub の Qodana CLI(英語) ページの指示に従ってください。
このコマンドを実行して、Qodana の Docker イメージをプルします。
Qodana の実行
次の方法を使用して Qodana リンターを実行できます。
Qodana Scan GitHub アクション(英語)を使用して Qodana を実行できます。
main、ブランチ、リリースブランチ、リポジトリに届くプルリクエストをネイティブモードで分析するには、次のワークフロー構成を .github/workflows/code_quality.yml ファイルに保存します。
この設定では、--linter オプションを使用してリンターを指定します。false 状態の --within-docker オプションは、ネイティブモードを有効にするために使用されます。
さらなる構成例については、GitHub アクションセクションを参照してください。
プロジェクトのルートディレクトリで次のコマンドを実行します。
この設定では、--linter オプションを使用してリンターを指定します。false 状態の --within-docker オプションは、ネイティブモードを有効にするために使用されます。
https://qodana.cloud/ 以外の Qodana Cloud インスタンスを使用している場合は、QODANA_ENDPOINT 環境変数を宣言して上書きします。
ブラウザーで Qodana クラウド(英語)を開き、分析レポートを確認して分析を再設定してください。詳細については、ドキュメントの分析レポートのセクションを参照してください。
Docker モードはすべてのリンターで利用可能ですが、可能な限りネイティブモードを使用することをお勧めします。
main ブランチ、リリースブランチ、Docker モードでリポジトリに届くプルリクエストを分析するには、このワークフロー構成を .github/workflows/code_quality.yml ファイルに保存します。
さらなる構成例については、GitHub アクションセクションを参照してください。
この構成を Jenkinsfile に保存します。
さらなる構成例については、Jenkins セクションを参照してください。
これは、Linux 上で Qodana を実行する例です。その他の例は、GitLab CI/CD のセクションに掲載されています。
プロジェクトのルートディレクトリで、このスニペットを .gitlab-ci.yml ファイルに保存します。
さらなる構成例については、GitLab CI/CD セクションを参照してください。
TeamCity UI で、Qodana を実行するビルドの構成ページに移動します。
ページで、ボタンをクリックしてください。
開いたページで、 ランナーを選択します。
ページで、をクリックし、 ランナーを構成します。
は、他のビルドステップの中でこのステップを一意に識別します。
は、他のビルドステップの中でこのステップを一意に識別します。
は、このビルドステップをトリガーするビルド条件を構成します。
はビルドプロセスのディレクトリを設定します。詳細については、TeamCity のドキュメントを参照してください。タブで
Checkout directoryパラメーターが指定されている場合は、このフィールドを空のままにすることができます。はレポートを一意に識別し、単一のビルド内で複数の分析ステップが構成されている場合に複数のレポートを区別できるようにします。
チェックボックスは、TeamCity UI の「テスト」タブで Qodana レポートの可用性を構成します。このオプションを使用すると、検出された他の問題とともにコードベースの問題を表示できます。
は Qodana リンターを構成します。
ここで、JS リンターの Qodana を選択します。
はデフォルトで
Latestに設定されています。はインスペクションプロファイルを定義します:
qodana.starter (default)はデフォルトプロファイルの 1 つです。Profile nameではプロファイルを指定できます。詳細については、既存の Qodana プロファイルセクションを参照してください。Profile pathを使用すると、カスタムプロファイルへのパスを指定できます。このオプションを使用するには、qodana.yamlファイルでもカスタムプロファイルを構成する必要があります。
は、Qodana Cloud で生成されたプロジェクトトークンを構成します。
は、Docker イメージによって受け入れられる引数を設定します。詳細については、構成オプションセクションを参照してください。
を使用すると、デフォルトの Qodana 機能を拡張できます。詳細については、オプションの種類セクションを参照してください。
では、使用する Qodana CLI(英語) バージョンを指定できます。

ボタンをクリックしてください。
さらなる構成例については、TeamCity セクションを参照してください。
https://qodana.cloud/ 以外の Qodana Cloud インスタンスを使用している場合は、QODANA_ENDPOINT 環境変数を宣言してそれを上書きします。
ブラウザーで Qodana クラウド(英語)を開き、分析レポートを確認して分析を再設定してください。詳細については、ドキュメントの分析レポートのセクションを参照してください。
WebStorm で、に移動します。
ダイアログでは、Qodana を設定できます。

このダイアログには次のコンポーネントが含まれています。
名前
説明
qodana.yamlファイルテキストフィールドでは、このファイルで Qodana が使用するコード分析を設定できます。利用可能な設定オプションの詳細について
オプション
Qodana Cloud にレポートを送信する場合は、このオプションをチェックし、Qodana クラウドで生成されたプロジェクトトークンを貼り付けてください。
オプション
このオプションをチェックすると、このダイアログで作成した Qodana 設定をプロジェクトのプロジェクトルートの
qodana.yamlファイルに保存できます。オプション
ベースライン機能を使用すると、特定の問題の分析をスキップできます
をクリックしてコードを分析してください。
ツールウィンドウの タブで、分析レポートを参照してください。
分析レポートを参照する
以下に説明するように、Qodana Cloud から最新の Qodana レポートを WebStorm にロードできます。
WebStorm で、に移動します。
ダイアログで、をクリックします。

これにより、認証ページにリダイレクトされます。
ローカルプロジェクトをリンクする Qodana クラウドプロジェクトを選択します。

オプションをチェックすると、Qodana クラウドから最も実際的で関連性の高いレポートを受け取ることができます。

この場合、IDE は Qodana Cloud を検索し、現在のリビジョン ID (HEAD) に対応するリビジョン ID を持つレポートを取得します。このレポートが見つからない場合、IDE は現在のリビジョン ID (HEAD) に最も近いリビジョン ID を持つ以前のレポートを選択します。それ以外の場合、IDE は Qodana Cloud から利用可能な最新のレポートを取得します。
ツールウィンドウの タブで、分析レポートを参照してください。
Qodana がプロジェクトを分析し、分析レポートを Qodana クラウドにアップロードした後、Qodana クラウド(英語)でプロジェクトに移動し、分析レポートを確認してください。

Qodana レポート UI の詳細については、「分析レポート」セクションを参照してください。
Qodana 構成を拡張
分析範囲の調整
Qodana は、GitHub(英語) でホストされる 2 つの定義済みプロファイルをすぐに使用できます。
qodana.starterはデフォルトのプロファイルであり、より包括的なqodana.recommendedプロファイルのサブセットです。qodana.recommendedは CI/CD パイプラインでの実行に適しており、主にデフォルトの WebStorm プロファイルを実装しています。詳細については、WebStorm のドキュメントを参照してください。
YAML および XML 形式の構成を使用して、Qodana プロファイルをカスタマイズできます。
ベースライン機能を有効にする
ベースライン機能を使用すると、特定の問題の分析をスキップできます。ベースラインに関する情報は、SARIF 形式のファイルに含まれています。
SARIF 形式のベースラインファイルへのパスを指定する --baseline オプションを含む .github/workflows/code_quality.yml ファイルにスニペットを保存します。
ベースラインを含む SARIF 形式のファイルへのパスを指定するには、--baseline オプションを使用してプロジェクトルートディレクトリでこのコマンドを実行します。
ブラウザーで Qodana クラウド(英語)を開き、分析レポートを確認して分析を再設定してください。詳細については、ドキュメントの分析レポートのセクションを参照してください。
このスニペットを、SARIF 形式のベースラインファイルへのパスを指定する args: --baseline qodana.sarif.json オプションを含む .github/workflows/code_quality.yml ファイルに保存します。
Jenkinsfile で、SARIF 形式のベースラインファイルへのパスを指定する --baseline <path/to/qodana.sarif.json> 行を含む構成を保存します。
これは、Linux 上で Qodana を実行する例です。その他の例は、GitLab CI/CD のセクションに掲載されています。
プロジェクトのルートディレクトリで、このスニペットを .gitlab-ci.yml ファイルに保存します。
TeamCity UI で、Qodana を実行するビルドの構成ページに移動します。
ページで、ボタンをクリックしてください。
開いたページで、 ランナーを選択します。
ページで、をクリックし、 ランナーを構成します。
は、他のビルドステップの中でこのステップを一意に識別します。
は、他のビルドステップの中でこのステップを一意に識別します。
は、このビルドステップをトリガーするビルド条件を構成します。
はビルドプロセスのディレクトリを設定します。詳細については、TeamCity のドキュメントを参照してください。タブで
Checkout directoryパラメーターが指定されている場合は、このフィールドを空のままにすることができます。はレポートを一意に識別し、単一のビルド内で複数の分析ステップが構成されている場合に複数のレポートを区別できるようにします。
チェックボックスは、TeamCity UI の「テスト」タブで Qodana レポートの可用性を構成します。このオプションを使用すると、検出された他の問題とともにコードベースの問題を表示できます。
は Qodana リンターを構成します。
ここで、JS リンターの Qodana を選択します。
はデフォルトで
Latestに設定されています。はインスペクションプロファイルを定義します:
qodana.starter (default)はデフォルトプロファイルの 1 つです。Profile nameではプロファイルを指定できます。詳細については、既存の Qodana プロファイルセクションを参照してください。Profile pathを使用すると、カスタムプロファイルへのパスを指定できます。このオプションを使用するには、qodana.yamlファイルでもカスタムプロファイルを構成する必要があります。
は、Qodana Cloud で生成されたプロジェクトトークンを構成します。
は、Docker イメージによって受け入れられる引数を設定します。詳細については、構成オプションセクションを参照してください。
を使用すると、デフォルトの Qodana 機能を拡張できます。詳細については、オプションの種類セクションを参照してください。
このフィールドでは、
--baseline <path/to/qodana.sarif.json>オプションを使用してベースラインフィーチャを指定します。では、使用する Qodana CLI(英語) バージョンを指定できます。

ボタンをクリックしてください。
コマンドラインからベースライン機能を実行する方法を選択します。
WebStorm で、ツールウィンドウに移動します。
ツールウィンドウで、 タブをクリックします。
タブで、ボタンをクリックします。
開いたダイアログで、セクションを展開し、ベースラインファイルへのパスを指定して、をクリックします。
品質ゲートの有効化
品質ゲートは以下に対して設定できます。
このスニペットを qodana.yaml ファイルに保存します。
プルリクエストの分析
Qodana Scan GitHub アクション(英語)はすべてのプルリクエストを自動的に分析するため、追加の構成を指定する必要はありません。この構成を .github/workflows/code_quality.yml ファイルに保存します。
コードの変更を分析するには、--diff-start オプションを使用し、比較のベースとなるコミットのハッシュを指定します。
ブラウザーで Qodana クラウド(英語)を開き、分析レポートを確認して分析を再設定してください。詳細については、ドキュメントの分析レポートのセクションを参照してください。
Qodana Scan GitHub アクション(英語)はすべてのプルリクエストを自動的に分析するため、追加の構成を指定する必要はありません。この構成を .github/workflows/code_quality.yml ファイルに保存します。
これは、Linux 上で Qodana を実行する例です。その他の例は、GitLab CI/CD のセクションに掲載されています。
プロジェクトのルートディレクトリに、次のスニペットを含む .gitlab-ci.yml ファイルを保存します。
この構成により、マージリクエスト分析が可能になります。
プルリクエストとマージリクエストを分析するための TeamCity の構成に関する情報は、TeamCity ドキュメントポータルで入手できます。
コードの変更を分析するには、--diff-start オプションを使用し、比較のベースとなるコミットのハッシュを指定します。
サポートされているテクノロジーと機能
JS 用 Qodana は、次のテクノロジ用にインスペクションを提供します。
プログラミング言語 | JavaScript TypeScript |
フレームワークおよびライブラリ | Angular Cucumber Node.js React Vue |
マークアップ言語 | CSS EJS Handlebars/Mustache HTML JSON および JSON5 JSONPath Less PostCSS Pug/Jade RELAX NG Sass/SCSS XML YAML |
データベースと ORM | MongoDB MySQL Oracle PostgreSQL SQL SQL サーバー |
スクリプト言語 | シェルスクリプト |
その他 | 正規表現 構造検索 HTTP クライアント |
JS リンター用の Qodana は、次の Qodana 機能を提供します。
関連ページ:
Qodana のエディション
ニーズに応じて、次の表に示す適切なライセンスを選択できます。Community フリー孤立した問題の解決に最適 Ultimate 詳細については、サブスクリプションのオプションと価格を参照してくださいさまざまなビジネスタスクを解決するために設計されています。試用版をご利用いただけます。Ultimate Plus 詳細については、サブスクリプションのオプションと価格を参照してください Ultimate ライセンスと同じ機能がすべて含まれていますが、追加機能と無制限の履歴データストレージも含まれています。試用...
クイックスタート
Qodana Cloud の使用を開始するには、Qodana クラウド Web サイトに移動してください。JetBrains アカウントで続行するボタンをクリックして JetBrains アカウントを作成し、Qodana クラウドにログインできます。未登録ユーザーの場合は、Qodana によってすでに分析されたデモプロジェクトを調べることができます。レポートを詳しく調べるには、レポートセクションを参照してください。Qodana Cloud に初めてログインすると、組織、チーム、プロジェクトを作成す...
組織
組織は、Qodana クラウドのすべてのエンティティのトップレベルの構造を提供します。すべての組織は、特定の JetBrains アカウントに基づいて作成されます。選択に応じて、プライベートまたはパブリックになります。Qodana Cloud のすべてのアカウントは、デフォルトの組織となる組織に基づいています。Qodana Cloud UI の左上にあるリストを使用して、組織間を移動できます。組織を作成する:プライベート組織またはパブリック組織を作成できます。プライベート組織に保存されたレポー...
チーム
チームは、特定のプロジェクトを蓄積する組織の一部です。チームを使用すると、Qodana クラウドの専用プロジェクトごとにユーザーをグループ化できます。チームを作成する:プロジェクト設定段階で、Qodana Cloud はチームの作成を支援するため、この手順は追加のチームを作成する場合にのみ必要です。組織ページで、「」をクリックします。これにより、ダイアログが開きます。ダイアログで、チーム名と可視性を指定して、をクリックします。チームを移動する:組織ページでチームのタイルをクリックするか、左側...
プロジェクト
プロジェクトは Qodana レポートを蓄積します。各プロジェクトはプロジェクトトークンによって一意に識別されます。プロジェクトの作成:新しい組織を作成する際、Qodana Cloud は最初のプロジェクトの設定を支援するため、これらの手順は追加のプロジェクトを作成する場合にのみ関連します。チームページで、ボタンをクリックします。プロジェクトのセットアップ段階を完了します。この段階の詳細については、前提条件セクションを参照してください。プロジェクトを管理する:プロジェクトが作成された後、その...
最初のビルドを構成して実行する
このチュートリアルでは、TeamCity の基本機能について説明し、一般的なプロジェクトの設定方法を示します。このガイドの最後には、Gradle を使用してサンプル Java アプリケーションをビルドおよびテストするワークフローを作成します。このチュートリアルで取り上げるトピック: 基本的な TeamCity エンティティに慣れる、リモートリポジトリへのアクセス、パイプライン、ジョブ、ビルドステップの操作、TeamCity ワークフローを実行し、その結果をインスペクションする、障害の処理、プルリク...