VSCode で改行コードや半角スペースを表示する

ということで、Flutter の環境構築までやってきました。
これから、アプリを作り始めようと思ったけどデフォルトでは、改行コードや半角スペースが表示されなので表示するようにしていきます。

設定ファイルに制御文字表示の設定を追加

↓の手順で設定ファイルを開きます

1. CTRL+p でコマンドパレットを表示する
2. settings.json を入力して設定ファイルを開く

設定ファイルに↓を追加していきます。

制御文字を表示

"editor.renderControlCharacters": true,

常に空白を表示

"editor.renderWhitespace": "all",

プラグイン追加

設定変更で表示できないやつはプラグインで対応していきます

全角スペースを表示

zenkaku - Visual Studio Marketplace

Extension for Visual Studio Code - show double-byte-whiteSpace

marketplace.visualstudio.com

改行コードを表示

code-eol 2019 (Line Endings) - Visual Studio Marketplace

Extension for Visual Studio Code - Displays line endings like Atom/Notepad

marketplace.visualstudio.com

settings.json に改行コードに対応する文字を設定していきます。
日本でメジャーなサクラエディタや秀丸エディタと同じような文字で表示する場合は以下のように記載します。

    // 改行設定
    "code-eol.style": {
        "color" : "#000000",
        "opacity" : 0.5
    },
    "code-eol.toggleWithWhiteSpace": true,
    "code-eol.newlineCharacter":"↓",
    "code-eol.returnCharacter" :"←",
    "code-eol.crlfCharacter": "↵",

空白や改行の表示はこれで完了です。