💬
vs code(Visual Studio Code) で拡張機能を使用して特定の文字列のみ色を変える
背景
vs code(Visual Studio Code) で特定の文字列のみ色を変える方法を解説します。
背景としては、.env
へSlackからコードをコピペしたさいに「”」が「”」で記述されてしまい、firebase へ接続できなくてハマりました。
使用する拡張機能
使用方法
今回は、引用符「”」に色を付ける方法を解説します。”
を文字列に変更することもできますので、お好きなように変更を加えてください。
まず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