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

その他言語, プログラム

2018.01.27

つぶやく

はてブ

あとで

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

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

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

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

CircleCI上でESLintを通す

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

.
├── .circleci
│   └── config.yml
├── .gitignore
├── .eslintrc.json
├── README.md
├── index.html
├── package.json
├── node_modules
├── test1.js
└── test2.js

├── .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を使用します。

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

ESLint 最初の一歩 - Qiita

# プロジェクトフォルダに移動
cd path/to/project

# ESLintをインストール
npm install eslint

# ESLintをグローバルで利用出来るようにしておく
npm install -g eslint

# プロジェクトフォルダに移動

cd path/to/project

# ESLintをインストール

npm install eslint

# ESLintをグローバルで利用出来るようにしておく

npm install -g eslint

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

{
  "extends": ["eslint:recommended"],
  "plugins": [],
  "parserOptions": {},
  "env": {"browser": true},
  "globals": {},
  "rules": {}
}

{

"extends": ["eslint:recommended"],

"plugins": [],

"parserOptions": {},

"env": {"browser": true},

"globals": {},

"rules": {}

}

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

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

test1.js

function hello(name) {
  var val = "Hello " + name;
  document.body.textContent = val;
}

hello("CircleCI");

function hello(name) {

var val = "Hello " + name;

document.body.textContent = val;

}

hello("CircleCI");

test2.js

function hello(name) {
  var val = "Hello " + nama
  document.body.textContent = val
}

hello("CircleCI");

function hello(name) {

var val = "Hello " + nama

document.body.textContent = val

}

hello("CircleCI");

それぞれでLintを通すと

# 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で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に記述する方法。

・
・
"scripts": {
  "lint1": "eslint test1.js",
  "lint2": "eslint test2.js"
},
・
・

・

"scripts": {

"lint1": "eslint test1.js",

"lint2": "eslint test2.js"

・

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

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

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

{
  "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"
  }
}

{

"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」はトライアンドエラーを繰り返して以下のようになりました。

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