WIING WebServiceCloudのWordPress用メディアブログテーマです。-WIING MEDIA

ひかえめに学ぶしあわせ-WIING MEDIA

  • twitter WIING WebServiceCloud
  • note WIING WebServiceCloud
  • WIING media ログイン
HOME  〉Web制作 〉HTML 〉VS Codeよく使うコマンドまとめ

2025.12.04 Thu  2025.12.05

VS Codeよく使うコマンドまとめ

Web制作

VS Codeよく使うコマンドまとめのイメージ

VScodeでよく使うコマンド

VS Codeは最低限の機能のみがGUI化されているだけなので、基本的にVS Codeではコードパレットからコマンドを指定するかショートカットキーでマークアップ効率があがる機能が見つけられます。
VScodeコマンド目次
  1. 基本操作
  2. ファイル・編集系
  3. UI/表示設定
  4. プロファイル
  5. 設定(Settings)
  6. スニペット
  7. 拡張機能
  8. Git / ソース管理
  9. 統合ターミナル
  10. デバッグ

1.基本操作

VS Code + Git で新規リポジトリを作る方法

1. ローカルリポジトリ(GitHub なし)

  1. 空のフォルダを作成
  2. VS Code でそのフォルダを開く
  3. Ctrl + Shift + P → Git: Initialize Repository
  4. 背後で git init が実行され .git フォルダが生成される
  5. ファイルを作成・編集
  6. ソース管理パネルでステージ → 「main」と入力してコミット

これで ローカルのみの Git リポジトリ が作成されます。

2. GitHub Desktop を使う場合

  1. GitHub Desktop で「New Repository」を選択
  2. 名前・フォルダを指定して作成
  3. 必要に応じて VS Code で開く
  4. コミット・プッシュが GUI 上で可能

GitHub Desktop は GUI で作業を簡単にする補助ツール であり、基本必須ではありません。

VS Code + Git でリポジトリを削除する方法

1. ローカルリポジトリを削除する場合(PC 上だけ)

  1. 方法:単純にフォルダごと削除する
  2. .git フォルダも含めて削除すれば、Git 管理がなくなる
  3. VS Code 上でも自動的にリポジトリ認識は消える

注意:削除しても GitHub 上のリモートには影響しません

2. GitHub 上のリポジトリを削除する場合

  1. GitHub Web にログイン 削除したいリポジトリを開く
  2. Settings → Danger Zone → Delete this repository
  3. リポジトリ名を入力して確認 → 削除

一度削除すると元に戻せません

  • VS Code だけで GitHub 上のリポジトリを削除することはできない

VS Code は Git クライアントとしての機能のみ リモート上の削除は Web か GitHub CLI (gh repo delete) で行う必要があります

GitHub Desktopは必須ではない

2.ファイル・編集

新規ファイル追加と保存

VScodeのファイル操作は基本的にはエクスプローラー的な構造で追加、編集、保存などを行います。

スタート画面(Welcome Page)には「新しいファイル」「ファイルを開く」「フォルダを開く」などがあるので、新しいファイルを開くとNewWindowが開かれるので必要な記述を行い、ファイル保存します。

新規ファイルは自動で 「ステージされていない変更(Unstaged Changes)」 に追加されるので、コミットして履歴を保存する対象にするため、ステージングする必要があります。コミット時はコメントの入力が必須ですが、コミット時に同時にステージングも行えます。

コミットしたファイルは、同期することが可能になり、同期するボタンを押すことで、GitHubとファイルを同期することが可能です。

ディレクトリはフォルダを開くなどでダイアログを表示させ、右クリックで通常のフォルダ追加方法でフォルダを追加します。

ファイルは保存後ステージングしてコミットする

5. 設定(Settings)

VS Code:スニペットの追加方法(最短手順)
① コマンドパレットを開く

Ctrl + Shift + P

② 「スニペット」と入力し、以下を選ぶ

Configure User Snippets (日本語の場合:ユーザースニペットの設定)

③ 作成方法を選ぶ
既存の言語を選ぶ(例:HTML、CSS、JavaScript など)  → その言語専用の xxx.json が自動生成される

New Global Snippets file  → 全言語で使えるスニペット

New Snippets file for …  → プロファイル固有のスニペット

④ 自動生成された JSON にスニペットを追加
例(prefix=basecss):
{
  "baseFontSetting": {
    "prefix": "basecss",
    "body": [
      "html {",
      "  font-size: 100%;",
      "}",
      "body {",
      "  font-size: 1.0rem;",
      "}"
    ],
    "description": "HTML+BODY 基本文字設定"
  }
}
⑤ 保存する

Ctrl + S

その瞬間にスニペットが有効になる。

6. スニペット

HTMLコードの整形方法(確実に動く手順)
1. ショートカットで整形

・Windows Shift + Alt + F

・Mac Shift + Option + F

2. コマンドパレットから整形
  1. Ctrl + Shift + P
  2. 「Format Document」または「ドキュメントのフォーマット」と入力
  3. Enter
3. 自動整形を設定(任意)
保存時に自動で整形したい場合:
  1. Ctrl + Shift + P
  2. 「Preferences: Open Settings (JSON)」を開く
  3. settings.json に以下を追加: “editor.formatOnSave”: true

これで保存のたびに HTML が整います。

[PR]
  • Google 純正 Chromecastのイメージ
  • Fire TV Stick 4K 第2世代

    映画館のような4K体験 | ストリーミングメディアプレイヤー【2023年秋発売】

    Amazonで購入

  • [PR]
  • 実務学習スクール WIING Creator Camp

    本気で稼ぐ在宅ワーク
    将来役立つ仕事スキルを Webクリエイティブを通じて学ぶ
  • 実装構成例 WIING MEMBER WordPressテーマ

    WIING MEMBERは会員制サイト向け汎用・拡張性抜群のWordPress軽量テーマです。

WIING MEDIA twitter

WIING MEDIA facebook

掲載情報につきましては当社が独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。