VS Code エディター
- マイクロソフトが開発した無料エディタ
- Windows、macOS、Linux、など様々な環境に対応している
- HTML、CSS、JavaScriptの他にGitなども統合されている高機能エディタ
- プラグインも充実してカスタマイズ可能
Visual Studio Code の初期設定について
左下の歯車アイコンからエディタの環境設定を変更します。まずは画面の配色テーマから変更していきましょう。
配色テーマは「ライトテーマ」と「ダークテーマ」の2系統がありますが、最初は「ライトテーマ」の中から選択するようにしましょう
Visual Studio Code の基本的な使い方
左上のファイルアイコン、もしくはファイル(F)から「フォルダを開く」を選択して管理フォルダを指定します。
管理フォルダを設定するとフォルダ内にあるファイルや画像のみが表示されるようになります。
作業に必要ないファイルの更新などを防ぐ意味でも管理フォルダの設定を忘れずに行うようにしましょう。
拡張機能の追加について
拡張機能を追加することでVSエディタで使用可能な処理が増やす事ができます。
参考までにいくつかの拡張機能を紹介します。
- zenkaku
- html内の全角文字のスペースを可視化してくれるプラグイン
- Live Server
- HTMLプレビュープラグイン。エディターと同期してプレビューする
エディターのカスタマイズについて
エディターの個別カスタマイズは左下の歯車のアイコン→「設定」の項目から呼び出せます。
下は対応する括弧の色設定です。エディターの基本配色を上書きする形で設定していきます。
詳しいカスタマイズは公式マニュアルを参考にしましょう。
カスタム例
対応する括弧の色を変更します。
"editorBracketMatch.background": "#ffee01",
"editorBracketMatch.border": "#ff0000"
