VScodeで連想配列を定義する時に勝手にダブルクォートが消去されてしまう

Question

Claspを使用しつつGASを書いています。

連想配列を定義しようとするとダブルクォートが削除されてしまいます。
VSCodeにてprettierを使用しておりまして、ファイル保存時に整形されるようになっています。

var obj =  {"Apple" : {"small": 10, "medium" : 30, "big" : 50}};

上記のような入力をしてからファイルを保存すると、

var obj = { Apple: { small: 10, medium: 30, big: 50 } };

となってしまい、連想配列のキー文字列からダブルクォートが削除されてしまいます。

なお、普段はダブルクォートがシングルクォートに置換されるという整形がされています。
ですからシングルクォートに置換されるのであれば理解できるのですが、なぜか削除になってしまいます。

どのあたりに原因があるのでしょうか？

なお、
"prettier.quoteProps"という設定を、
"as-needed"
"preserve"
"consistent"
のいずれに変更してもこの症状は継続しています。

環境は
Windows10
VSCodeは1.42.1
Prettier3.20.0
になります。

これまでずっと配列だけを使っておりましたが、今日から初めて連想配列を使用しようとしたところ、この問題が発生しました。
それではどうぞよろしくお願いいたします。

Comments

[yureighost]

作られる連想配列はどちらの記述法でも変わりませんが、
ダブルクォーテーションで囲むことに拘る理由はどうしてでしょうか。

[jzx100ts]

追加質問をありがとうございました。おかげ様で理解が進みました。
定義の際にキーにクォーテーションが必要だと思い込んでおりました。
テストしたときにクォーテーションのありなしでエラーが出たり出なかったりしたと感じたのですが、それが思い込みだったようです。
実際には別の理由でエラーが出ていたのに勘違いしてしまったのかもしれません。
自動整形でクォーテーションが削除されてもエラーが出ないことを自分でも確認しておこうと思います。
貴重な質問をありがとうございました。

Answer 1

現象を確認できたので、詳細を調査し、解決方法がわかりました。

解決方法

prettierのフォーマット設定はVSCode上ではなく.prettierrc等で設定するようにして下さい。

{
  "quoteProps": "preserve"
}

解説

prettier拡張はVSCode上で設定することができますが、prettier向けの設定ファイルがあった場合、そのファイルの内容を優先し、VSCode上の設定は無視されます。

参照: ソースコードでファイル読み込み後のVSCode設定読み込み部分

さて、問題はprettier向けの設定ファイルが何かですが、対象のJavaScriptファイルがあるディレクトリからプロジェクトのトップに向けて下記ファイルを探しに行きます。

• .prettierrc
• .prettierrc.json
• .prettierrc.yaml
• .prettierrc.yml
• .prettierrc.js
• package.json
• prettier.config.js
• .editorconfig

参照: ソースコードでリストが書かれた部分

上の中にprettier専用ではないpackage.jsonと.editorconfigが含まれることに注意して下さい。ソースコードを全て追ってないので不正確ですが、これらのファイルがあると、この環境特有のprettier設定があるとみなされ場合があります※。その場合は、VSCode上の設定は無視されます。そして、これらの設定ファイルに何も書いていない場合は、quotePropsはデフォルトの"as-needed"とみなされ、VSCode上の設定が何であっても、文法上必要で無い場合はクォートが外されます。

※手元では.editorconfigは常にみなされますが、package.jsonはあってもみなされませんでした。各ファイル毎に個別の処理をしていると思われますが、細かい条件は追っていません。

プロジェクトの作りによってはpackage.jsonと.editorconfigを無意識に使っている場合があるため、prettierでデフォルトと異なるフォーマットを採用するのであれば、プロジェクト毎に.prettierrcを書くか、package.jsonにprettierの設定を書いた方が良いと思われます。

---

なお、自分が初心者であると自覚するのであれば、prettierのデフォルトでフォーマットすることを推奨します。デフォルト設定は多くの場合で推奨されるフォーマットです。それと異なる設定しても問題ないと判断するには、ある程度の知識と経験が必要です。自分の知識が足りない内は、先人達の知恵に頼った方がよりうまく進める場合が多いです。

Comments

[jzx100ts]

ご回答ありがとうございました。
他の方々の指摘にありましたように、定義の際にキーにクォーテーションが必要ないことを理解しておりませんでした。そうした不備もある中で、質問に対して直接的に回答してくださったこと、またそのために再現など検証した上で調査してくださったことに本当に感謝しています。
実はPrettierの自動整形については設定があいまいなまま導入しておりまして、設定方法もよく分かっていないまま、雰囲気で意味の分かりそうなところだけ変更するなどしていました。優先順位などもあるのだろうと予想はしていたのですが理解できていないのでそのままになっていたり、変更したいと思うところがあってもそのまま使うほかなかったり、大きな問題はないものの、理解できていないゆえのストレスはある状態でした。
そうした中で私の勉強不足もあって「問題」と認識してしまい今回の質問をさせていただくことになりました。ですが、今回詳しく教えていただいたおかげで、設定の方法も理解することができそうです。本当に貴重な情報でした。
また初心者に対する的確なアドバイスもありがとうございました。これからも先人に頼りつつ学んでいきたいと思います。思えば、自動整形が原因でエラーが出るようなことをPrettierがするはずないですよね。そんな思いもないわけではなかったのですが、解決できずにあせってしまい不明瞭な質問をしてしまいました。
初心者に辛抱強く接してくださったおかげで、たくさんのことを学べました。引き続きどうぞよろしくお願いいたします。

Answer 2

連想配列ではなく正確には「JavaScriptオブジェクト」ですが、リファレンスにあるように、キーはクォーテーション不要ですし、値が数値であればそれもまたクォーテーション不要だからです。

Comments

[kei344]

数値は関係ないのでは。（クォーテーションをつけたら文字列になるので意味が変わります）

[m.ts10806]

たしかに。
プラグインの仕様ぽい気もしますね。
raccyさんの回答に１票で下げます。

[kei344]

いや、そもそも値について質問者は言及していないのと、「数値であれば不要」は「あってもなくてもよいから不要」というように読めるので、書く必要がないと思います。数値リテラルとして扱うか文字列リテラルとして扱うかを決めるのは仕様です。

[jzx100ts]

ご回答ありがとうございました。
定義の際にキーにクォーテーションが必要だと思い込んでおりました。
テストしたときにクォーテーションのありなしでエラーが出たり出なかったりしたと感じたのですが、それが思い込みだったようです。
実際には別の理由でエラーが出ていたのに勘違いしてしまったのかもしれません。
自動整形でクォーテーションが削除されてもエラーが出ないことを自分でも確認しておこうと思います。

キーはクォーテーション不要というはっきりした回答のおかげで、自分の間違いに気づくことができました。ありがとうございました。