webStormで .svelte の reformat code を実行したときに ✂prettier:content✂ の問題が発生する場合
この問題のせいで何日も苦労したことか分からない。 まず、以前の記事でも説明したが、IntelliJではprettier、eslint、.svelteなどの互換性が思ったほど良くない。 以前のブログ記事では、このオプションを無効にすれば解決すると説明したが、 実際には特定の .svelte ファイルで依然として問題が発生
GGAMI
この問題のせいで何日も苦労したことか分からない。 まず、以前の記事でも説明したが、IntelliJではprettier、eslint、.svelteなどの互換性が思ったほど良くない。 以前のブログ記事では、このオプションを無効にすれば解決すると説明したが、 実際には特定の .svelte ファイルで依然として問題が発生
この問題のせいで何日も苦労したことか分からない。 まず、以前の記事でも説明したが、IntelliJではprettier、eslint、.svelteなどの互換性が思ったほど良くない。
以前のブログ記事では、このオプションを無効にすれば解決すると説明したが、 実際には特定の .svelte ファイルで依然として問題が発生するという、あきれるようなケースがあった。
そこでこの問題を調べてみたところ、IDEエディターとprettierの問題だった。
説明すると、
.prettierrc ファイルを開いたときに
上部にこのようなメッセージが表示されるが、このメッセージで YES を選択すると
このように該当するコードスタイルが Project に変更される……。
prettierの内容がProject Code Styleに適用された後に発生する、追加のエラーだった。
そのため、この値は
以前から使っていた PSR-12 のルールに設定しておかなければならない。
本当にあきれるのだが、
reformat codeを実行すると、prettierの設定値も自動的に一緒に適用される。 これをCode Styleに入れてしまうと、エラーが発生する。
そこで、使っていた PSR-12 の値を .editorconfig にエクスポートし、
prettierが適用された Project の値も .editorconfig にエクスポートしてから、
2つの値をdiffで比較してみたが、✂prettier:content✂ エラーを引き起こしそうな要素は見つけられなかった。
つまり、prettierを使い、reformat codeも問題なく使うには、
Code Style には自分で設定した値をそのまま使い、
.prettierrc ファイルで Use code style based on Prettier for tihs project? を設定してはいけない。
webStorm、phpStormを使うときはphpでしか作業しないので大きな問題はなかったが、（ちなみに .vue も問題なし）
しかし、.svelteを使おうとしたり、prettier、eslintを使おうとしたりすると、悩まされることがあまりにも多いようだ。
さらに、Fix ESLint Problems を
このように Ctrl+Alt+Shift+O にKeymapを設定しておいた。
なぜかというと、デフォルトではPrettierの Reformat wtih Prettier が Ctrl+Alt+Shift+P に設定されているので、O キーに設定した。
とにかく、prettier、eslintと一緒にsvelteをできるだけ使えるよう、IntelliJ IDEエディターを設定した。
大きな問題がなければ、これからはIntelliJでコーディングしようと思う。