【VSCode拡張機能】Color Highlight の機能設定一覧とおすすめ設定

Color Highlight の機能設定一覧とおすすめ設定

目次

• はじめに
• Color Highlightとは
• 機能設定一覧
• おすすめ設定

はじめに

こちらの記事は、VSCodeの拡張機能Color Highlightの機能設定一覧とおすすめ設定について記載したものになります。

詳しくは下記サイトを参照してください
Color Highlight

Color Highlightとは

ソースコード内のカラーコード(または色として認識される文字)に実際の色付けで強調表示する拡張機能です。

機能設定一覧

名前	説明	既定
color-highlight.enable	プラグインが有効かどうかを制御します	true
color-highlight.languages	カラーハイライトで強調表示する必要のある言語IDの配列、*は任意の言語でトリガー、言語IDの前に！をつけると除外(！typescript、！javascriptなど)	*
color-highlight.matchWords	すべてのファイルの色の単語を強調表示(grey、greenなど)	false
color-highlight.matchRgbWithNoFunction	rgb()など関数に含まれないrgb表記のものを強調表示するか(255,255,255、 [255, 255, 255]、255 255 255など)	false
color-highlight.rgbWithNoFunctionLanguages	rgbWithNoFunctionのパターンで強調表示する言語IDの配列	*
color-highlight.markerType	ハイライトのスタイル、'dot-before', 'dot-after', 'foreground', 'background', 'outline', 'underline'のいずれかになる	background
color-highlight.markRuler	スクロールバーの色を強調表示する	true
color-highlight.sass.includePaths	検索する絶対パスの配列

おすすめ設定

私個人が設定しているおすすめ設定です。
"markerType": "underline"にする理由としてはbackgroundにすると文字色と被り見えないケースがあるからです。
しかしunderlineを利用すると警告等の下線に近い形に見えるので、人に寄っては煩わしいかと思います。
その場合はdot系のスタイルでも良いと思います。

{
	// ...その他拡張機能

  // Color Highlight
  "color-highlight": {
    // すべてのファイルの色の単語を強調表示(grey、greenなど)
    "matchWords": true,
    // rgb()など関数に含まれないrgb表記のものを強調表示するか
    "matchRgbWithNoFunction": true,
    // ハイライトのスタイル、'dot-before', 'dot-after', 'foreground', 'background', 'outline', 'underline'のいずれかになる
    "markerType": "underline",
  }
}