【PHPStorm】className の自動補完を {} から “” に変更する【React】

className はダブルコーテーションで入力したい！

みなさん、こんにちは。どんぶラッコです。

本日は小ネタですが、地味に助かる設定をご紹介します。

PHPStorm や WebStorm など、 IntelliJ 製品を使ってReactを開発する方も多いと思います。

その時に困るのが className の補完。

補完をしてくれるのはありがたいですが、デフォルト設定のままだと波括弧 {} が補完されてしまいます。

className はダブルクォーテーションで、 onClick などは波括弧で表示してくれる、そんな便利な設定ないかな…と思っていたら

ありました。

ということで、その設定方法をご紹介します！

PHPStormから Preferences… を選択します。

Editor > Code Style > HTML の順に選択し、 HTML設定画面内の Other タブを選択します。

そして、 Add for JSX attributes の設定を Based on type に変更し、 OKボタンを押下します。

これで設定完了です！実際に className や onClick を入力して試してみてください。

いかがだったでしょうか？簡単でしたね！他にも便利設定があったらぜひコメントで教えてください♪