背景
私は普段react.js(ts)で開発を行っているのですが、CSS moduleを利用してjsx(tsx)ファイルにスタイルを当てる時に苦しんでいます。
それはclassNameと入力した時にエディタの自動変換でこれが出る!
<div className="">
<p>hoge</p>
</div>
おい!!!
求めているのは{}(カーリーブラケット)なんだよ!!と思いながら
<div className={styles.hoge}>
<p>hoge</p>
</div>
と直してコードを書いていました。
流石に面倒だと思い始めたので解決方法がないか探してみると...
エディタ側でスニペットを設定することで解決できることがわかりました。
今回はその方法を共有します。
本題
注意事項
まず初めに、私はVSCodeを利用しています。そのため、ここで紹介するのはVSCodeでの解決方法なので他のエディタを使っている人はブラウザバックを推奨します。
本当の本題
実際に行うことは3ステップぐらいです。
所要時間は3分です。
Step1. スニペットの編集画面に行こう
Cmd + Shift + PまたはCtrl + Shift + Pでコマンドパレットを開き、検索バーでスニペットと入力してください。
ここで、スニペットの構成を選択すると言語選択の画面が表示されます。
ここで、react(typescript)と入力して
reactならjavascriptreact.json
typescriptならtypescriptreact.json
を選択してください。
Step2. スニペットの編集をしよう
ここからは、javascriptreact.jsonファイルを開いた場合で説明をしていきます。(typescriptreact.jsonを開いていてもやることは変わらないので必要に応じて読み替えながら進めていってください。)
まずjavascriptreact.jsonを開くと以下のような記述がされていると思います。
英語なのでよくわかりませんが、おそらく
prefix:あるスニペットを呼び出すためのトリガー
body:展開・挿入される内容(\$1, \$2 はタブストップ、\$0 は最終的な、\${1:label}, \${2:another} はプレースホルダー)
description:そのスニペットの説明
と書いてあります。(gemini調べ)
{
// Place your snippets for javascriptreact here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}
ここからはこのファイルに記述を追加することで新たなスニペット(今回ClassNameと入力した時にダブルクォーテーションではなく、カーリーブラケットを出す)が使えるようにしていきます。
以下の文章をCtrl + CしてCtrl + Vしてください。
{
"ClassName with Braces": {
"prefix": "className",
"body": [
"className={$1}"
],
"description": "Inserts className with curly braces"
}
}
終わりです。
動作確認
では動作確認をしていきます。
スニペットを追加したらファイルを保存して一度VSCodeを再起動してください。
はい、一番上に出てきてくれないと開発体験が悪いよ!!
って思った人が大半だと思いますのでこのスニペットを一番上に優先表示して終わりたいと思います。
Step3.スニペットを優先表示しよう
ではCmd + ,またはCtrl + ,で設定を開いてください。
そして検索バーにsnippetと入力してください。
この画面でEditor:Snippet Suggestionsをinline→topに変更してください。
するとエディタの予測変換で今作ったスニペットが優先表示されるようになります。
最後に
いかがでしたか？
おまけ
この設定情報をチームで共有したい
この設定をリポジトリ内のファイルに記述して共有を行う方法を紹介して終わります。
リポジトリのルートに以下のようなパスでファイルを作成すれば良いです。
{
"ClassName with Braces": {
"prefix": "className",
"scope": "javascriptreact,typescriptreact",
"body": ["className={$1}"],
"description": "Inserts className with curly braces for the project",
},
}
scopeという項目でこのスニペットを適用させる言語を選択することができます。
同じくスニペットの優先度変更を共有する場合は以下のように記述してください。
{
"editor.snippetSuggestions": "top"
}