VSCode閉じタグ自動入力を完璧に設定！HTML/JSX/XMLを効率化する全テクニック

HTMLを書いていて、<div>と入力した後に</div>を手動で入力するのは面倒ですよね。タグ名を変更する時も、開始タグと閉じタグの両方を修正するのは二度手間です。

実は、VSCodeには閉じタグを自動的に入力・管理する強力な機能があります。設定次第で、タグの入力時間を半分以下に短縮できるんです。

しかも、HTML だけでなく、React の JSX、Vue のテンプレート、XML など、様々なマークアップ言語に対応可能。タグ名を変更すれば、閉じタグも自動的に変更される機能まであります。

この記事では、VSCodeの閉じタグ自動化機能を完璧に設定する方法から、便利な拡張機能、トラブルシューティングまで、初心者でもすぐに実践できるように詳しく解説していきます。

スポンサーリンク

1. VSCodeの標準機能での閉じタグ設定

HTML/XMLの基本設定

VSCodeには標準で閉じタグのサポート機能があります。

基本的な自動補完設定：

// settings.json
{
  // HTMLの自動クローズタグ
  "html.autoClosingTags": true,
  
  // 入力補助の設定
  "html.completion.attributeDefaultValue": "doublequotes",
  
  // ミラーカーソル（開始・終了タグ同時編集）
  "html.mirrorCursorOnMatchingTag": true,
  
  // タグの自動作成
  "html.autoCreateQuotes": true,
  
  // フォーマット時の設定
  "html.format.wrapLineLength": 120,
  "html.format.wrapAttributes": "auto"
}

言語別の設定

各言語での自動クローズ設定：

{
  // JavaScript/TypeScript（JSX/TSX）
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true,
  
  // XML
  "xml.autoClosingTags": true,
  
  // Vue
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  
  // PHP
  "[php]": {
    "editor.autoClosingBrackets": "always"
  }
}

ミラーカーソル機能の活用

開始タグと閉じタグを同時に編集する機能です。

<!-- タグ名を変更すると、閉じタグも自動で変更される -->
<div>  <!-- divをspanに変更すると -->
  コンテンツ
</div> <!-- 自動的に</span>になる -->

設定方法：

{
  "html.mirrorCursorOnMatchingTag": true,
  "html.mirrorCursorOnMatchingTagTimeout": 200  // 反応速度（ミリ秒）
}

2. 必須拡張機能「Auto Close Tag」

インストールと基本設定

最も人気のある閉じタグ自動化拡張機能です。

インストール方法：

1. 拡張機能タブを開く（Ctrl + Shift + X）
2. "Auto Close Tag" を検索
3. Jun Han 作のものをインストール

基本設定：

{
  // Auto Close Tag の有効化
  "auto-close-tag.enableAutoCloseTag": true,
  
  // 自己完結型タグも自動クローズ
  "auto-close-tag.enableAutoCloseSelfClosingTag": true,
  
  // 対応言語の設定
  "auto-close-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "svelte"
  ],
  
  // 除外タグの設定
  "auto-close-tag.excludedTags": [
    "area",
    "base",
    "br",
    "col",
    "embed",
    "hr",
    "img",
    "input",
    "link",
    "meta",
    "param",
    "source",
    "track",
    "wbr"
  ]
}

高度なカスタマイズ

特定のタグだけを制御：

{
  // フルHTMLタグのみ有効
  "auto-close-tag.fullMode": true,
  
  // SublimeText風の動作
  "auto-close-tag.SublimeText3Mode": true,
  
  // カスタムルール
  "auto-close-tag.disableOnLanguage": [
    "markdown",
    "plaintext"
  ]
}

3. タグ名同期の神機能「Auto Rename Tag」

Auto Rename Tagの導入

開始タグを変更すると、閉じタグも自動的に変更される拡張機能です。

設定方法：

{
  // Auto Rename Tag の有効化
  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  
  // パフォーマンス設定
  "editor.renameOnType": true,
  
  // リネーム時の遅延（ミリ秒）
  "auto-rename-tag.delay": 100
}

実際の動作例

<!-- Before: divタグ -->
<div class="container">
  <div class="content">
    テキスト
  </div>
</div>

<!-- After: divをsectionに変更すると自動的に -->
<section class="container">
  <section class="content">
    テキスト
  </section>
</section>

4. Emmetによる高速タグ入力

Emmetの基本展開

Emmetは略語から HTML を高速生成する強力な機能です。

基本的な使い方：

<!-- div.container と入力してTabキー -->
<div class="container"></div>

<!-- ul>li*3 と入力してTabキー -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<!-- div#app>header+main+footer と入力 -->
<div id="app">
  <header></header>
  <main></main>
  <footer></footer>
