見出し画像

Visual Studio Codeのテンプレートの書き方

Tomo8er

■前置き

こんにちは！Tomo8erです。
今回は、Visual Studio Code（VSCode）のテンプレートの書き方を紹介します。
（HTMLで、headerやメタデータなどもあったテンプレートがあったらいいのに…）という悩みも解決！
それでは、見ていきましょう！


■テンプレート作成

1. スニペット (Snippets)

スニペットは、頻繁に使用するコードの断片を簡単に挿入できるテンプレートです。スニペットを使用することで、コードの入力を迅速化し、ミスを減らすことができます。

使用方法:

  • File > Preferences > User Snippets に移動し、特定の言語やグローバルなスニペットファイルを作成します。

  • JSON形式でスニペットを定義し、prefix, body, description などのフィールドを設定します。

では、テンプレートのテンプレートを見てみましょう。（テンプレートのテンプレートとは）

{
    "HTML Template with Metadata": {
        "prefix": "htmltemplate",
        "body": [
            "<!DOCTYPE html>",
            "<!--HTML5 日本語　右から左読み-->",
            "<html lang=\"ja\" dir=\"ltr\">",
            "",
            "<head>",
            "  <!-- メタデータ -->",
            "  <meta charset=\"UTF-8\">",
            "",
            "  <!--ビューポート-->",
            "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "",
            "  <meta name=\"description\" content=\"${1:説明をここに}\">",
            "  <meta name=\"keywords\" content=\"${2:キーワードをここに}\">",
            "  <meta name=\"robots\" content=\"index, follow\">",
            "",
            "  <!-- Open Graph プロトコル (SNS共有用) -->",
            "  <meta property=\"og:title\" content=\"${3:○○}\">",
            "  <meta property=\"og:url\" content=\"${4:URLをここに}\"> <!-- ページのURLを指定 -->",
            "  <meta property=\"og:type\" content=\"website\">",
            "  <meta property=\"og:image\" content=\"${5:images/logo.png}\">",
            "  <meta property=\"og:image:alt\" content=\"${6:○○サムネイル画像}\">",
            "  <meta property=\"og:locale\" content=\"ja_JP\">",
            "",
            "  <meta http-equiv=\"cache-control\" content=\"no-cache\">",
            "  <meta http-equiv=\"pragma\" content=\"no-cache\">",
            "  <meta http-equiv=\"expires\" content=\"0\">",
            "  <meta name=\"format-detection\" content=\"telephone=no\">",
            "  <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
            "",
            "  <!-- リンク -->",
            "  <link rel=\"stylesheet\" href=\"${7:css/style.css}\">",
            "  <link rel=\"shortcut_icon\" href=\"${8:favicon.ico}\">",
            "  <link rel=\"apple-touch-icon\" href=\"${9:webclip152.png}\">",
            "",
            "  <title>${10:サイトタイトル}</title>",
            "</head>",
            "",
            "<body>",
            "  <!-- ヘッダー -->",
            "  <header>",
            "    <!-- グローバルナビゲーション -->",
            "    <nav id=\"global_navi\" aria-label=\"メインナビゲーション\">",
            "      <ul>",
            "        <li class=\"current\">",
            "          <a href=\"index.html\">HOME</a>",
            "        </li>",
            "        <li><a href=\"\"></a></li>",
            "        <li><a href=\"\"></a></li>",
            "        <li><a href=\"\"></a></li>",
            "      </ul>",
            "    </nav>",
            "  </header>",
            "",
            "  <!-- メイン -->",
            "  <main id=\"main\">",
            "  </main>",
            "",
            "  <!-- フッター -->",
            "  <footer>",
            "    <nav id=\"footer_nav\">",
            "      <ul>",
            "        <li><a href=\"index.html\">HOME</a></li>",
            "        <li><a href=\"policy.html\">プライバシーポリシー</a></li>",
            "        <li><a href=\"contact.html\">お問い合わせ</a></li>",
            "      </ul>",
            "    </nav>",
            "    <small id=\"copyright\">&copy; <span id=\"2005\"></span> ${11:○○}. All rights reserved.</small>",
            "  </footer>",
            "",
            "  <!-- JavaScript -->",
            "",
            "</body>",
            "</html>"
        ],
        "description": "HTML Template with common metadata tags"
    }
}

2. 拡張機能 (Extensions)

VSCodeには、多くの拡張機能があり、それらの中にはテンプレートを提供するものもあります。例えば、プロジェクトの構造や設定ファイルのテンプレートを提供する拡張機能があります。

使用方法:

  • VSCodeの拡張機能マーケットプレイスから適切な拡張機能をインストールします。

  • インストール後、コマンドパレット (Ctrl+Shift+P) を使用して、拡張機能が提供するテンプレートを利用します。

3. コード生成ツール

特定のフレームワークや言語に特化したテンプレートを提供するツールがあります。例えば、Angular CLI や Create React App は、それぞれAngularとReactのプロジェクトを迅速に開始するためのテンプレートを提供します。
使用方法:

  • ターミナルでCLIツールをインストールし、コマンドを実行してプロジェクトテンプレートを生成します。

npx create-react-app my-app
ng new my-angular-app

4. プロジェクトテンプレート

VSCodeで新しいプロジェクトを開始する際に、プロジェクトの基本構造や設定を事前に整えたテンプレートを使用することができます。例えば、GitHubや他のリポジトリにあるスターターテンプレートをクローンすることがよくあります。

使用方法:

  • GitHubリポジトリからテンプレートプロジェクトをクローンします。

git clone https://github.com/username/project-template.git
cd project-template

（usernameなどは実際のものに変えてください。）

5. 設定ファイルテンプレート

特定の設定ファイル（例: .vscode/settings.json, .editorconfig, launch.json）のテンプレートを用意して、プロジェクト全体の開発環境を統一することができます。

使用方法:

  • プロジェクトのルートディレクトリに .vscode フォルダを作成し、その中に settings.json や launch.json などの設定ファイルを配置します。

■まとめ的な

これらのテンプレートをうまく活用することで、効率的かつ効果的にコーディングを進めることができ、プロジェクトの一貫性と品質を保つことができます。

この記事が気に入ったらサポートをしてみませんか？