Visual Studio Codeのテンプレートの書き方
■前置き
こんにちは！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\">© <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-app4. プロジェクトテンプレート
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 などの設定ファイルを配置します。
■まとめ的な
これらのテンプレートをうまく活用することで、効率的かつ効果的にコーディングを進めることができ、プロジェクトの一貫性と品質を保つことができます。
この記事が参加している募集
サポートの代わりに𝕏 シェアお願いします！(かわりにするんかい！SNS𝕏限定かい！)