2019.11.17スポンサーリンクVSCodeをインストールした後の初期設定では半角スペースと全角スペースが見た目で判別できにくいんですよね。このままだと全角スペースが知らぬ間に紛れて、事故の元になってしまいます。この記事では、VSCodeの半角スペースと全角スペースを可視化して一目でわかるように設定する方法を紹介します。半角スペースを見やすくする全角スペースを可視化する「zenkaku」を常に適用するには?全角スペースの事故を無くそう設定後の表示この記事の通りに設定すると上記の画像のような表示になります。半角スペースは「・」、全角スペースは灰色の四角でハイライトで表示されます。おーむ一目で分かりやすいっ!!手順を解説していきます。※以下のVSCodeの画面の画像は日本語化されているので実際の画面と異なる場合があります。半角スペースを見やすくするVSCodeを開きます。次に、設定の項目の中から「テキストエディター」→「ファイル」を開いた画面から「settings.jsonで編集」をクリックします。settings.jsonのファイルに下記のコードを追記します。"all",これで半角スペースが薄く「・」で表示されるようになります。全角スペースを可視化するこちらは、VSCodeの拡張機能を使います。拡張機能の検索画面から「zenkaku」を検索して、インストールします。インストールが完了したら、「zenkaku」の拡張機能を有効化する必要があります。コマンドパレットを開き、「zenkaku」と入力します。Zenkakuを」を選択して有効化します。これで全角スペースが四角のハイライト表示となり、一目でわかるようになります。「zenkaku」を常に適用するには?こちらの拡張機能「zenkaku」はとても便利なのですが、VSCode起動直後は「zenkaku」の機能が適用されていません。毎回有効化しないといけないので地味に面倒です。この面倒くささを解消する為に「zenkaku」を常に有効化する設定も同時に行うこともおすすめします。ホームディレクトリから.vscode/extensions/mosapride.zenkaku-◯.◯.◯/extension.jsを開きます。VSCodeを再起動後します。これでVSCode起動直後から「zenkaku」の拡張機能が有効化された状態になります。全角スペースの事故を無くそう色々とスペースを可視化方法がありますが、この方法が一番シンプルで見やすく分かりやすいかなと思います。可視化していないと全角スペースがコードに紛れてしまってエラーに詰まってしまう恐れがあるので必ず設定しておきたいです。LINEおーむをフォローするスポンサーリンクおーむomublog関連記事を読んで見るプログラミングGitのインストールの手順とGitの設定方法これからGitを使用するという方へ。Gitのインストールの手順とインストール後のGitの設定方法について解説します。替え、操作対象となっているデータベースの確認の方法について解説します。Bladeで三項演算子を使ってスッキリしたコードの書き方LaraveのBladeで@ifを使い条件分岐が出来ますが、三項演算子を使って書く事も出来ます。こちらの方がスッキリとしたコードを書く事が出来るのでおすすめです。プログラミング独学でプログラミング学習は挫折しやすいと身をもって経験した話【エンジニアに転職】プログラミングの学習を効率良く進めるにはどうしたらいいだろう?独学って可能なの?といったこれらの疑問に答えます。これから学習を始める方へ、挫折をしないために最適なプログラミング学習の方法を紹介します。Awesomeを使ってTwitterやFacebookのなどのSNSアイコンやその他様々プログラミング【SQL】テーブルの作成・変更・削除について解説この記事では、データベースの基本的な操作であるテーブルの作成・変更・削除のSQL文を解説します。暮らし自動車プログラミングWebガジェットブログプロフィールおーむおーむです!主に購入した商品のレビュー、暮らしに役立つ知識、車関係、etc...を書いていきます。高卒の工場勤務からWebエンジニアに転職。プログラミング、ITに関することのアウトプットもしていきます。