Visual Studio Code で制御文字が混ざる問題

たまに他の人から指摘されたことがあったんだけど、どうやらVSCodeMacの環境で編集内容に制御文字が混ざりこんでしまうバグがあるらしい。

特にMarkdownを編集しているときに起きるらしい。以下の記事を参考にして対策を行った。

2017-06-23 Visual Studio Code で制御文字を表示する - blog.bouzuya.net

エディタの設定で制御文字を表示する

デフォルトでは制御文字が表示されないようになっているので、全く気づかずに編集を進めてしまう。まずは表示させることで気づけるようにする。

"editor.renderControlCharacters": true,

拡張機能で強調表示する

拡張機能で対応できるらしい。Whitespace+ - Visual Studio Marketplace

いろいろ試してこんな感じのを追加した。タブ、LF、CRは強調表示の対象にならないようにした。

{
    "name": "control",
    "enabled": true,
    "pattern": "[\\cA-\\cH\\cK-\\cL\\cN-\\cZ\\u001B-\\u001F\\u007F]+",
    "style": {
        "borderWidth": "1px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
            "backgroundColor": "rgba(58, 70, 101, 0.3)",
            "borderColor": "rgba(58, 70, 101, 0.4)"
        },
        "dark": {
            "backgroundColor": "rgba(255, 0, 0, 0.5)",
            "borderColor": "rgba(117, 141, 203, 0.4)"
        }
    }
}

最終形はこんな感じ。whitespace_plus-config.json

  • 起動時に有効にする
  • trailingとcontrolの設定だけ有効にしている

赤く表示されるのですぐに気付けて良い感じになった。

フォーマット時に削除する

こちらも拡張機能で対応する。Remove backspace control character - Visual Studio Marketplace

ドキュメントのフォーマットを実行した際に、指定されたパターンに一致する制御文字が削除される。

"ctrlchar-remover.pattern": "[\\cA-\\cH\\cK-\\cL\\cN-\\cZ\\u001B-\\u001F\\u007F]"

実際設定してみたものの、Markdownの場合にはフォーマットすることが少ないのであまり使わなさそう。