だれも聞いていないと思って歌え

dance as if no one’s watching, sing as if no one’s listening, and live everyday as if it were your last.

CircleCI 2.0 で ESLint を実行する

仕事で CircleCI に触れてはいたが、プライベートでも導入することにしてみました。
GitHub アカウントと紐付けてアカウントを作成し、リポジトリを指定してセットアップを行うと、 OS 、 Platform 、 Language が自動的に選択されてconfig.ymlのサンプルが生成されました。便利。

f:id:fanjia:20180101171447p:plain f:id:fanjia:20180101171500p:plain f:id:fanjia:20180101171514p:plain

CircleCI CLI をインストールし、ローカル環境で実行する

CircleCI 2.0 では CLI が用意され、ローカル環境での実行、config.ymlファイルのシンタックスチェックなどが行えます。

circleci.com

1.Docker のインストール docs.docker.com

2.CLI のインストール

% curl -o /usr/local/bin/circleci https://circle-downloads.s3.amazonaws.com/releases/build_agent_wrapper/circleci && chmod +x /usr/local/bin/circleci

3.config.ymlシンタックスチェック

% circleci config validate -c .circleci/config.yml
Receiving latest version of circleci...
  config file is valid

4.ローカル環境で実行する

% circleci build

ローカル環境での実行ではキャッシュをサポートしていないため、 restore_cachesave_cache では以下のようなエラーが表示されます。

====>> Restoring Cache
Error: Skipping cache - error checking storage: not supported

Step failed

5.Lint チェックを追加する

eslint の実行時に結果を Junit で出力し、その出力したファイルを store_test_resultsstore_artifacts に設定して CircleCI 上で結果表示を行うようにする。

- run:
    name: lint check
    command: |
      mkdir -p ./reports
      npx eslint ./app/ --format junit --output-file ./reports/eslint.xml
- store_test_results:
    path: ./reports
- store_artifacts:
    path: ./reports

その他

Git Hook に config.ymlシンタックスチェックを仕込む

CircleCI CLI の手順にあったので、追加。 circleci.com

.git/hooks/pre-commitに設定を追加することでコミット時にチェックが行われ、エラーになる場合に下記のようなエラーが表示されます。
また、 Docker を起動していない場合も同様にチェックができないため失敗します。

CircleCI Configuration Failed Validation.

CircleCI 関連で以前書いた記事です。

38fanjia.hatenablog.com

38fanjia.hatenablog.com