</div>

Emmet設定のカスタマイズ

{
  // Emmetの有効化
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact",
    "vue-html": "html",
    "razor": "html",
    "plaintext": "pug"
  },
  
  // トリガーキーの設定
  "emmet.triggerExpansionOnTab": true,
  
  // カスタムスニペット
  "emmet.snippets": {
    "html": {
      "snippets": {
        "btn": "<button class=\"btn\">${1:Click me}</button>",
        "card": "<div class=\"card\">\n\t<div class=\"card-header\">${1:Title}</div>\n\t<div class=\"card-body\">${2:Content}</div>\n</div>"
      }
    }
  },
  
  // 自動展開の設定
  "emmet.showExpandedAbbreviation": "always",
  "emmet.showSuggestionsAsSnippets": true
}

JSX/TSXでのEmmet設定

React開発でEmmetを使う設定：

{
  // JSX/TSXでEmmetを有効化
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  
  // JSX用の設定
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "typescript": "tsx"
  },
  
  // className に変換
  "emmet.preferences": {
    "jsx.className": true,
    "jsx.selfClosingTag": true
  }
}

5. React/JSX での閉じタグ自動化

JSX特有の設定

{
  // JSX用の自動クローズ設定
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true,
  
  // React Snippets との連携
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.autoClosingBrackets": "always"
  },
  
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.autoClosingBrackets": "always"
  },
  
  // 自己完結型タグの設定
  "javascript.preferences.jsxAttributeCompletionStyle": "auto",
  
  // Fragmentの扱い
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

Reactコンポーネントの自動補完

// 入力例
<MyComp  // ここでTabまたはEnterを押すと

// 自動的に補完
<MyComponent></MyComponent>

// 自己完結型の場合
<MyComponent />

カスタムコンポーネント用設定：

{
  // コンポーネント名の自動インポート
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,
  
  // パスの自動補完
  "javascript.suggest.paths": true,
  "typescript.suggest.paths": true
}

6. Vue.jsでの閉じタグ設定

Veturを使った設定

Vue.js開発で必須の拡張機能です。

{
  // Vetur の基本設定
  "vetur.format.enable": true,
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  
  // テンプレート内の自動補完
  "vetur.completion.autoImport": true,
  "vetur.completion.tagCasing": "kebab",
  
  // スキャフォールディング
  "vetur.completion.scaffoldSnippetSources": {
    "workspace": "💼",
    "user": "🔧",
    "vetur": "✌"
  },
  
  // Emmet統合
  "vetur.emmet": "always"
}

Vueテンプレートのカスタムスニペット

{
  "Vue Component": {
    "prefix": "vcomp",
    "body": [
      "<template>",
      "  <div class=\"${1:component-name}\">",
      "    $0",
      "  </div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '${1:ComponentName}'",
      "}",
      "</script>",
      "",
      "<style scoped>",
      ".${1:component-name} {",
      "  ",
      "}",
      "</style>"
    ]
  }
}

7. その他の便利な拡張機能

Tag Inserter

選択したテキストをタグで囲む拡張機能：

{
  "tagInserter.tagList": [
    "div",
    "span",
    "p",
    "strong",
    "em",
    "section",
    "article"
  ],
  
  "tagInserter.autoClose": true,
  "tagInserter.spaceBeforeClosingBracket": false
}

htmltagwrap

選択範囲をHTMLタグでラップ：

使用方法：
1. テキストを選択
2. Alt + W
3. タグ名を入力

例：
"Hello World" を選択して Alt + W → div と入力
結果：<div>Hello World</div>

Bracket Pair Colorizer（括弧の色分け）

{
  "bracket-pair-colorizer-2.colors": [
    "Gold",
    "Orchid",
    "LightSkyBlue"
  ],
  
  "bracket-pair-colorizer-2.highlightActiveScope": true,
  "bracket-pair-colorizer-2.showBracketsInGutter": true
}

8. パフォーマンスとトラブルシューティング

よくある問題と解決策

問題1：閉じタグが二重に入力される

// 解決策：競合する設定を無効化
{
  "html.autoClosingTags": false,  // 標準機能を無効化
  "auto-close-tag.enableAutoCloseTag": true  // 拡張機能のみ使用
}

問題2：特定のファイルで動作しない

// 言語モードの確認と設定
{
  "files.associations": {
    "*.jsx": "javascriptreact",
    "*.tsx": "typescriptreact",
    "*.vue": "vue"
  }
}

問題3：タグの同期が遅い

// パフォーマンス調整
{
  "html.mirrorCursorOnMatchingTagTimeout": 100,  // 速度を上げる
  "auto-rename-tag.delay": 50,  // 遅延を減らす
  
  // 大きなファイルでの制限
  "editor.largeFileOptimizations": true
}

