※スマホ対応はしてません。

タグ: ESLint

CIで試験回すと便利だよ。(Frog Advent Calendar 2018 – Adventar – 08日目)

カテゴリー: Web

Frog Advent Calendar 2018 – Adventar – 08日目

自身で、または職場で使っている技術・Framework・ツールを教えてください!

というわけで、本日は主に趣味で使ってる試験や継続開発の方面のツールの紹介をします。

実際に使ってる例はこれです。

話すこと

おれが使ってるツールの紹介と使い方の例。

話さないこと

良い試験の書き方、他の類似ツールとの比較。

概要

  • Mocha … 試験を実行
  • Chai … 試験を記述
  • ESLint … 文法や記述の揺れを確認
  • GitHub … コード保管
  • TravisCI … 試験他を自動実行
  • Greenkeeper … 依存パッケージの自動更新提案

Mocha

試験を実行してくれるツールです。

Mochaの実行例。

コマンドラインから実行します。

$ npx mocha tests/**/*.test.js

これを package.json の scripts.test に書いておく感じです。

ESLint

試験実行時に describe と it が global へ追加されます。 (ので node foo.test.js はだめ。)

require しなくてよいのは楽なんだけど、ESLintでエラーが出るはず。

[eslint] 'describe' is not defined. [no-undef]

ESLintの設定で mocha: true するとこれらが登録されます。

またESLintは設定ファイルの、何と言うんだろ、カスケーディング?ができます。これを利用して、主となるものとは別に、試験スクリプト用のディレクトリに test/.eslintrc.js を置くと、試験スクリプトは専用の設定で上書きできます。

module.exports = {
    "env": {
        "mocha": true,
    },
};

Chai

実際の試験を記述するライブラリーです。

いくつか書き方ができるんだけど、自分は expect().to.be. のBDDスタイルです。

const { expect } = require('chai');
const IndexedArray = require('../../lib/IndexedArray.js');

describe('IndexedArray', () => {
  describe('constructor', () => {
    it('creates empty array', () => {
      const db = new IndexedArray();
      expect(db.length).to.be.eql(0);
    });
  });
});

いやなところ

getterみたいになってる検証があって、メソッド呼び出しじゃないけど処理が実行される。

expect(result).to.be.false;

false() ではない。

これがどうも気持ち悪い……。 というのもあって最近はJestに気持ちが傾きつつある。

ESLint

使ってない変数とか改行の位置とか、そういうのを確認してくれるやつ。

自動修正機能もあって、エディター(VS Code)と連携してファイル保存のたびに細かいところを直してくれたりもします。

すごい便利!

TypeScript

にはTSLintというのがあります。

GitHub

もちろんですとも。

Travis CI

さあここからが本番だぞ。

CIサービスです。要は git push したら自動的に試験実行してくれる。

すごい便利! しかも基本無料です。

使い方

  1. アカウント作成
  2. リポジトリ連携
  3. 設定ファイル作成
  4. git push
  5. 結果を見守る
    • 失敗するとメールが飛んでくる

設定ファイル

プロジェクトのルートディレクトリに .travis.yml を置きます。

language: node_js
node_js:
  - "8"
  - "10"
script:
  - npm run lint
  - npm run test-travis

結果

実際に動いてる結果画面がこちら。

バッジとしてREADMEに画像を置いたりもできます。 (試験失敗するとバレるね。)

READMEのバッジ例。左側がTravisCIのもの。

GitHubと連携

コミットのところにチェックマークやらが付いてるのを見ることがあると思うんだけど、それがこれです。

このコミットは試験を失敗させない。

PRのところにも出てくる。

PRが作成、更新されると試験も自動で実行され、結果がPRのページに表示される。これはCircleCIの例。

デプロイも自動化

できるはず。まだやったことない。

Greenkeeper

package.json の内容を読んで、依存パッケージに更新があればPull Requestを作ってくれます。同時にCIの試験結果も見てくれる。

すごい便利!

実際に自動で用意されたPRの例。

PRの変更を見ると package.json が更新されている。

問題なければそのままマージするだけ。らくちん~。

その他

特に試験とかそういうんじゃなしに。

