VSCode カスタマイズ

Microsoft が開発した軽量で高機能なテキストエディタ「Visual Studio Code (VSCode)」のおすすめ拡張機能

VSCode の便利機能

• コマンドパレット (VSCode をコマンド操作するパレットを開く)
  • Windows : [Ctrl]+[Shift]+[P]
  • macOS : [Cmd]+[Shift]+[P]
• セッティング (VSCode 自体の設定画面を開く)
  • Windows: [Ctrl]+[,]
  • macOS : [Cmd]+[,]

VSCode のおすすめ設定

セッティング画面を開いて search setting でセッティング名を検索し編集するだけ。

• Format on Save: On にするとファイルを保存したときにコードが自動で整えられる

VSCode のおすすめ拡張機能

VSCode は拡張機能 (Extension) をインストールすることで様々なカスタマイズが可能。

拡張機能のインストール方法

1. VSCode のサイドバーを開く
2. 拡張機能のメニューを選択 (四角が 4 つ並び、右上だけ外れているアイコン)
3. 必要な拡張機能の「名前」を入力 > インストール

インストールするだけで反映されるものと、VSCode の再起動が必要なものがある。

おすすめ拡張機能

• Japanese Language Pack for Visual Studio Code
  • VSCode を日本語表示にする
• indent-rainbow
  • コードのインデント (字下げ) に色を付けて可読性を上げる
• zenkaku
  • プログラムのバグの原因ともなる「全角スペース」を協調してくれる
• Path Intellisense
  • コード内のファイルパスを自動で補完
• HTML CSS Support
  • CSS を参照して HTML を補完してくれる
• Auto Rename Tag
  • HTMLの開始タグを修正すると修了タグも自動で修正してくれる
• Code Spell Checker
  • 英語のスペルミスを指摘してくれる
• ESLint
  • JavaScript と TypeScript のコードからエラーを検出してくれる
• Trailing Spaces
  • 行末の無駄なスペースを可視化
• Material Icon Theme
  • VSCode でフォルダやファイルにわかりやすいアイコン表示してくれる
• Live Share
  • リモート/リアルタイムにVSCodeで開いているプロジェクトのファイルを共同編集、ペアプログラミングなどに

Reference

• VSCode のおすすめ拡張機能 (日経 XTECH 記事)