🎯 VSCodeで補完時にシングルクォートではなくダブルクォートを使う方法（Prettier対応あり）

はじめに

ReactやHTML、JavaScriptをVSCodeで書いているとき、こんな経験はありませんか？

補完で className= を入力したら、
className='container' ← シングルクォートになってしまう...

「毎回手で直すのが地味にストレス！」
そう感じたので、予測補完や整形ツール（Prettierなど）で、デフォルトで「ダブルクォート」を使う方法を整理しました。

---

🧠 本記事の目的

• VSCodeでコード補完や整形時に「ダブルクォート」をデフォルトにする方法をまとめる
• PrettierやEmmetなど、使用している拡張機能に応じた設定もカバー
• 実際の settings.json に反映する形で共有

---

🧪 前提

• VSCodeを使用している（バージョン問わず）
• JavaScript/TypeScript/React/HTML いずれかを扱っている
• 補完や整形にPrettierやEmmetを使っている可能性がある

---

🚧 原因の例

• VSCodeの補完設定（IntelliSense）が シングルクォート を優先している
• Prettier の設定で "singleQuote": true になっている
• Emmet のタグ補完が ' を出力している
• 使用中のスニペットや拡張機能が '' を使う仕様になっている

---

✅ 解決策（settings.jsonに追加）

VSCodeの settings.json に以下の設定を追加します。
以下は React + HTML + JavaScript の補完整形を「ダブルクォート」に統一するものです。

🔧 推奨設定（コピペOK）

"prettier.singleQuote": false,
"javascript.preferences.quoteStyle": "double",
"typescript.preferences.quoteStyle": "double",
"emmet.preferences": {
  "attributeQuotes": "double"
}

📌 実際の settings.json 例

下記は、僕の実際の settings.json に上記設定を追加した例です。

{
  "files.associations": {
    "*.txt": "plaintext"
  },
  "explorer.confirmDragAndDrop": false,
  "[python]": {
    "editor.formatOnType": true
  },
  "workbench.colorTheme": "GitHub Dark",
  "explorer.confirmDelete": false,
  "editor.tabSize": 2,
  "workbench.iconTheme": "material-icon-theme",
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "python.defaultInterpreterPath": "/Users/yourname/anaconda3/bin/python",
  "terminal.integrated.inheritEnv": false,
  "window.commandCenter": false,
  "json.schemas": [],

  // 👇ここからが重要な追加設定
  "prettier.singleQuote": false,
  "javascript.preferences.quoteStyle": "double",
  "typescript.preferences.quoteStyle": "double",
  "emmet.preferences": {
    "attributeQuotes": "double"
  }
}

🛠 設定が反映されないときの対処法

VSCodeを再起動して設定を反映

ファイル保存時の整形が動作するか確認

.prettierrcファイルがある場合は、そちらにも "singleQuote": false を追記

拡張機能（例：React Snippets）が独自の補完スタイルを持っている場合、そちらの設定やカスタマイズが必要なことも

💬 おわりに

ちょっとした設定の違いですが、クォートの違いによる修正や違和感が積み重なるとストレスになりますよね。

「シングルかダブルか」はチームのコード規約にも関わるところなので、環境ごとに統一されていると快適＆安心です。

設定ひとつで解決できるので、ぜひ取り入れてみてください！