【Visual Studio Code】日本語化とか最初にやる初期設定
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のメニューなどの表示を日本語化していきます。
設定手順
１）画面上部のメニューから「View(表示) > Extentions(拡張機能)」を開きます。
２）そして「japanese」と入力して、「Japanese Language Pack for Visual Studio Code」を選択します。
３）Installボタンをクリックしてインストールします。
４）以下のように再起動を促されるので、Restart NowボタンをクリックしてVisual Studio Codeを再起動します。
半角スペースを可視化 – Editor: Render Whitespace
半角スペースを可視化します。自分はどのエディタでも半角スペースを可視化するように設定します。
Editor: Render Whitespace
エディターで空白文字を表示するかどうかを制御します。
半角スペースを表示する理由
意図しない半角スペースがあってエラーになったり、HTMLに変な空白が表示されるのを防ぐことが出来ます。
設定手順
１）画面上部のメニューから「File(ファイル) > Preferences(基本設定) > Settings(設定)」を開きます。
２）そして「Whitespace」と入力します。
３）「Editor: Render Whitespace」で"all"を選択します。
設定すると以下ような表示となります。
設定項目
- boundary
- 単語間の単一スペース以外の空白文字を表示
- selection
- 選択したテキストのみ空白文字を表示
- trailing
- 末尾の空白文字のみを表示
- all
- すべての空白文字を表示
タブの表示幅 – Editor: Tab Size
タブを表示する際の表示幅を設定します。
Editor: Tab Size
1 つのタブに相当するスペースの数。
設定手順
１）画面上部のメニューから「File(ファイル) > Preferences(基本設定) > Settings(設定)」を開きます。
２）そして「Tab Size」と入力します。
３）「Editor: Tab Size」で数字を入力します。一般的にはタブは半角スペース4つなので、"4″とします。
タブの挿入 – Editor: Insert Spaces
タブキーを押した時に「半角スペース」か「タブ」を挿入するか設定します。
Editor: Insert Spaces
Tab キーを押すとスペースが挿入されます。
設定手順
１）画面上部のメニューから「File(ファイル) > Preferences(基本設定) > Settings(設定)」を開きます。
２）そして「Insert Spaces」と入力します。
３）「Editor: Insert Spaces」のチェックを外します。するとタブキーで挿入されるのが半角スペースからタブとなります。
ファイルツリーの階層インデント幅を調整 – Tree: Indent
Visual Studio Codeの左サイドに表示するファイルツリー(ディレクトリ階層)の階層インデント幅(行頭の空白)が短いので設定します。
Workbench › Tree: Indent
ツリーのインデントをピクセル単位で制御します。
設定手順
１）画面上部のメニューから「File(ファイル) > Preferences(基本設定) > Settings(設定)」を開きます。
２）そして「Tree Indent」と入力します。
３）「Workbench › Tree: Indent」へ数字を入力します。
ファイルツリーのファイル名フィルタリング検索 – List: Keyboard Navigation
ファイル名で検索した時のフィルタリング動作を設定します。
Workbench › List: Keyboard Navigation
ワークベンチのリストおよびツリーのキーボード ナビゲーション スタイルを制御します。単純、強調表示、フィルターを指定できます。
設定手順
１）画面上部のメニューから「File(ファイル) > Preferences(基本設定) > Settings(設定)」を開きます。
２）そして「Keyboard Navigation」と入力します。
３）「List: Keyboard Navigation」で"filter"を選択します。
設定項目
- simple
- 入力した文字列を先頭から一致させていき、一致するファイルにフォーカスを移していく方法
- highlight
- 右上に入力結果が表示され、その文字列をファイル名に含むファイルをハイライトしてくれる方法
- filter
- 右上に入力結果が表示された上で、部分一致したファイルのみを表示させる方法
まとめ
今回はVisual Studio Codeの基本的な設定変更を中心にまとめて紹介しました。
少し前までは設定変更するには、JSONファイルを編集しなくてはいけなかったんですが、最近だと画面でポチポチして設定が変更できるようになって楽になりました。
あとエディタの自動コード補完って苦手なんですよね。。。HTMLの閉じタグが勝手に挿入されたり、インデントが自動で整形されたり。慣れると効率上がるんでしょうけど(汗)
またVisual Stucio Codeの設定などに関しては個別に記事で紹介していきますので、ぜひ参考にご覧ください。
Webプログラマ兼ブロガー | プログラミング基礎知識を発信｜Webプログラマ歴は10年以上｜JavaScript,PHP.HTML | 「人生の時間は有限。悪いことをしている時間はない」
→プロフィール