Visual Studio Code

Visual Studio Code のオススメ設定

Windows版では「ファイル」「ユーザー設定」「設定」メニュー（または，Ctrl + ,）から，Mac版では「Code」「基本設定」「設定」メニュー（または，⌘ + ,）からさまざまな設定が行えるが，いくつかオススメの設定を紹介しておく．なお，設定項目が非常に数多くあるので，スクロールして探すよりもキーワードを入力して検索した方が効率的です．

Editor > Minimap: Enabled

Editor > Minimap: Enabled：チェックを外す

画面の右に表示されるミニマップを表示しない

Editor: Font Size

Editor: Font Size：好みの大きさに

フォントサイズを変更する

Editor: Insert Spaces

Editor: Insert Spaces：チェックを入れる

タブキーを押したときにスペースが挿入される

Editor: Tab Size

Editor: Tab Size：2

1つのタブに相当するスペースの数を2に変更（4でもよい）

Editor: Render Whitespace

Editor: Render Whitespace：all

空白文字を表示する

Editor: Word Wrap

Editor: Word Wrap：on

行を折り返して表示する（切り替えのショートカット ( Alt + z )もあります）

Editor: Copy With Syntax Highlighting

Editor: Copy With Syntax Highlighting：チェックを外す

構文ハイライトをクリップボードにコピーするかどうかを制御します．このチェックを外しておくと，Wordなどに貼り付けたときにプレーンテキストとして取り扱えます．

Files: Trim Trailing Whitespace, Insert Final Newline, Trim Final Newlines

次の3つを有効にすると，不要な空白が削除され最後の行には改行文字が確実に1個だけ残るようになります．とくにGit利用時には効果大です．

Files: Trim Trailing Whitespace：チェックを入れる

有効にすると，ファイルの保存時に末尾の空白をトリミングします

Files: Insert Final Newline：チェックを入れる

有効にすると，ファイルの保存時に改行を末尾に挿入します

Files: Trim Final Newlines：チェックを入れる

有効にすると，ファイルの保存時に最終行以降の新しい行をトリミングします

Editor: Accept Suggestion On Enter

Editor: Accept Suggestion On Enter：off

文章の入力時に表示される入力候補文字列をEnterキーでは受け入れないようにする．（文章入力中のお節介機能によるストレスが軽減される）

Editor: Font Family

0xProto，Ricty Diminished や PlemolJP などのプログラミングフォントを設定する．プログラミングフォントは画面上での文字の視認性が高く，全角スペースを可視化できたりする．たとえば，数字のイチ「1」と英小文字のエル「l」や，数字のゼロ「0」と英大文字のオー「O」の識別がしやすかったり，濁音（「バ」「ビ」など）半濁音（「パ」「ピ」など）も識別しやすいという特徴がある．

具体的には，0xProto，Ricty Diminished や PlemolJP のオリジナルサイトからフォントファイルをダウンロードして Windows OS や macOS にインストールする．その後，Visual Studio Code の設定ページで「Editor: Font Family」に次のように指定すると良い．なお，0xProto や Ricty Diminished は ' ' または " " で囲うことに注意してください．

Windows

0xProto を使う場合は「Editor: Font Family：'0xProto', Consolas, 'Courier New', monospace」

Ricty Diminished を使う場合は「Editor: Font Family：'Ricty Diminished', Consolas, 'Courier New', monospace」

PlemolJP を使う場合は「Editor: Font Family：PlemolJP, Consolas, 'Courier New', monospace」

macOS

0xProto を使う場合は「Editor: Font Family：'0xProto', Menlo, Monaco, 'Courier New', monospace」

Ricty Diminished を使う場合は「Editor: Font Family：'Ricty Diminished', Menlo, Monaco, 'Courier New', monospace」

PlemolJP を使う場合は「Editor: Font Family：PlemolJP, Menlo, Monaco, 'Courier New', monospace」

Files: Auto Save

Files: Auto Save：afterDelay

変更のあったエディタは，"Files: Auto Save Delay （デフォルト：1000ミリ秒）"の後に自動的に保存されます．

Emmet: Variables

項目 lang の 値を en から ja に変更

HTMLファイルの雛形を生成するときに HTML の言語を ja に設定できます．具体的な操作方法はこちらを確認してください．

PATH 内に 'code' コマンドをインストール (macOS)

Windows ではコマンドプロンプトから， macOS ではターミナルから Visual Studio Code を起動し，カレントディレクトリ（フォルダ）を Visual Studio Code で開くことができます．Windows ではインストール時にPATHへ追加する必要があり，macOS では PATH 内に 'code' コマンドをインストールする必要があります．

macOS で ⌘ + shift + P でコマンドパレットを表示し，「shell」と入力して表示された中から「シェルコマンド：PATH 内に 'code' コマンドをインストールします」を選ぶ．指示に従いインストールを完了させると良い．

コマンドのインストールができれば，ターミナルで目的のフォルダに移動したあと code . コマンドで Visual Studio Code の起動ができる．

(base) rinsaka@MacBookPro2021 public_html % code . ⏎
(base) rinsaka@MacBookPro2021 public_html %

Windows ではインストール時にPATHを追加しておくことで，コマンドプロンプトや PowerShell で目的のフォルダに移動したあと code . コマンドで Visual Studio Code が起動できる．

(base) C:\Users\rinsaka\Documents\public_html> code . ⏎

(base) C:\Users\rinsaka\Documents\public_html>

設定の同期

このページで設定した内容をクラウドに保存して，他のPCにインストールした Visual Studio Code の設定でも同期されるようにできます．まず，画面左の「アクティビティバー」の「管理」（歯車アイコン）をクリックし，「バックアップと同期の設定」を選びます．

バックアップして同期する項目を選び「サインイン」をクリックします．

「Microsoft でサインイン」を選びます．（GitHubのアカウントがあれば，GitHubでも構いません．）

Microsoft のサインイン画面が表示されるので，アカウント情報を入力し，その後の画面でパスワードなども入力してサインインを行います．

サインインに成功すると次のような画面が表示されます．この画面は閉じて問題ありません．

2回目（2台目）以降の同期では次のようなメッセージが表示されます．すでにクラウドに保存されている設定内容を手元のPCに同期するには「ローカルを置換」を選びます．手元のPCの設定内容をクラウドに保存して他のPCにも反映させるには「リモートを置換」を選びます．

設定の同期が行われている状態です．

Visual Studio Code の設定を行ってクラウドにいったんバックアップを取ってしまえば，他のPCから同期することが可能で，どのPCでも同じ設定で作業することができるようになります．また，学内の情報処理実習室に自身で Visual Studio Code をインストールした後，クラウドから設定を同期すると，毎回同じ設定で作業ができるようになります．