VSCode – colorなどで表示されるプレビュー機能を非表示する

CSSファイルで色関連のプロパティを使用するとVS Codeではカラープレビューと言って下記の画像のようにプレビュー上で色を変更することができますが、邪魔なのでこれを非表示設定にする方法をご紹介します。

結論から言うと、settings.jsonに"editor.colorDecorators": falseを追加するだけです。手順は下記をご覧ください。

基本設定を開く

よく基本設定は使うのでショートカット覚えておくと便利です。

mac

⌘ + ,で基本設定が開きます。

Windows

Ctrl + ,で基本設定が開きます。

settings.jsonを開く

設定を開いたら、赤枠のボタンをクリックするとsettings.jsonのファイルが開かれます。

こちらも、よく使うかと思いますのでsettings.jsonを開くためのショートカットをご紹介します。

mac

command + shift + Pを押して、「Preferences: Open Settings(JSON)」と入力してEnter。

Windows

Ctrl + Shift + Pまたは、F1を押し、「Preferences: Open Settings(JSON)」と入力してEnter。

カラーピッカーのプレビューを消す設定

settings.jsonのファイルを開いたら下記のコードを追加して保存してください。それで完了になります。

{
    "editor.colorDecorators": false
}

必ず、{ }の中に"editor.colorDecorators": falseを入れるようにしてください。反映されません。また、,が抜けてたりするとエラーになるので、注意してください。