CircleCI2入門③ CirlceCI上でLintを実施する
こんにちは、プログラマーの@Yuuです。
前回の記事でGitHubにpushしたのを検知してCircleCIを反応させる事までできたので今回はLintを通してみたいと思います。
この記事では npm install や npm run・・ のようなnpmコマンドがある程度分かる前提で説明させていただきます。
今回試したプロジェクトはGitHubに上げてあるのでもし良かったら参考にしてみてください。
CircleCIとGitHubを連携させテストやLintを通すサンプルプロジェクト - GitHub
スポンサーリンク
CircleCI上でESLintを通す
今回のプロジェクトは以下のような構成にしました。
|
1 2 3 4 5 6 7 8 9 10 11 |
. ├── .circleci │ └── config.yml ├── .gitignore ├── .eslintrc.json ├── README.md ├── index.html ├── package.json ├── node_modules ├── test1.js └── test2.js |
前回と構成はほぼ一緒で、ファイルを4つほど追加しました。
- Lintを導入するためのpackage.json
- Lintを設定を記述する.eslintrc.json
- lint用のtest1.js（Llintを成功させる）
- lint用のtest2.js（Llintを失敗させる）
.gitignoreは今回のプロジェクトにほぼ関係がないので割愛します。
ではローカルでLintを導入していきます。
Lintを通す
今回はLintにESLintを使用します。
導入方法や使い方は以下の記事を参考にさせていただきました。
|
1 2 3 4 5 6 7 8 |
# プロジェクトフォルダに移動 cd path/to/project # ESLintをインストール npm install eslint # ESLintをグローバルで利用出来るようにしておく npm install -g eslint |
Lint用の「.eslintrc.json」に以下の内容を記述します。
|
1 2 3 4 5 6 7 8 |
{ "extends": ["eslint:recommended"], "plugins": [], "parserOptions": {}, "env": {"browser": true}, "globals": {}, "rules": {} } |
今回は出来る限りファイル数などを増やさずに試してみたいので上記記事に書かれている「.eslintrc」は用意しません。
test1.js・test2.js それぞれを以下のようにします。
test1.js
|
1 2 3 4 5 6 |
function hello(name) { var val = "Hello " + name; document.body.textContent = val; } hello("CircleCI"); |
test2.js
|
1 2 3 4 5 6 |
function hello(name) { var val = "Hello " + nama document.body.textContent = val } hello("CircleCI"); |
それぞれでLintを通すと
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
# test1.jsでLintチェック eslint test1.js # => Lintに問題ないため何も表示されない # test2.jsでLintチェック eslint test1.js /Users/ghq/github.com/meganedogYuu/CircleciGithubSample2/test2.js 1:16 error 'name' is defined but never used no-unused-vars 2:24 error 'nama' is not defined no-undef ✖ 2 problems (2 errors, 0 warnings) |
期待通りtest1.jsは成功、test2.jsで失敗する形になりました。
CircleCI上でLintを通す
何度か試してみて分かったのですが、単純に上記のようにCircleCI上で eslint test1.js コマンドを実行するとcommand not foundで落ちます；；
理由はCircleCI側でnpm install -g eslintのようにしてeslintを導入していなかったため。
グローバルに導入していないから「そんなコマンドないよ」と言われてしまったわけですね。
じゃあnpm install -g eslintすればいいかというと、CircleCI側で一々グローバルに入れるのもめんどくさいしスマートじゃないな、と。
そこで、こんな時に便利なのがpackage.jsonのsriptsに記述する方法。
|
1 2 3 4 5 6 7 8 |
・ ・ "scripts": { "lint1": "eslint test1.js", "lint2": "eslint test2.js" }, ・ ・ |
このscripts内で書いたコマンドは、このプロジェクト内でインストールしたライブラリのコマンドも使用出来ます。
そしてnpm run lint1・npm run lint2のようにターミナルで実行する事が出来ます。
なぜscripts内に書くと実行出来るのか？理由は以下のような理由だそうです・・全然知らんかった
npm で依存もタスクも一元化する - Qiita
package.jsonの内容は最終的に以下のような形に。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
{ "name": "cg2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "lint1": "eslint test1.js", "lint2": "eslint test2.js" }, "repository": { "type": "git", "url": "https://github.com/meganedogYuu/CircleciGithubSample2.git" }, "author": "", "license": "ISC", "bugs": { "url": "https://github.com/meganedogYuu/CircleciGithubSample2/issues" }, "homepage": "https://github.com/meganedogYuu/CircleciGithubSample2#readme", "devDependencies": { "eslint": "^4.11.0" } } |
そしてCircleCIで実行する上で1番重要な「.circleci/config.yml」はトライアンドエラーを繰り返して以下のようになりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
version: 2 jobs: build: docker: - image: circleci/node:7.10 working_directory: ~/repo steps: - checkout - run: name: echo npm version command: npm -v - run: name: Install npm command: npm install - run: name: check test1.js lint command: npm run lint1 - run: name: check test2.js lint command: npm run lint2 |
npm installでeslintをインストールした後、テストが成功するnpm run lint1、テストが失敗するnpm run lint2を実行しています。
実際にGitHubにpushしてCircleCI上で試してみると
見づらいですが2枚目の画像で npm run lint1 は成功し、npm run lint2 の方は失敗している事が分かります。
またGitHub上でもcommit部分にCircleCIの結果が表示されるようになります。
「☓」が表示される時はCircleCI上で何かしらエラーが起きていて、「✓」が表示されている時はCircleCIでテストやLintが通ったという事のようです。
設定しなくてもGitHubにCIの結果を表示してくれるのは便利ですねー。
あとがき
CircleCI上でLintを無事通す事が出来ました。
次はCircleCI2.0で登場した「Workflows」というものと、GitHubの特定ブランチにpushした場合のみ、CircleCI上で処理を実施するようにしてみたいと思います。
次の記事書きました
CircleCI2入門④ Workflowsを使う | Yuuの悠々自適Blog
この記事が気に入ったらいいね！
して最新情報をチェックしよう！
