Rails 5.1 × webpackerの環境にESLintを導入したお話

f:id:c5meg1012:20171213181323p:plain

みなさん、こんにちは、エンジニアの望月（@c5meru）です。
Railsをはじめて1年ちょっと経ったので、「メタプログラミングRuby」を読むなどしまして、改めて言語仕様を学び直したりしています。設計やリファクタリングも、もうちょっと上手になりたいです！

さて、私はLintおばさんなので、今回もブログでLint導入のお話をさせていただきたいと思います。
今日は Rails 5.1 × webpacker の環境に、ESLintを導入したお話です！

1. ESLintのインストール

まずは、yarnでESLintのインストールを行います。
以下のコマンドで、ESLintと依存パッケージをインストールします。

$ yarn add eslint babel-eslint eslint-plugin-node eslint-plugin-import --save-dev

eslint-plugin-node と eslint-plugin-import については、現在弊社でnode modulesと ES modulesが混在しているため、両方入れています。。

2. .eslintrc.jsの設定

次に、設定ファイルである .eslintrc.jsを作成し、プロジェクトルートに配置します。
弊社の .eslintrc.jsは、おおむね以下のような内容になっています。

module.exports = {
  env: {
    browser: true
  },
  extends: [
    // airbnbのルールを導入、Reactを入れていない場合は「-base」アリの方
    'airbnb-base',
    'plugin:node/recommended'
  ],
  plugins: [
    'node'
  ],
  globals: {
    // 指定したグローバルオブジェクトに対する警告を除外する
    '$': true,
    'google': true,
    'ga': true,
  },
  'rules': {
    // 除外したルール
    // 開発環境ではdebuggerを許容する
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,

    'no-alert': 0,
    'prefer-destructuring': 0,
  }
}

3. .eslintignoreの設定

.eslintを行いたくないディレクトリがある場合、それらを除外するために.eslintignore を作成し、プロジェクトルートに配置します。
.eslintignoreには、除外したいディレクトリを書いておきます。

app/javascript/vendor/*

4. ESLintの実行

eslintコマンドで実行できます。

$ ./node_modules/.bin/eslint --ext .js app/javascript

上記のコマンドでは、./node_modules/.bin/eslint で、動かすeslintがあるディレクトリを指定し、
--ext .jsでlintをかけるファイルの拡張子を指定し、app/javascriptでlintをかけるディレクトリを指定しています。

5. ESLintの主なルール

ESLintのルールについてはこちらのドキュメントや

eslint.org

以下の記事などで参考にすることができます。

qiita.com

この記事でも、いくつか取り上げて説明してみたいと思います。

camelcase

変数や関数名はキャメルケースで命名・記述しましょう。

func-names

関数には名前をつけるようにしましょう。

function () { // 名前がないのでダメ
    // なにか処理
}

function hoge() { // これはOK
  // なにか処理
}

no-alert

alert, confirm, promptは使わないようにしましょう。
→弊社では許容しており、設定ファイルで警告を除外しています。

no-new

参照や格納のない

new Hoge();

のような記述ではなく、

var hoge = new Hoge();
Hoge();

のように記述しましょう。

no-param-reassign

関数のパラメータの中身を直接変更してはいけません。

function hoge(fuga) {
  fuga = 1;  // これはダメ
}

function hoge(fuga) {
  a = fuga;  // これはOK
}

no-var

varではなくletかconstを使って宣言しましょう。

prefer-destructurin

分割代入を優先して使いましょう。
→弊社では許容しており、設定ファイルで警告を除外しています。

6. CIツールで動くようにする

ESLintが手元で動くようになったら、今度はCIツールで動くようにします。
弊社ではwerckerを使っており、ブランチにpushするたびにCIが走るようになっています。
そのフローの中にESLintも含めました。

7. 以前導入したcoffeelintを削除する

CoffeeScriptは、以前行った大手術により役目を終えたので、同時にcoffeelintも不要になりました。
coffeelintに関係する記述は、ESLintのものに置きかわっていることを確認して、取り除いてあげました。

さいごに

以上がESLint導入の流れになります。
新機能がどんどん追加されて、JavaScriptの方も少しずつ複雑になってきました。
ですので、Lintに準ずることも、どんどん自動化させて、効率的に開発をすすめていく所存です(｀・ω・´)

エンジニアを募集しています

Ruby on Railsでの開発ができる方、募集しています！
詳しくは以下を見てみて下さい(｀・ω・´)

www.wantedly.com

rista.job-list.net

Rista Tech Blog

株式会社リスタの技術？ブログ