最近GutenbergのカスタムブロックプラグインにESLintを入れるPR出したので、その時の覚書です。

参考にしたもの

Gutenberg-examplesというこれからカスタムブロックを作ってみたい方向けのサンプルプロジェクトが公式で用意されています。

よくみると、この中にしっかりESLintの設定も記述されていましたので、これを引用します。

「理屈はいい。動くものを」という人向け

要は先ほどのサンプルから必要なファイルをぶっこ抜けばいいわけです。

ということで、以下のファイルをコピーしましょう。

• https://github.com/WordPress/gutenberg-examples/blob/master/package.json
• https://github.com/WordPress/gutenberg-examples/blob/master/.eslintignore
• https://github.com/WordPress/gutenberg-examples/blob/master/.eslintrc.js

package.jsonについては、必要なパッケージのリストとスクリプト部分だけとってくる方法でもOKです。

必要なパッケージ

短縮版を見れば１発ですが、以下のパッケージが必要です。それぞれざっくり横に書いたようなイメージで見ておけば良いでしょう。

• eslint – 本体
• eslint-config-wordpress – WordPressプロジェクト向けのconfig
• eslint-plugin-jsx-a11y – React (JSX) のアクセシビリティ周りに関するプラグイン
• eslint-plugin-react – Reactに関するプラグイン
• eslint-plugin-wordpress – WordPressのコーディング規約に関するプラグイン

npmでまとめてインストールするのが効率的です。

$ npm i -D eslint eslint-config-wordpress eslint-plugin-jsx-a11y eslint-plugin-react
$ npm i -D git://github.com/WordPress-Coding-Standards/eslint-plugin-wordpress.git#1774343f6226052a46b081e01db3fca8793cc9f1

eslint-plugin-wordpressの取得先

現在npmにリリースされているバージョンはv0.1.0です。そしてこのバージョンではESLintが上手く動作しません。

$ npm run lint

> @ lint /Users/user/Local Sites/snowguten/app/public/wp-content/plugins/snow-monkey-awesome-custom-blocks
> eslint .

ENOENT: no such file or directory, scandir './rules'
Error: ENOENT: no such file or directory, scandir './rules'
    at Object.fs.readdirSync (fs.js:875:3)
    at module.exports (/Users/user/Local Sites/snowguten/app/public/wp-content/plugins/snow-monkey-awesome-custom-blocks/node_modules/requireindex/index.js:18:20)
    at Object.<anonymous> (/Users/user/Local Sites/snowguten/app/public/wp-content/plugins/snow-monkey-awesome-custom-blocks/node_modules/eslint-plugin-wordpress/index.js:20:24)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    at Module.load (internal/modules/cjs/loader.js:589:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
    at Function.Module._load (internal/modules/cjs/loader.js:520:3)
    at Module.require (internal/modules/cjs/loader.js:626:17)
    at require (internal/modules/cjs/helpers.js:20:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ lint: `eslint .`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2018-08-22T02_27_21_330Z-debug.log

Issueをみる限りでは最新版リリース予定はある様子ですが、v0.1.0が落ちてくる様子であれば、Gutenberg-exampleのようにGitHubから直接とるようにしましょう。

ESLintrcの作成

続いてはLintの設定ファイルを作ります。とはいえexampleの設定をみると、かなりいろいろな設定が記述されていますので、自力で組むのはあまり現実的ではなさそうです。

ということで以下のような形でとってきてしまうのが手軽です。

$ wget https://raw.githubusercontent.com/WordPress/gutenberg-examples/master/.eslintrc.js

コマンドの実行

あとは実際にESLintが動くことを確認するだけです。test.jsと言う名前でサンプルのファイルを作ってみましょう。

$ touch test.js
$ vim test.js
const { __, setLocaleData } = wp.i18n;
const { registerBlockType } = wp.blocks;

const blockStyle = {
	backgroundColor: '#900',
	color: '#fff',
	padding: '20px',
};

setLocaleData( window.gutenberg_examples_01_esnext.localeData, 'gutenberg-examples' );

registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
	title: __( 'Example: Basic (esnext)', 'gutenberg-examples' ),
	icon: 'universal-access-alt',
	category: 'layout',
	edit() {
		return <div style={ blockStyle }>Basic example with JSX! (editor)</div>;
	},
	save() {
		return <div style={ blockStyle }>Basic example with JSX! (front)</div>;
	},
} );

ESLintは./node_modules/.bin/eslintから実行できます。

./node_modules/.bin/eslint test.js 

/Users/user/develop/sandbox/test.js
  22:5  error  Newline required at end of file but not found  eol-last

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

動きましたね。エラーが出た場合、各行の最後にあるワードでググるとルールの詳細をみることができます。

今回の例では、eol-lastとありますのでそれでググってみましょう。するとESLint公式のドキュメントが出てきます。

ドキュメントによると、「ファイルの最後は改行しろ」という意味のようです。

ESLintのエラー内容については、Qiitaにざっくり翻訳されたものもありますので、そちらも参考にしてください。

自動で修正する

ESLintには--fixオプションがあります。これを使うことで、インデントや改行といった簡単なコーディング規約違反については自動で修正してくれます。

$ git add ./ && git commit -m "diffをみるためにコミット"

# --fixオプションをつけて実行
$ ./node_modules/.bin/eslint test.js --fix

# 差分をみる
$ git diff
diff --git a/test.js b/test.js
index 053f183..0bcf92f 100644
--- a/test.js
+++ b/test.js
@@ -19,4 +19,4 @@ registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
        save() {
                return <div style={ blockStyle }>Basic example with JSX! (front)</div>;
        },
-} );
\ No newline at end of file
+} );

eol-lastで指摘されていた内容が修正されています。関数名のフォーマットなど、自動で修正するとエラーが発生しそうなものについてはfixされませんので、先に--fixでチェックしてからて出直すと効率的です。

npm scriptsで簡単実行

最後にESLintの実行を簡単にできるようにしましょう。package.jsonに以下のようなコードを追加します。

	"scripts": {
		"lint-js": "eslint .",
		"lint-js:fix": "eslint . --fix"
	},

これで./node_modules/.bin/eslintと長いコマンドを入力せずに、npm run lint-jsでESLintが実行できるようになります。

もしwebpack.config.jsやpostcss.config.jsのようなファイルまで規約チェックされるのは困るという場合は、.eslintignoreファイルに除外ファイルのパスを指定してあげましょう。