Help us understand the problem. What is going on with this article?

CircleCI 2.0 で ESLint を動かす config.yml の紹介(簡単な解説と実行例も)

More than 1 year has passed since last update.

自社ブログで書いた https://blog.tes.co.jp/entry/2018/08/16/090712 のクロス投稿になります。

はじめに

ESLint って便利ですよね。
Prettier と併用してエディタで動くようにすると JavaScript 開発が捗ります。

この ESLint を個人ではなくプロジェクト単位で強制化したい場合、その多くは CI で動かす方法が適しています。
CI を使うことで、個人のエディタの環境に依存することなく、ソースコードの品質を守ることができるからですね。

CI はいくつも種類がありますが、弊社でよく使うのは CircleCI です。

今回の記事では、その CircleCI 2.0 で ESLint を動かすだけの config.yml を紹介します。

とにかく CircleCI 2.0 で ESLint を動かしたい時に適した内容を記載しておきますので、宜しければご活用ください。
簡単な解説と実行例も載せてます。

.circleci/config.yml

早速、設定ファイルを公開します。

既に ESLint を使っているプロジェクトであれば、この設定ファイルで CircleCI を実行すれば大丈夫なはずです。

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:8.11.3
    steps:
      - restore_cache:
          keys:
            - source-v1-{{ .Branch }}-{{ .Revision }}
            - source-v1-{{ .Branch }}-
            - source-v1-
      - checkout
      - save_cache:
          key: source-v1-{{ .Branch }}-{{ .Revision }}
          paths:
            - .git
      - restore_cache:
          key: v1-npm-deps-{{ checksum "package.json" }}
      - run: npm install
      - save_cache:
          key: v1-npm-deps-{{ checksum "package.json" }}
          paths:
            - node_modules
      - run:
          name: lint
          command: |
            mkdir -p /tmp/test-reports/eslint
            node_modules/.bin/eslint . --format junit --output-file /tmp/test-reports/eslint/results.xml
      - store_test_results:
          path: /tmp/test-reports

ちょっと解説

詳細は公式を見た方が確実ですが、私が理解した内容を書いておきますので、少しでも助けになれば幸いです。

cache

- restore_cache:
    keys:
      - source-v1-{{ .Branch }}-{{ .Revision }}
      - source-v1-{{ .Branch }}-
      - source-v1-
- checkout
- save_cache:
    key: source-v1-{{ .Branch }}-{{ .Revision }}
    paths:
      - .git
- restore_cache:
    key: v1-npm-deps-{{ checksum "package.json" }}
- run: npm install
- save_cache:
    key: v1-npm-deps-{{ checksum "package.json" }}
    paths:
      - node_modules

ソースコードの checkout や npm install って遅いですよね。
CircleCI では cache を利用して高速化する方法が使えますので、上記はそのための設定です。

今回の肝ではありませんが、テストコード以外でスローテストに悩まされないためにも、実行速度は気にしておいた方が良いですね。

公式では、以下のページで解説されています。
https://circleci.com/docs/2.0/caching/

run lint

- run:
    name: lint
    command: |
      mkdir -p /tmp/test-reports/eslint
      node_modules/.bin/eslint . --format junit --output-file /tmp/test-reports/eslint/results.xml
- store_test_results:
    path: /tmp/test-reports

ここが本記事の肝です。

Circle CI はテストの実行結果を画面上に表示できます。

となれば、ESLint の静的解析結果で Failed になったものを表示したいですよね。
しかし、CircleCI で ESLint を実行しただけでは結果が認識されず、画面に表示できません。

なので、上記の設定を用いて「静的解析結果を JUnit のフォーマットでファイル出力」して、それを 「CircleCI に読み込ませる」必要があります。

静的解析結果を JUnit のフォーマットでファイル出力

node_modules/.bin/eslint . --format junit --output-file /tmp/test-reports/eslint/results.xml

--format で JUnit を指定して、--output-file でファイルの出力先を指定しています。

公式では、以下のページで解説されています。
https://eslint.org/docs/user-guide/command-line-interface#-f---format
https://eslint.org/docs/user-guide/command-line-interface#output

ファイルの出力先は任意に変更可能ですが、次の段落で解説する CircleCI に読み込ませるパスと合わせる必要があります。

CircleCI に読み込ませる

- store_test_results:
    path: /tmp/test-reports

CircleCI に、テストの実行結果が格納されているパスを指定しています。

このディレクトリの配下に ESLint の静的解析結果のレポートを格納すると、CircleCI が JUnit を動かした時と同様に解析し、レポートを表示してくれるようになります。

公式では、以下のページで解説されています。
https://circleci.com/docs/2.0/configuration-reference/#store_test_results

実行例

FAILED (Red)

var hoge = null;

みたいな、とんでもないコードを置いて CircleCI を実行してみた結果が以下。

image.png

  • hoge という変数が未使用であること
  • var ではなく letconst を使うようにすること

という2つの指摘を見ることができます。

これは、この実行例で参照している .eslintrc.json に基づいた指摘です。
もちろん、プロジェクトごとの ESLint の設定ファイルに基づいて静的解析されます。

FIXED (Green)

上記で追加したとんでもないコードを取り除くと、ちゃんと Green になります。

image.png

Red → Green の流れを踏めると、それだけで気持ち良いですね。

おわりに

CircleCI 2.0 で ESLint を動かすのにあたり、設定内容と解説、実行例を書いてみました。

健全なソースコードを担保し続けるためにも CI や Lint は重要だと思いますので、宜しければご活用ください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした