フロントエンジニア入門 ESLintでコードを整えよう

この記事の対象者

ある程度HTMLやJavaScriptについては学習できたが、実際の現場でどのような開発環境が使われているのか知らない、より実践的な開発を知ってスキルアップしたい、という方におすすめです。

今回はコードのフォーマット方法についてです。

現場では様々な人が並行して開発をしますが、その時に人によってコードの書き方が異なると読み難かったり、誤解を産む原因になります。

ESLintというツールを使って、フォーマットの設定を決めて、自動でフォーマットされる環境をつくってみましょう。ESLint も現場ではメジャーな技術なのでぜひ習得しましょう。

前提

  • HTMLとJavaScriptがある程度分かる
  • Node.jsをインストールすることができ、npm がなんとなく分かる

ゴール

  • ESLintを設定してフォーマットを決め、それに従って自動でコードをフォーマットする仕組みをつくる

手順

新しいプロジェクトを作成する

npm init を使って新しいプロジェクトを初期化します。

こちらのプロジェクトの作成を参照してください。

必要なモジュールのインストール

ESLintをインストールします。

npm install -D eslint

ESLintの設定をする

フォーマットのルールは .eslintrc.json ファイルを作って、その中に記述します。

{
  "extends": ["eslint:recommended"],
  "plugins": [],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2015
  },
  "env": {"browser": true},
  "globals": {},
  "rules": {
    "semi": ["error", "never"],
    "quotes": ["error", "single"]
  }
}

ここでは各設定に対して一部だけ説明をします。

extends の eslint:recommendedは以下のURLのチェックマークがついているルールが適用されます。

https://eslint.org/docs/rules/

また、rules の semi は、行末のセミコロンはなしにする、もしあった場合はエラーにする、という意味です。

quotes は、文字列を囲む際はシングルクォートとする、もし違う場合はエラーとする、という意味です。

package.json に scripts を追加する

package.json に format という script を追加します。これを実行することで src 以下のすべてのファイルに対して ESLint がフォーマットをかけます。

  "scripts": {
    (略)
    "format": "eslint --fix src/**"
  },

フォーマットしてみる

src/index.js を作成し、以下のコードを記述します。

import {add} from "./helper/add"

const app = document.getElementById('app');
app.innerText = add(100, 306)

このコードでは一行目の import 文でダブルクォートが使われています。また、三行目では行末にセミコロンがついています。

これらは先ほど設定したESLintの設定に反するものです。

ESLintの設定にしたがってフォーマットしてみます。

以下のコマンドを実行します。

npm run format

コマンドが完了すると、index.js の中身が以下のようにフォーマットされていることを確認しましょう。

import {add} from './helper/add'

const app = document.getElementById('app')
app.innerText = add(100, 306)

まとめ

以上でESLintの基本的な使い方は終了です。

git でコミットする際に自動でformatを走らせる方法もあるので是非調べてみると良いと思います。

もし配属された現場で、人によってコードの書き方が違ってレビュー時に争いが起きるようであれば、ESLintで共通認識のフォーマットを作ってしまえば平和が訪れるでしょう!