言語モードの確認方法

1. 右下のステータスバーで言語モードを確認
2. クリックして適切な言語を選択
3. または以下のコマンドを使用：

コマンドパレット（Ctrl+Shift+P）
→ "Change Language Mode"
→ 適切な言語を選択

9. カスタムスニペットで更に効率化

HTMLスニペットの作成

// File → Preferences → User Snippets → html.json
{
  "HTML5 Boilerplate": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"${1:ja}\">",
      "<head>",
      "    <meta charset=\"UTF-8\">",
      "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "    <title>${2:Document}</title>",
      "</head>",
      "<body>",
      "    $0",
      "</body>",
      "</html>"
    ]
  },
  
  "Bootstrap Card": {
    "prefix": "bscard",
    "body": [
      "<div class=\"card\">",
      "    <div class=\"card-header\">",
      "        ${1:Header}",
      "    </div>",
      "    <div class=\"card-body\">",
      "        <h5 class=\"card-title\">${2:Title}</h5>",
      "        <p class=\"card-text\">${3:Content}</p>",
      "    </div>",
      "</div>"
    ]
  }
}

Reactコンポーネントスニペット

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react'",
      "",
      "const ${1:ComponentName} = () => {",
      "    return (",
      "        <div>",
      "            $0",
      "        </div>",
      "    )",
      "}",
      "",
      "export default ${1:ComponentName}"
    ]
  },
  
  "useState Hook": {
    "prefix": "ust",
    "body": [
      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialState})"
    ]
  }
}

10. 言語別推奨設定まとめ

HTML/CSS開発

{
  "html.autoClosingTags": true,
  "html.mirrorCursorOnMatchingTag": true,
  "auto-close-tag.enableAutoCloseTag": true,
  "auto-rename-tag.activationOnLanguage": ["html"],
  "emmet.triggerExpansionOnTab": true
}

React開発

{
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true,
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  }
}

Vue開発

{
  "vetur.format.enable": true,
  "vetur.completion.autoImport": true,
  "auto-close-tag.activationOnLanguage": ["vue"],
  "auto-rename-tag.activationOnLanguage": ["vue"]
}

Angular開発

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "angular.enable-strict-mode-prompt": false,
  "auto-close-tag.activationOnLanguage": ["html", "typescript"]
}

よくある質問（FAQ）

Q1: 自己完結型タグ（<br />など）も閉じタグが入力されてしまう

A: 除外設定を追加します：

{
  "auto-close-tag.excludedTags": [
    "br", "hr", "img", "input", "link", "meta", 
    "area", "base", "col", "embed", "param", 
    "source", "track", "wbr"
  ],
  
  "auto-close-tag.enableAutoCloseSelfClosingTag": false
}

Q2: JSXでclassNameが補完されない

A: Emmetの設定を調整します：

{
  "emmet.preferences": {
    "jsx.className": true
  },
  
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

Q3: 特定のプロジェクトだけ設定を変えたい

A: ワークスペース設定を使用：

// .vscode/settings.json
{
  "auto-close-tag.enableAutoCloseTag": false,
  "html.autoClosingTags": true
}

Q4: タグの自動整形も同時にしたい

A: Prettierと組み合わせます：

{
  "editor.formatOnSave": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.htmlWhitespaceSensitivity": "css",
  "prettier.printWidth": 120
}

Q5: PHPファイルでHTMLタグが補完されない

A: 言語の関連付けを設定：

{
  "files.associations": {
    "*.php": "php"
  },
  "auto-close-tag.activationOnLanguage": [
    "php", "html"
  ],
  "emmet.includeLanguages": {
    "php": "html"
  }
}

まとめ：閉じタグ自動化で開発スピードを2倍に

VSCodeの閉じタグ自動化機能を適切に設定することで、マークアップの入力速度は劇的に向上します。

設定の優先順位：

  1. 必須の拡張機能をインストール
    • Auto Close Tag
    • Auto Rename Tag
    • 言語別拡張機能（Vetur等）
  2. 基本設定を最適化
    • 言語別の自動クローズ設定
    • Emmetの有効化
    • ミラーカーソル設定
  3. カスタマイズで効率化
    • カスタムスニペット作成
    • 除外タグの設定
    • ショートカットキー設定

これらの設定を組み合わせることで、HTMLやJSXの記述時間を大幅に短縮できます。

最初は設定に時間がかかるかもしれませんが、一度設定してしまえば、その後の開発効率は格段に向上します。

快適なマークアップ環境で、より創造的な開発に集中しましょう！

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました