【Visual Studio Code】インストールしてからする日本語化とかの初期設定

システムVisual Studio Code

【Visual Studio Code】インストールしてからする日本語化とかの初期設定
【Visual Studio Code】インストールしてからする日本語化とかの初期設定

どうも、UT(@ut_1029)です。

Visual Studio Codeをインストールしたら個人的にやる初期設定をまとめて紹介します。これからVisual Studio Codeを触ろうと思っている人はぜひ参考に設定してください。

  • Visual Studio Code:1.50.1

Visual Studio Codeの初期設定

Visual Studio Codeは、デフォルト設定でも使うことは出来ますが、設定変更したり拡張機能をインストールすることで自分好みに触りやすいようにすることが出来ます。

ここでは設定変更して使いやすくするための初期設定を紹介していきます。

日本語化 – Japanese Language Pack for Visual Studio Code

Visual Studio Codeのメニューなどの表示を日本語化していきます。

設定手順

【Visual Studio Code】日本語化 - Japanese Language Pack for Visual Studio Code
【Visual Studio Code】日本語化 – Japanese Language Pack for Visual Studio Code

1)画面上部のメニューから「View(表示) > Extentions(拡張機能)」を開きます。

2)そして「japanese」と入力して、「Japanese Language Pack for Visual Studio Code」を選択します。

3)Installボタンをクリックしてインストールします。

4)以下のように再起動を促されるので、Restart NowボタンをクリックしてVisual Studio Codeを再起動します。

【Visual Studio Code】日本語化 - Japanese Language Pack for Visual Studio Code
【Visual Studio Code】日本語化 – Japanese Language Pack for Visual Studio Code

半角スペースを可視化 – Editor: Render Whitespace

半角スペースを可視化します。自分はどのエディタでも半角スペースを可視化するように設定します。

Editor: Render Whitespace

エディターで空白文字を表示するかどうかを制御します。

半角スペースを表示する理由
意図しない半角スペースがあってエラーになったり、HTMLに変な空白が表示されるのを防ぐことが出来ます。

設定手順

【Visual Studio Code】半角スペースを可視化 - Editor: Render Whitespace
【Visual Studio Code】半角スペースを可視化 – Editor: Render Whitespace

1)画面上部のメニューから「File(ファイル) > Preferences(基本設定) > Settings(設定)」を開きます。

2)そして「Whitespace」と入力します。

3)「Editor: Render Whitespace」で"all"を選択します。

設定すると以下ような表示となります。

【Visual Studio Code】半角スペースを可視化 - Editor: Render Whitespace
【Visual Studio Code】半角スペースを可視化 – Editor: Render Whitespace

設定項目

  • boundary
    • 単語間の単一スペース以外の空白文字を表示
  • selection
    • 選択したテキストのみ空白文字を表示
  • trailing
    • 末尾の空白文字のみを表示
  • all
    • すべての空白文字を表示

タブの表示幅 – Editor: Tab Size

タブを表示する際の表示幅を設定します。

Editor: Tab Size

1 つのタブに相当するスペースの数。

設定手順

【Visual Stucio Code】タブの表示幅 - Editor: Tab Size
【Visual Stucio Code】タブの表示幅 – Editor: Tab Size

1)画面上部のメニューから「File(ファイル) > Preferences(基本設定) > Settings(設定)」を開きます。

2)そして「Tab Size」と入力します。

3)「Editor: Tab Size」で数字を入力します。一般的にはタブは半角スペース4つなので、"4″とします。

タブの挿入 – Editor: Insert Spaces

タブキーを押した時に「半角スペース」か「タブ」を挿入するか設定します。

Editor: Insert Spaces

Tab キーを押すとスペースが挿入されます。

設定手順

【Visual Stucio Code】タブの挿入 - Editor: Insert Spaces
【Visual Stucio Code】タブの挿入 – Editor: Insert Spaces

1)画面上部のメニューから「File(ファイル) > Preferences(基本設定) > Settings(設定)」を開きます。

2)そして「Insert Spaces」と入力します。

3)「Editor: Insert Spaces」のチェックを外します。するとタブキーで挿入されるのが半角スペースからタブとなります。

ファイルツリーの階層インデント幅を調整 – Tree: Indent

Visual Studio Codeの左サイドに表示するファイルツリー(ディレクトリ階層)の階層インデント幅(行頭の空白)が短いので設定します。

Workbench › Tree: Indent

ツリーのインデントをピクセル単位で制御します。

設定手順

【Visual Stucio Code】ファイルツリーの階層インデント幅を調整 - Tree: Indent
【Visual Stucio Code】ファイルツリーの階層インデント幅を調整 – Tree: Indent

1)画面上部のメニューから「File(ファイル) > Preferences(基本設定) > Settings(設定)」を開きます。

2)そして「Tree Indent」と入力します。

3)「Workbench › Tree: Indent」へ数字を入力します。

ファイルツリーのファイル名フィルタリング検索 – List: Keyboard Navigation

ファイル名で検索した時のフィルタリング動作を設定します。

Workbench › List: Keyboard Navigation

ワークベンチのリストおよびツリーのキーボード ナビゲーション スタイルを制御します。単純、強調表示、フィルターを指定できます。

設定手順

【Visual Stucio Code】ファイルツリーのファイル名フィルタリング検索 - List: Keyboard Navigation
【Visual Stucio Code】ファイルツリーのファイル名フィルタリング検索 – List: Keyboard Navigation

1)画面上部のメニューから「File(ファイル) > Preferences(基本設定) > Settings(設定)」を開きます。

2)そして「Keyboard Navigation」と入力します。

3)「List: Keyboard Navigation」で"filter"を選択します。

設定項目

  • simple
    • 入力した文字列を先頭から一致させていき、一致するファイルにフォーカスを移していく方法
  • highlight
    • 右上に入力結果が表示され、その文字列をファイル名に含むファイルをハイライトしてくれる方法
  • filter
    • 右上に入力結果が表示された上で、部分一致したファイルのみを表示させる方法

まとめ

今回はVisual Studio Codeの基本的な設定変更を中心にまとめて紹介しました。

少し前までは設定変更するには、JSONファイルを編集しなくてはいけなかったんですが、最近だと画面でポチポチして設定が変更できるようになって楽になりました。

あとエディタの自動コード補完って苦手なんですよね。。。HTMLの閉じタグが勝手に挿入されたり、インデントが自動で整形されたり。慣れると効率上がるんでしょうけど(汗)

またVisual Stucio Codeの設定などに関しては個別に記事で紹介していきますので、ぜひ参考にご覧ください。

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

システムVisual Studio Code

Posted by UT