Atomでeslintを使いWordPressのコーディング規約に沿って自動的にコード整形するやり方

2019年11月5日

私はエディタにAtomを使ってます。
コーディングを行うとき、つい抜けてしまうセミコロンや括弧閉じなど、実際にブラウザでエラーを出す前に自動的に整形してくれるeslintやstylelintは欠かせません。

Atomでeslintを使用し、WordPressのコーディング規約に沿ったコードに自動整形してくれるよう、設定を行ってさくさくキレイなコードを書いて行きましょう。

やりたいこと

Atomで書いたJavaScriptコードを、ファイル保存したときに自動的にWordPressのコーディング規約に沿った形式に整形する

それでは一つずつ説明していきます。

まずはターミナル（Windowsだとコマンドプロンプト）でnpmパッケージをインストールします。インストールするパッケージは、

の2つです。

こんな感じで！
私はプロジェクトごとに設定したいのでインストール時に–save-devを入れます。

次にAtomの環境設定内、「インストール」から、検索ボックスに「linter-eslint」を入力してパッケージを検索、インストールします。

私もうインストールしちゃってますのでアンインストールボタンしか出てませんがこのパッケージです。
これがファイルを保存したときに自動的にコードを整形してくれる嬉しいパッケージとなっています。

お次はeslinterをどのルールで使用するか？を決めるための作業。これを行うことでWordPressのコーディング規約に限らずいろいろなルールでコードを整形することができます。

チームで開発する場合、インデントやスペースの利用の仕方など、このファイルにかかれてある設定を共有すれば統一の取れたコードを書くことができるというわけですね。素晴らしいです。

プロジェクトフォルダ内に.eslintrc.jsonファイルを作成し、以下の様に設定します。

parserOptionsはgulpfile.jsでパースエラーが出たため追加しています。

ココまでで設定は完了です。
自分で書いたJSファイルを開いてみます。ページに組み込んだプラグインの設定について書いてありますが、

左端の赤丸がWordPressのコーディング規約に反している、エラーが出ている箇所になります。カッコの前後にスペースが入っていたり、入ってなかったりとバラバラしていますね。
これを⌘＋Sで保存すると・・・

こんな感じで綺麗に整形してくれます。
カッコの中もスペースがちゃんと入っています。
これでプログラム内容に集中して開発することができました。

以上、Atomエディタでeslintを使用してWordPressのJavaScriptコーディング規約に沿った形に整形する設定のやり方でした。