VS Codeの初期設定を整える
テーマ、保存、自動整形、ターミナルを設定し最初のフォルダーを開く手順です。開始位置、設定値、完了確認、問題時の見直し方まで具体的に説明します。
公開 · 更新 · FaultNote 編集方針
この記事が役立つ人・作業前の準備
- Visual Studio Codeを初めて使う人
- VS Codeの初期設定を整える操作を安全に確認したい人
用意するもの
- Documentsにweb-practiceフォルダーを作り、VS Codeを公式サイトから導入する。
準備と開始位置を確認する
Documentsにweb-practiceフォルダーを作り、VS Codeを公式サイトから導入する。
機能を開いて設定する
- ［ファイル］>［フォルダーを開く］でweb-practiceを選ぶ。Explorerの［新しいファイル］でindex.htmlを作り、html:5を入力して候補を確定しCtrl+Sで保存する。
- Ctrl+,で設定を開く。Userは全案件共通、Workspaceはこのフォルダーだけに適用されるため、Workspace側でAuto SaveをafterDelay、Auto Save Delayを1000、Format On Saveをオンにする。
完了させて結果を確認する
- index.htmlの字下げを崩してShift+Alt+Fを押す。［ターミナル］>［新しいターミナル］を開き、現在地がweb-practiceであることを確認する。
問題を直して安全に終了する
外部から入手したフォルダーではWorkspace Trustを安易に許可しない。Workspace設定は.vscode/settings.jsonとして共有される場合がある。
- HTMLが整形されないときは右クリック［ドキュメントのフォーマット］>［既定のフォーマッターの構成］でHTML Language Featuresを選ぶ。
注意点・利用条件
- 外部から入手したフォルダーではWorkspace Trustを安易に許可しない。Workspace設定は.vscode/settings.jsonとして共有される場合がある。
よくある質問
Visual Studio Codeで目的の項目が見つからない場合は？
HTMLが整形されないときは右クリック［ドキュメントのフォーマット］>［既定のフォーマッターの構成］でHTML Language Featuresを選ぶ。
VS Codeの初期設定を整える操作で特に注意する点は？
外部から入手したフォルダーではWorkspace Trustを安易に許可しない。Workspace設定は.vscode/settings.jsonとして共有される場合がある。
公式情報・確認日
情報確認日：。対応OS・プラン・画面構成の変更は、以下の公式情報で確認できます。
関連する活用ガイド
- Chromeで仕事用と個人用プロファイルを分ける
- Edgeの垂直タブで多数のページを整理する
- Firefox Syncでブックマークを端末間同期する
- Thunderbirdへメールアカウントを追加する
- OneDriveで期限と権限を確認して共有リンクを作る
- Google Driveのファイルをオフラインで使う