1. ホーム
  2. コラム
  3. リアルタイムに構文チェックをして作業効率を上げる!Linterツールの設定と使い方!

リアルタイムに構文チェックをして作業効率を上げる!Linterツールの設定と使い方!

Webガーデン仙台のフロントエンジニア、佐々木です。

今回は、フロントエンドで使用するHTML,CSS,JavaScriptなどの構文解析をリアルタイムに行えるLinterツールの紹介をしたいと思います。
普段、軽量なエディタではなく、IDEでコードを書く人には不要かと思いますが、最近人気のあるAtom, Sublime Text, Bracketsなどには構文解析の機能は備わっていないので、使う場合はプラグインと実行スクリプトを自分で設定して動かすことになります。

ここでは必要なもののインストールや、設定の手順、実際に動かしてみたサンプルを紹介していきます。

導入

テキストエディタはAtomを使用しています。
Sublime TextやBracketsでも使用可能ですがインストールするプラグインに差異があるので、
適宜読み替えて設定する必要があります。
また、今回使用するlinter-eslintはプロジェクト毎にしか使えませんので、1ファイルで使用する際には注意が必要になります。

Atomプラグインのインストール

以下をAtom内で設定していきます。

  1. Settings > Install > 「Linter」と検索 > Linterプラグイン をインストールします。
  2. 今回、Linterで構文解析する言語をJavaScriptとするので、linter-eslintをインストールします。
    (構文解析する言語の数だけプラグインが必要になります)

Linter実行スクリプトのインストール

Atom内で設定しただけではLinterを実行するスクリプトがない状態なので、
リアルタイムに構文チェックを行えません。
次は、Linterの実行スクリプトをインストールします。

  1. eslintをコマンドラインからインストールします。(node.js環境が必須です)
    インストールした後、動作するか確認します。

    $ npm i -g eslint eslint-config-xo
    $ eslint -v
    v2.2.0

プロジェクトの作成

  1. eslintを実行したいプロジェクトを作ります。
    1ファイル毎に気軽にチェックはできませんが、プロジェクト全体としてのルールを統一したいときは重宝します。

    $ mkdir {project dir}
  2. プロジェクトにnpm, eslintを設定します。
    eslint –initではどの設定にするかを聞かれますので、適宜選択してください。
    今回はgoogleを選択して進めています。

    $ cd {project dir}
    $ npm init
    $ eslint --init
  3. linter-eslintプラグインを設定します。
    Settings > Packages > linter-eslintで下記のように設定します。

    Linter-eslint

    ポイントは一番下の項目の「Use global ESLint installation」で、先ほどインストールしたeslintはグローバルとしてインストールしたので、この項目を設定する必要があります。
    ローカルインストールした場合はこのチェックは外します。

これで設定は完了しましたので、JavaScriptファイルを作成してコードを書き始めるとLinterが動作します!
また、ここではあまり説明していませんが、細かい設定は.eslintrcファイルに記述します。
プロジェクトで必要な項目や不要な項目をカスタマイズできます。

使い方

設定が終わるまで使用イメージが湧きづらい部分があると思うので、
実行している様子をキャプチャしてみました。
デフォルトの設定だとカンマの後にスペースが必要だったり、
定義した関数は必ず使用していなければならなかったりしていて、
フォーマットの統一を図りやすいと思います。

linter-eslint-capture

まとめ

これでリアルタイムに構文解析できるようになりました!
ルールを共有できてチームでも使えるので、コードの質を保つには有効かと思います。

■コラム執筆者
第1ビジネスユニット アカウントサービス第12ユニット 佐々木 隆弘

RSS