BLOG

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

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

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

やりたいこと

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

参考:WordPress JavaScriptコーディング規約

大まかな手順

  1. コマンドを使ってプロジェクトフォルダにnpmパッケージを色々インストールする
  2. Atomの環境設定よりlinter-eslintパッケージをインストールする
  3. jsonファイルの作成、コーディングルールの宣言
  4. 実際にコードを書く

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

ターミナルよりプロジェクトフォルダにnpmパッケージを色々インストールする

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

  • eslint
  • eslint-config-wordpress

の2つです。

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

Atomの環境設定よりlinter-eslintパッケージをインストールする

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

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

jsonファイルの作成、コーディングルールの宣言

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

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

.eslintrc.jsonの新規作成

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

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

完成!

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

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

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

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