VS Code

ずっとVimだったけど最近はもっぱらこちらへ。

良いVimエミュレーターのプラグインがあれば教えてほしい……。

Windows Subsystem for Linux (WSL)

Windows 10の中でLinuxを動かす技術。

cmdじゃなくてshが動く! 隣席のカナダ人(Windows利用)に教えたら「Gamechangerだ!」といたく感動されました。

ところどころ動かない罠的なところもあるけれど、それでもなお使わない手はないぜって感じです。

EditorConfig

エディターの、インデントや改行コードなんかの設定を自動的に設定してくれるやつ。

Linterでもいいかもしれないけど。

Code Climate

コードの品質を計測してくれる。

最近見かけて使い始めたところ。 気付かない重複個所も指摘してくれて、あーこれまとめとこーみたいになる。

おしまい

ちゃんと試験を書くのが前提だけど、CI系はすごい便利。

最初に一度用意すれば何もしなくても勝手に結果を教えてくれたりとか、コピペで他のプロジェクトへ適用したりもできます。ちょっとやってみて損はないですよ。

興味ある方はおれに聞いてみてください。何なら知ってる限りのことはお教えします。

逆に詳しい方はおれに教えてください。お願いしましたよ。

Frogをよろしく

技術系の留学エージェントです。セナさんの。

昨日はbg_kさんがバンクーバーの勤務先で使ってるツールと就活経験のお話でした。

明日はユウヘイさんの、ハードウェアの開発環境のお話だそうです。

それでは良いお歳を!

ESLintプラグインでVueの書式に合わせて書こう。(Vue.js始めるおれおれアドベントカレンダー2016 – 8日目)

カテゴリー: JavaScript

Vue.js始めるおれおれアドベントカレンダー2016 – 8日目

例示されるコードと自分が書くコードの書き方が違うのが気になってきたので、lintツールを入れてみようと思いました。

eslint-plugin-vue

Vue公式でESLintのプラグインが公開されていた。

これを導入してみる。

$ npm i -S eslint eslint-plugin-vue eslint-config-vue

で .eslintrc.js を用意する。

  • .eslintrc.js
module.exports = {
    "extends": "vue",
};

あ、こんだけで良いんだ。さてlint実行。

