💬

vs code(Visual Studio Code) で拡張機能を使用して特定の文字列のみ色を変える

2025/02/04に公開

背景

vs code(Visual Studio Code) で特定の文字列のみ色を変える方法を解説します。
背景としては、.env へSlackからコードをコピペしたさいに「”」が「”」で記述されてしまい、firebase へ接続できなくてハマりました。

使用する拡張機能

https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-highlight

使用方法

今回は、引用符「”」に色を付ける方法を解説します。 を文字列に変更することもできますので、お好きなように変更を加えてください。

まずvs code で上記拡張機能をインストールしてください。

その後、setting.json を開いてください。

setting.json の開き方は、com + ,setting と検索して「setting.jsonで編集する」をクリックしてください。

デフォルト記述の削除

setting.json の下の方へ行くとデフォルトで下記の記述があるので、全て消します!

"highlight.regexes": {
    "((?:<!-- *)?(?:#|// @|//|./\\*+|<!--|--|\\* @|{!|{{!--|{{!) *TODO(?:\\s*\\([^)]+\\))?:?)((?!\\w)(?: *-->| *\\*/| *!}| *--}}| *}}|(?= *(?:[^:]//|/\\*+|<!--|@|--|{!|{{!--|{{!))|(?: +[^\\n@]*?)(?= *(?:[^:]//|/\\*+|<!--|@|--(?!>)|{!|{{!--|{{!))|(?: +[^@\\n]+)?))": {
      "filterFileRegex": ".*(?<!CHANGELOG.md)$",
      "decorations": [
        {
          "overviewRulerColor": "#ffcc00",
          "backgroundColor": "#ffcc00",
          "color": "#1f1f1f",
          "fontWeight": "bold"
        },
        {
          "backgroundColor": "#ffcc00",
          "color": "#1f1f1f"
        }
      ]
    },
    "((?:<!-- *)?(?:#|// @|//|./\\*+|<!--|--|\\* @|{!|{{!--|{{!) *(?:FIXME|FIX|BUG|UGLY|DEBUG|HACK)(?:\\s*\\([^)]+\\))?:?)((?!\\w)(?: *-->| *\\*/| *!}| *--}}| *}}|(?= *(?:[^:]//|/\\*+|<!--|@|--|{!|{{!--|{{!))|(?: +[^\\n@]*?)(?= *(?:[^:]//|/\\*+|<!--|@|--(?!>)|{!|{{!--|{{!))|(?: +[^@\\n]+)?))": {
      "filterFileRegex": ".*(?<!CHANGELOG.md)$",
      "decorations": [
        {
          "overviewRulerColor": "#cc0000",
          "backgroundColor": "#cc0000",
          "color": "#1f1f1f",
          "fontWeight": "bold"
        },
        {
          "backgroundColor": "#cc0000",
          "color": "#1f1f1f"
        }
      ]
    },
    "((?:<!-- *)?(?:#|// @|//|./\\*+|<!--|--|\\* @|{!|{{!--|{{!) *(?:REVIEW|OPTIMIZE|TSC)(?:\\s*\\([^)]+\\))?:?)((?!\\w)(?: *-->| *\\*/| *!}| *--}}| *}}|(?= *(?:[^:]//|/\\*+|<!--|@|--|{!|{{!--|{{!))|(?: +[^\\n@]*?)(?= *(?:[^:]//|/\\*+|<!--|@|--(?!>)|{!|{{!--|{{!))|(?: +[^@\\n]+)?))": {
      "filterFileRegex": ".*(?<!CHANGELOG.md)$",
      "decorations": [
        {
          "overviewRulerColor": "#00ccff",
          "backgroundColor": "#00ccff",
          "color": "#1f1f1f",
          "fontWeight": "bold"
        },
        {
          "backgroundColor": "#00ccff",
          "color": "#1f1f1f"
        }
      ]
    },
    "((?:<!-- *)?(?:#|// @|//|./\\*+|<!--|--|\\* @|{!|{{!--|{{!) *(?:IDEA)(?:\\s*\\([^)]+\\))?:?)((?!\\w)(?: *-->| *\\*/| *!}| *--}}| *}}|(?= *(?:[^:]//|/\\*+|<!--|@|--|{!|{{!--|{{!))|(?: +[^\\n@]*?)(?= *(?:[^:]//|/\\*+|<!--|@|--(?!>)|{!|{{!--|{{!))|(?: +[^@\\n]+)?))": {
      "filterFileRegex": ".*(?<!CHANGELOG.md)$",
      "decorations": [
        {
          "overviewRulerColor": "#cc00cc",
          "backgroundColor": "#cc00cc",
          "color": "#1f1f1f",
          "fontWeight": "bold"
        },
        {
          "backgroundColor": "#cc00cc",
          "color": "#1f1f1f"
        }
      ]
    }
  },

追加の設定記述

   // 特定の文字列をハイライトする
  "highlight.regexes": {
    "(“)()": [
      { "color": "yellow" },
    ],
    "(”)()": [ 
      { "color": "red" }, 
    ],
  }

記述の解説

"(“)()" 最初の丸かっこの中に色を変更したい文字列を入れます。

その下の { "color": "yellow" } へ色を入れます。

今回は、引用符へ色を付けたいので、引用符の始まりを yellow 、引用符の終わりを red にしました。

結果

普通に見ただけでは区別が付かない、「ダブルクォーテーション」と「引用符」が簡単に区別できるようになりました!(引用符の始まりが入っていないので両端が赤ですが、ちゃんと黄色になります。)

感想

firebase で下記エラーが出た場合は、.env の記述が間違っている場合がほとんどです。

今回の対応をしておけば、原因究明に多大な時間を割くことをなくせると思いますので、「困った」となる前に対策としてやっておけばいいと思います。

@firebase/firestore: Firestore (9.21.0): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied on resource project “gacci-dev”.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

Firebase: Error (auth/network-request-failed).
    at createErrorInternal (index-eaf604ee.js:497:1)
    at _fail (index-eaf604ee.js:468:1)
    at _performFetchWithErrorHandling (index-eaf604ee.js:922:1)
    at async _performSignInRequest (index-eaf604ee.js:926:1)
    at async _signInWithCredential (index-eaf604ee.js:5049:1)

Discussion