WEMOブロックエディター完全対応のWordPressテーマ「SWELL」をリリースしました!コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。Codeで使用するための手順をメモしていきます。Codeに導入するのにつまづいた点まず最初に、自分が何につまづいて、結局それがどういう解釈で落ち着いたかを述べておきます。本当に名前を聞いたことくらいしかないレベルで導入に踏み切ったので、わけのわからないことだらけでした...。Stylelintの関係性がそもそもよく分かっていない。そのため、併用する意味もよくわかっていない。上記3点が、とても困惑してしまった原因だったかと思います。npmでインストールするのか、エディターの拡張機能としてインストールするのかまず最初の大きな疑問でした。installしている記事もあれば、エディタ側でプラグインをインストールしている記事もあれば...。「ど、どっちでやればいいの...!?」と、初期段階で足踏みしてしまいました。結論から言うと、今回の私の方法では、Prettierだけ使うなら拡張機能でインストール3つを導入するならPrettierの拡張機能は不要で、npmインストールのみ。インストールとなりました。Code専用の拡張機能(プラグイン)のインストールも行なっていきます。コードフォーマッターと呼ばれる、コードを自動整形してくれるツールの一種。JSやCSSなど、複数の言語に対して使えるようです。設定したルールに基づいてフォーマットしてくれるだけのもので、構文のチェックまでは行わないのが特徴。設定しているルールに違反したコードを検知して警告してくれるツールです。Stylelintは構文チェックだけでなく、そのエラーを解決するようにコードを自動整形してくれる機能も含まれています。了じゃぁPrettierいらなくない?って思ったんですが、どうやら、PrettierはESLintなどよりも手軽で確実なコード整形ができるそうなのです。~ESLintとの違いを理解して併用する~そのため、ESLintやStylelintを補完するような形でPrettierを併用する使い方が流行っているそうです。CodeにPrettierなどを導入していく手順を説明していきます。Codeの拡張機能をインストールするだけでOKですが、今回はnpmでインストールします。プロジェクトファイルに移動して、以下のコマンドを叩いてください。prettierPrettierの設定ファイルについてPrettierがインストールできたら、プロジェクトフォルダ直下にPrettierの設定ファイルを作成しておいてもいいでしょう。ESLintやStylelintとも合わせて設定ファイルを作っていきますので、とりあえずこの時点では作らなくても大丈夫です。JSONやJSなど、いくつかの形式で作成することができるのですが、今回はJS形式で作成してみます。(JSだとコメントつけれるので...。).prettierrc.jsというファイルを作成し、以下のようにルールを設定しておきましょう。};どんな設定項目があるかは、Prettier公式ページのOptionsページをご覧ください。Codeに導入し、Prettierと連携する次に、ESLintを導入してPrettierと連携させていきましょう。Codeのプラグインをインストールします。関する設定がいくつか使えるようになっています。「eslint」と検索してみてください。Enable」いう項目にチェックを入れておきましょう。Save」設定はESLintプラグインのアップデートにより非推奨となり、設定画面からなくなりました。代わりに、デフォルトで保存時のFixはオンとなっているようです。Code側のプラグインに関する設定はここまででOKです。Prettierで行うので、別のフォーマッターに干渉されないようにしておきましょう。Enableのチェックを外しておきます。Code用のプラグインです。npmコマンドもしくはyarnコマンドを使ってeslint本体のパッケージをインストールしましょう。eslintこれで、ESLintの導入は完了です。ESLintの設定ファイルを作成するESLintは設定ファイルがないと動かないので、とりあえず適当に作成してみましょう。複数の形式でサポートされています。JS形式の.eslintrc.jsを作成します。},};設定ファイルを設置したら、試しにjsファイルも作成してルールに反したコードを書いてみましょう。ESLintのエラーメッセージ上記画像のように、eslint(違反しているルール名)というエラーメッセージが出てくればOKです。(保存しなくてもエラーがでてきます)ファイルを保存し、上記のエラーが解決できれば無事にESLintを導入できています。(ルールによっては、自動修正できないものもあるのでいくつか試してみるといいかもしれません。)ESLintとPrettierを連携させるESLint自体の導入ができたら、Prettierと連携させていきましょう!...とその前に、注意しなくてはいけないことがあります。実は、PrettierとESLintを連携させるには2種類の方法があるんですよね。詳しくは後述しますが、eslint-plugin-prettierというパッケージを使う方法と、prettier-eslintというパッケージを使う方法があります。今回は、eslint-plugin-prettierで連携させる方法をとっていきます。ESLint上でPrettierを動かすためのプラグイン。ESLintとPrettierで競合するルールを無効にするための構成ファイル。詳しくは、Prettier公式ドキュメントでのESLintとの統合に関する説明をご覧ください。追加パッケージがインストールできたら、.eslintrc.jsを以下のようにします。['plugin:prettier/recommended'],}これでとりあえず、Prettierとの連携は完了です。['plugin:prettier/recommended'],の部分です。他の設定もextendsする場合は、'plugin:prettier/recommended'が最後にくるように注意してください。}}eslint-config-prettierに関する注意eslint-config-prettierの説明で、「Prettierと競合するルールを無効にする」とありますが、Prettier側とESLint側で設定ファイルの中身が矛盾しないように注意しましょう。PrettierとESLintで相反する設定を書くと...例えば、Prettierの設定で「シングルクォーテーションで統一する」という記述を書いたのに、ESLintで「ダブルクォーテーションで統一する」というルールを書いてしまうと矛盾しますよね。この場合、保存する度にお互いのルールでフォーマットし直すことになってしまいます。設定ファイル内の「矛盾する設定」を無視してくれるというわけではないみたいです。【注意】PrettierとESLintと連携する方法は2つある!先ほど述べた通りですが、PrettierとESLintを連携させるには2種類の方法があります。Prettierの処理後にESLintに渡すという2パターン。どちらもPrettierのGithubアカウントに掲載されているものですが、今回は前者の「ESLintからPrettierを実行する」という連携方法を選びました。いくつかの記事を漁ってきた方は、prettier-eslintというパッケージを紹介している解説記事も見かけたのではないでしょうか。この違いによって混乱してしまったのですが、以下の記事が参考になりました。ESLintと併用する場合こちらの記事によると、PrettierとESLintと併用する場合、2つの方法がある。(中略)ESLintがPrettierを実行するか、PrettierがESLintに渡すか。ほとんど変わらないが、後者だと--fixなしでチェックだけしたいってのができない。作者はもう使ってないとのことなので、現実的にはeslint-plugin-prettier一択。Codeに入れなくていいんですよね。ESLintの実際の設定例さて、紹介した内容だとPrettierと連携させただけなので、もう少し実践的な設定例を紹介しておきます。ESLintの推奨設定をベースにする場合extendsに'eslint:recommended'を指定してあげると、ESLintが用意してくれているおすすめの設定を一括で指定することができます。ESLintの推奨設定をベースにする};ただし、これだけだとES6から使えるようになったconstなどのキーワードに対してエラーがでます。constにエラーが出る様子これを回避するには、envという項目で環境設定を行います。trueを指定してあげる必要があったりします。Guide」のルールに則った設定をすることも可能です。追加でeslint-config-googleというパッケージをインストールします。eslint-config-googleこれによってGoogleのコーディング規約に則った設定ファイルを取得できるので、それをextendsに指定してあげます。Google様に従う};このようにすると、Google様に従わないクソコードに対してエラーを吐き出してくれるようになります。以下の画像では、関数を定義しているのにJSDocコメントがないことに対してお怒りの様子です。了エラーメッセージを読むとなんで怒られているか教えてくれていますね。基本はGoogle様に従いたいけどJSDocはどうしても書きたくない!個人開発だから特別に許して!という場合は、require-jsdocのルールをオフにしましょう。私が実際に設定している内容をご紹介しておくだけです。設定も必要なので、追加でいくつかのパッケージをインストールします。JSXとかでエラー出るのを回避。},};自分は今のところ、こんな感じです。Codeに導入してから、Prettierと連携させていきましょう。ESLintとほぼ同じ手順になります。Codeのプラグインをインストールします。関する設定がいくつか使えるようになっているので、「stylelint」で検索してみてください。Enable」にチェックを入れておきましょう。Save」という項目が追加されているので、こちらにもチェックを入れておきましょう。Codeプラグインのインストールだけでは不十分なので、Stylelint本体のパッケージをインストールしましょう。stylelintStylelintの設定ファイルを作成するStylelintにも設定ファイルが必要なので、とりあえず適当に作成しておきましょう。JS形式の.stylelintrc.jsを作成します。}};設定ファイルを設置したら、試しにcssファイルを作成して上記のルールに反したコードを書いてみましょう。stylelintのエラーメッセージこのように、stylelint(違反しているルール名)というようなエラーメッセージが出てくればOKです。ファイルを保存した時に上記のエラーが解決できれば無事にStylelintの導入は完了です。(ESLintと同様、ルールによっては、自動修正できないものもあるのでいくつか試してみるといいかもしれません。)StylelintとPrettierを連携させるESLintと同様、Prettierとの連携方法は2パターンあります。stylelint-prettierを使ってStylelintからPrettierを呼び出すprettier-stylelintを使ってPrettierからStylelintを呼び出すという2つです。PrettierのGithubアカウントに掲載されているのはstylelint-prettierの方ですね。Save」機能がなかったので泣く泣くprettier-stylelintを使うしかありませんでした。今ではstylelint-plusプラグインがありますので、stylelint-prettierを使う方法で説明していきます。stylelint-config-prettier次に、Stylelintの設定ファイルでprettier-stylelintのconfigファイルを読み込みます。['stylelint-prettier/recommended'],};これでとりあえず、PrettierとStylelintの連携ができました。unicode-bomエラーになるようです。Codeへインストールしましょう。】を選択してインストールできます。追加した設定の警告メッセージ今はまだこの方法でPrettierと連動させることができるんですが、そのうち利用できなくなる可能性があります。そのことも踏まえると、stylelint-prettierを利用するのが無難ですね。StylelintをSCSSに対応させる通常のStylelintだけではSCSSに対応していないので、@includeなどにエラーが出てしまいます。これを回避するには、stylelint-scssというパッケージを使います。してから、自分流の詳細設定を追加することができます。スタンダードな設定をベースにする特にこだわりがなければ、「stylelint-config-standard」を使えば良さそうです。(Googleのコーディング規約も含まれているっぽい。stylelint-config-standardStylelintの設定は以下のように。}};WordPress開発者であれば、stylelint-config-standardではなくstylelint-config-wordpressでもいいでしょう。プロパティの並び順も自動で整える(ABC順)さらに、プロパティの並び順(宣言順)も自動で整えてもらうようにしておくと、超便利です。プロパティの並び順を整えるにはstylelint-orderというパッケージが必要なので、インストールしましょう。stylelint-order「プロパティをABC順に並べる」というルールでよければ、設定も簡単です。}};order/properties-alphabetical-orderをtrueにするだけでABC順に並びます。プロパティの並び順を自動で整える(関連順)ABC順ではなく、プロパティごとに順番を決めたい場合は別のアプローチが必要です。2でインストールしたstylelint-orderだけでも並び順を詳細に指定できますが、一から自分で指定するのは厳しいので、他の人が作った設定ファイルをインストールするのがおすすめです。今回は、「stylelint-config-rational-order」という設定ファイルをextendsして使うことにしました。}}このように、外部モジュールを使う場合は、plugins:の'stylelint-order'rules:のorder/~~~を指定しなくてもOK。最後に、私が実際に使用している設定を紹介して終わりにしようと思います。serifを必須にするか。object-fitでエラーださないようにする。この他にも本当は'number-leading-zero'ルールを'never'にして、0.5emなどを.5emに統一したいのですが、Prettierではこれに該当するオプションがないんですよね。一度目のfixでは.5emの部分にエラーが残ったりして挙動が気持ち悪かったので、妥協しました...。ESLintやStylelintなどの設定がうまく反映されない時はたまに設定をいじり直すと指定したルールが適用されない時があります。Codeを再起動するとちゃんと読み込んでくれることがほとんどなので試してみてください。Stylelintを実際に使ってみて...初めて導入してから、数ヶ月ほど経過しました。たしかに便利ではあるのですが、そんなに時間をかけてまでPrettierとLint系を連携させるべきかどうかは微妙なところだなと...。Prettierと連携させることでLintとうまく噛み合わない部分もでてきてしまうので、Lint系だけで妥協してもいいんじゃないかなと個人的には思っています。了ただ、Prettierをオフにすると手動で整えないといけないケースが増えてしまうのも確かなんですよね..いっそのこと細かいことは気にせずにPrettier一本でいくのが一番楽かもしれません。order設定が神なのでStylelintは捨てきれないし、Gutenbergの開発環境にESLintがくっついてくるので、そっちも活用したい。いうことで結局、全部使っています。笑その後、さらに色々検討した結果、ESLintとPrettierの連携はオフにして運用することにしました。