対象を src/ で指定するとJSファイルしか見てくれないので、 src/* にして *.vue も対象に含める。

$ ./node_modules/.bin/eslint src/*

/my/impressive/path/08-vue-lint/src/App.vue
   8:40  error  Extra semicolon                                    semi
  11:3   error  Expected indentation of 2 spaces but found 1 tab   indent
  12:4   error  Expected indentation of 2 spaces but found 2 tabs  indent
  13:3   error  Expected indentation of 0 spaces but found 1 tab   indent
  13:4   error  Unexpected trailing comma                          comma-dangle
  14:3   error  Extra semicolon                                    semi

/my/impressive/path/08-vue-lint/src/main.js
   1:27  error  Extra semicolon                                    semi
   2:29  error  Extra semicolon                                    semi
   3:14  error  Extra semicolon                                    semi
   5:33  error  Extra semicolon                                    semi
…

✖ 70 problems (70 errors, 0 warnings)

うは、なんかいっぱい言われてる。

自動修復

ESLintの機能だけど、 --fix を付けると簡単な(機械的に変換できる)書式エラーは自動的に修正してくれる。ファイルはGitで管理してるから機械変換しても怖くはないでしょう?

$ $ ./node_modules/.bin/eslint src/* --fix

/my/impressive/path/08-vue-lint/src/App.vue
   8:40  error  Extra semicolon                                    semi
  11:3   error  Expected indentation of 2 spaces but found 1 tab   indent
  12:4   error  Expected indentation of 2 spaces but found 2 tabs  indent
  13:3   error  Expected indentation of 0 spaces but found 1 tab   indent
  13:4   error  Unexpected trailing comma                          comma-dangle
  14:3   error  Extra semicolon                                    semi

/my/impressive/path/08-vue-lint/src/MyTitle.vue
   6:35  error  Extra semicolon                                    semi
   9:3   error  Expected indentation of 2 spaces but found 1 tab   indent
   9:17  error  Missing space before function parentheses          space-before-function-paren
…

✖ 51 problems (51 errors, 0 warnings)

エラーが70件から51件に減った。 *.js は全部自動で直してくれたけど、 *.vue はまるまる残ってる感じだ。

ESLintとしてはJSファイルじゃないものは対応しない方針の様子。まあそうだね。Stack Overflowでも「無理だよ☆」という回答だ……。

さてどうしたものか

JS部分だけ取り出してうまいことやれば自動変換で全て丸く収まりそうなんだけどなー。手作業で直して確認するより、手作業で自動変換できる形にして変換して戻す、みたいな形が好み。

自分の場合はVim使ってるので、こんな感じでJS部以外をコメントアウトしました。 <style> の中身には対応できないけど、今回はまだ書いてないからこれで良いや。

:g/^\s*</norm 0i///

で拡張子を変えまして。

  • App.js
///<template>
/// <div class="container">
///     <my-title></my-title>
/// </div>
///</template>

///<script>
    var MyTitle = require('./MyTitle.vue');

    module.exports = {
        components: {
            MyTitle
        },
    };
///</script>

さあどうだ。

$ ./node_modules/.bin/eslint src/* --fix
  • App.js
// /<template>
// /    <div class="container">
// /        <my-title></my-title>
// /    </div>
// /</template>

// /<script>
var MyTitle = require('./MyTitle.vue')

module.exports = {
  components: {
    MyTitle
  }
}
// /</script>

あーインデント変わっちゃったな。まあこんなもんか。ではコメントアウトを解除してファイル名を戻して。

:g/^\/\/ \//norm 4x

別にインデントはこれで怒られないけど、手動で戻しました。結局手動かあ……。

開発環境へ組み込む

ファイル変更を検知して、ビルドの前に検証するようにします。

  • package.json
{
  "scripts": {
    "start": "npm run vue-watch",
    "vue-build": "browserify -t vueify -e src/main.js -o out/app.js ",
    "vue-lint": "eslint src/*",
    "vue-watch": "chokidar src/* -c 'npm run vue-lint && npm run vue-build'"
  },
  "dependencies": {
    "browserify": "^13.1.1",
    "chokidar-cli": "^1.2.0",
    "eslint": "^3.11.1",
    "eslint-config-vue": "^2.0.1",
    "eslint-plugin-vue": "^1.0.0",
    "vue": "^2.1.4",
    "vueify": "^9.3.0",
    "vuex": "^2.0.0"
  }
}

ESLintを直接呼んだ方が、失敗時にnpmの出力が出なくて良いようにも思う。長いんだよなーあれ。

よくわからないこと

自動修正をもっとうまくやりたい

まあ仕方ないかこんなもんか。lintがある状態で書いてれば自動修正いらないし。

lint失敗時の出力を減らしたい

さっき言ったnpmのやつ。こういうの。

$ npm run vue-lint

> @ vue-lint /my/impressive/path/08-vue-lint
> eslint src/*


/my/impressive/path/08-vue-lint/src/App.vue
  45:4  error  Extra semicolon  semi

✖ 1 problem (1 error, 0 warnings)


npm ERR! Linux 4.8.4-200.fc24.x86_64
npm ERR! argv "/my/impressive/path "/my/impressive/path"run" "vue-lint"
npm ERR! node v5.7.1
npm ERR! npm  v3.8.2
npm ERR! code ELIFECYCLE
npm ERR! @ vue-lint: `eslint src/*`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ vue-lint script 'eslint src/*'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the  package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     eslint src/*
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs 
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls 
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /my/impressive/path/08-vue-lint/npm-debug.log

npm通さずに普通に呼ぶと簡単。

$ ./node_modules/.bin/eslint src/*

/my/impressive/path/08-vue-lint/src/App.vue
  45:4  error  Extra semicolon  semi

✖ 1 problem (1 error, 0 warnings)

うーんでもなー。lintだけ呼びたいこともあろうし、同じこと二度書きたくないし。

おしまい

これでだいぶ開発環境が整ってきた気がする。

コード