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」

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>

Visual Studio Code