prettier-plugin-organize-attribute を phpstorm または webstorm で適用できない問題を何とかする

あ…… prettier を設定しているのですが、 phpstorm、webstorm の場合は IDE に標準機能が備わっているため、 prettier の設定ではうまく変更できません。 特に、 この plugin は `svelte` ではそもそも使えません。 そこで `vscode` に移行しようかと考えてインストールし、IntelliJ テーマと keymap プラグインまで全部インストールして、セットアップまで済ませました。 でも、思った以上にやはり今まで使っていたエディターとは違うので、かなり違和感がありました。 この問題をどう解決すればいいんだろう？と考えていたところ、IDE の設定を変更して解決できました。 ```html ``` これまでは、上記の Rearrange code を実行すると、外部から注入される `$$restProps` がいつも先頭に来ていました。 そのため、プラグインもインストールしてみたのですが、どうしてもうまくいかなかったので。 そこで、ただ ```json { "plugins": ["prettier-plugin-organize-attributes"], "attributeGroups": ["^class$", "^(id|name)$", "$DEFAULT", "^aria-"] } ``` attributes plugin のドキュメントに記載されている順序を、自分で設定することにしました。 ![](/storage/media/356/conversions/pwkxXOivRmQ6vsleLoYdf2CfEuDZXeCZPfxmWKPZ-webp.webp) その結果、 ```html ``` 自分の希望する順序で設定されるようになりました。 eslint と prettier を5日近く勉強して設定してみて感じたのは、とても便利な点はあるものの、 習得するのに非常に時間がかかるということです。最新の設定方法もあまり共有されていませんし。 そして特に、`vscode` とは相性がいい一方で、`IntelliJ` では思った以上に問題となるハードルがいくつもあるようです。 それでも、コードの保守性を高め、きれいなコードを書くために、基本的な eslint と prettier の設定は時間がかかってもやっておくのがよさそうです。 とてもおかしなことに、IntelliJ で reformat code を実行すると prettier は一緒に実行されて処理されるのに、 eslint --fix は実行されません。 なんという理不尽なことでしょう……。 そのため eslint で attributes の順序を設定しておくと、eslint --fix で修正したとしても、 再び reformat code を実行すると attributes の順序が変わってしまいます。 ![](/storage/media/357/conversions/OBTU1rSFmHTVHDislGDhsVnKZi8vbCkpVbUzdUWR-webp.webp) ![](/storage/media/358/conversions/0hu8RhtRxvtzxERkZdP4DwQ8jg1rTCAq0DTrOlwR-webp.webp) もちろん、上の画像のように `Run eslint --fix on save` というオプションはありますが、このオプション自体に思った以上に不便な点があります。 いつか eslint --fix も reformat code の実行時に一緒に実行できるようになってほしいです。

ほかの記事