フロントエンジニア入門 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で共通認識のフォーマットを作ってしまえば平和が訪れるでしょう!
最近のコメント