テック動向

VSCodeの補完・予測変換(サジェスト)が出ないときの対処法

先に結論(30秒で直す)
VSCode 右下の言語モードが PostCSS のままだと、CSS の補完・予測変換(サジェスト)が出ないことがあります。
1. 編集中の .css を開く
2. 右下の PostCSS をクリック
3. CSS を選択
所要時間:約1分・再起動不要。Tailwind 導入時に PostCSS Language Support を入れたあと、モードが PostCSS のまま残るケースがあります。

※本記事の「予測変換」「サジェスト」は、VS Code の IntelliSense によるコード補完候補を指します。日本語 IME の変換予測や、GitHub Copilot のゴーストテキスト(インライン提案)とは別の機能です。

開発環境まわりの他の記事は 学習ハブ(/learn/) にまとめています。

症状:補完・予測変換・サジェストが出ない

CSS を VSCode で編集中、プロパティ名の候補や import の補完がポップアップで出ない。別プロジェクトを開いても再現する場合は、プロジェクト固有ではなく エディタ側の設定を疑います。

よくある原因①:言語モードが PostCSS になっている

エディタ右下の言語モード表示が PostCSS のままだと、標準の CSS Language Features の補完と挙動が変わることがあります。

私の場合は、別フォルダでも同じ症状が出ました。ESLint や Prettier を無効化しても改善せず、最終的に言語モードの不一致が原因でした。

VSCode 右下の言語モードが PostCSS になっている例

これを、「CSS」に変更したところ、いつものCSS編集時の自動補完が戻りました。

言語モードを CSS に変更した後の VSCode 画面

なぜ PostCSS になっていたかは不明ですが、Tailwind CSS 拡張と一緒に入る PostCSS Language Support の影響かもしれません。

よくある原因②:settings.json でサジェストがオフ

言語モードを直しても改善しない場合は、ユーザー設定を確認します。特に editor.quickSuggestionsotheroff になっていないか、editor.suggestOnTriggerCharacters が無効になっていないかを見ます。

{
  "editor.quickSuggestions": {
    "other": "on",
    "comments": "off",
    "strings": "off"
  },
  "editor.suggestOnTriggerCharacters": true,
  "editor.tabCompletion": "on"
}

設定 UI では、画面左下(アクティビティバー)の歯車アイコン → 設定 → 検索ボックスで「quick suggestions」と入力して確認できます。JSON を直接直すときは、設定画面右上の「ファイルを開く」アイコンから settings.json を開けます。

settings.json を開くアイコンの位置
設定画面右上のファイルアイコン(画像の赤丸)をクリックすると settings.json が開きます。

それでも直らないときのチェックリスト

  1. 右下の言語モードが CSS(Plain Text / PostCSS でないか)
  2. settings.jsonfiles.associations*.css が postcss に固定されていないか
  3. 組み込み CSS Language Features が無効化されていないか(拡張一覧)
  4. : 入力後に候補が出るか(editor.suggestOnTriggerCharacters
  5. コマンドパレット → Developer: Reload Window を実行
  6. 求めている補完の種類を確認(CSS プロパティ / Tailwind クラス / Copilot ゴーストは別機能)

よくある質問

補完・予測変換・サジェストは同じ機能ですか?

冒頭の注記のとおり、本記事ではいずれも IntelliSense の候補を指します。IME の変換予測や Copilot のゴーストテキストとは別です。

PostCSS と CSS の言語モードの違いは?

PostCSS モードでは PostCSS 向けの Language Service が動き、通常の .css 編集では CSS モードの方がプロパティ補完が期待どおりになることが多いです。

Cursor でも同じ対処で直りますか?

Cursor も VS Code 系なので、画面右下の言語モードやサジェスト設定の考え方は同じです。右下の表示が PostCSS のままだと、同様に CSS へ変更すると直ることが多いです。

import 文の補完(IntelliSense)が出ないときは?

まず右下の言語モードが JavaScript / TypeScript になっているか確認してください。PostCSS や Plain Text のままだと import 先の候補が出ません。言語モードを直しても改善しない場合は、editor.quickSuggestionsother が on か、editor.suggestOnTriggerCharacters が true かを settings.json で確認します。詳細は本記事の「原因②」とチェックリストを参照してください。

まとめ

補完が突然出なくなったときは、まず右下の 言語モードを確認してください。PostCSS → CSS で戻ることが多いです。それでも直らない場合は、settings.json と拡張機能を切り分けて確認しましょう。

関連する記事です。開発環境の話から、エージェント作業の進め方へつないでいます。