Create React Appで開発したアプリをESLintでチェックして、チェック結果をJenkinsで可視化する
概要
Create React Appではnpm start
することで、自動的にeslintが実行され、コンソールに結果が出力されます。
このeslint部分だけをコマンドで実行して、実行結果をJenkinsで可視化します。
具体的には
- eslintをnpmで実行して、CheckStyle形式で結果を出力し
- それをJenkinsのWarnings Next Generation プラグインに読み込ませていきます。
まずはローカルで試してみましょう
eslintをローカルで実行してみる
以下のコマンドを実行しましょう。
npx eslint ./src/**/*.js ./src/**/*.jsx
すると、結果がターミナルに出力されます。
今回はJenkinsで実行し、チェック結果を可視化したいので、チェックスタイル形式(xml)で結果を出力します。出力結果はファイルに出力しましょう。
npx eslint ./src/**/*.js ./src/**/*.jsx -f checkstyle > ./eslint_check_result.xml
このファイルをJenkinsのプラグインに読み込ませれば良さそうですね。
Jenkins上で実行してみましょう
ローカルで良い感じに動いたので、いよいよJenkins上で実行してみましょう。
Warnings Next Generation Pluginをインストール
従来のCheckStyleプラグインは非推奨となっています。
ですので、代わりに「Warnings Next Generation Plugin」を利用しましょう。
Jenkinsのプラグイン追加画面で「Warnings Next Generation」を検索し、インストールします。
ジョブの設定
設定 - ビルド - シェルの実行 に以下を設定します。
npm install
npx eslint ./src/**/*.js ./src/**/*.jsx -f checkstyle > ./eslint_check_result.xml
Author And Source
この問題について(Create React Appで開発したアプリをESLintでチェックして、チェック結果をJenkinsで可視化する), 我々は、より多くの情報をここで見つけました https://qiita.com/nyandora/items/f1ce89a1899808db374c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .