CircleCI2入門③ CirlceCI上でLintを実施する

CircleCI3の記事のアイキャッチ画像

こんにちは、プログラマーの@Yuuです。

前回の記事でGitHubにpushしたのを検知してCircleCIを反応させる事までできたので今回はLintを通してみたいと思います。

この記事では npm installnpm run・・ のようなnpmコマンドがある程度分かる前提で説明させていただきます。

今回試したプロジェクトはGitHubに上げてあるのでもし良かったら参考にしてみてください。
CircleCIとGitHubを連携させテストやLintを通すサンプルプロジェクト - GitHub

スポンサーリンク

CircleCI上でESLintを通す

今回のプロジェクトは以下のような構成にしました。

前回と構成はほぼ一緒で、ファイルを4つほど追加しました。

  • Lintを導入するためのpackage.json
  • Lintを設定を記述する.eslintrc.json
  • lint用のtest1.js(Llintを成功させる)
  • lint用のtest2.js(Llintを失敗させる)

.gitignoreは今回のプロジェクトにほぼ関係がないので割愛します。

ではローカルでLintを導入していきます。

Lintを通す

今回はLintにESLintを使用します。

導入方法や使い方は以下の記事を参考にさせていただきました。

ESLint 最初の一歩 - Qiita

Lint用の「.eslintrc.json」に以下の内容を記述します。

今回は出来る限りファイル数などを増やさずに試してみたいので上記記事に書かれている「.eslintrc」は用意しません。

test1.js・test2.js それぞれを以下のようにします。

test1.js

test2.js

それぞれでLintを通すと

期待通りtest1.jsは成功、test2.jsで失敗する形になりました。

CircleCI上でLintを通す

何度か試してみて分かったのですが、単純に上記のようにCircleCI上で eslint test1.js コマンドを実行するとcommand not foundで落ちます;;


ESLintがnot foundになる

理由はCircleCI側でnpm install -g eslintのようにしてeslintを導入していなかったため。
グローバルに導入していないから「そんなコマンドないよ」と言われてしまったわけですね。

じゃあnpm install -g eslintすればいいかというと、CircleCI側で一々グローバルに入れるのもめんどくさいしスマートじゃないな、と。
そこで、こんな時に便利なのがpackage.jsonのsriptsに記述する方法

このscripts内で書いたコマンドは、このプロジェクト内でインストールしたライブラリのコマンドも使用出来ます。
そしてnpm run lint1npm run lint2のようにターミナルで実行する事が出来ます。

なぜscripts内に書くと実行出来るのか?理由は以下のような理由だそうです・・全然知らんかった
npm で依存もタスクも一元化する - Qiita

package.jsonの内容は最終的に以下のような形に。

そしてCircleCIで実行する上で1番重要な「.circleci/config.yml」はトライアンドエラーを繰り返して以下のようになりました。

npm installでeslintをインストールした後、テストが成功するnpm run lint1、テストが失敗するnpm run lint2を実行しています。

実際にGitHubにpushしてCircleCI上で試してみると


CircleCI上での実行結果1枚目


CircleCI上での実行結果2枚目

見づらいですが2枚目の画像で npm run lint1 は成功し、npm run lint2 の方は失敗している事が分かります。

またGitHub上でもcommit部分にCircleCIの結果が表示されるようになります。


Github上でCircleCIの結果が表示される

「☓」が表示される時はCircleCI上で何かしらエラーが起きていて、「✓」が表示されている時はCircleCIでテストやLintが通ったという事のようです。
設定しなくてもGitHubにCIの結果を表示してくれるのは便利ですねー。

あとがき

CircleCI上でLintを無事通す事が出来ました。
次はCircleCI2.0で登場した「Workflows」というものと、GitHubの特定ブランチにpushした場合のみ、CircleCI上で処理を実施するようにしてみたいと思います。

CircleCI3の記事のアイキャッチ画像

この記事が気に入ったらいいね!
して最新情報をチェックしよう!

スポンサーリンク