VScode – mimihokuro

【VS Code】Live Sass Compilerで特定のフォルダ・ファイルを除外する方法｜設定が反映されない・重い時の対処法

Posted on 2026.07.132026.07.13 by mimihokuro

VS Codeの拡張機能「Live Sass Compiler」を使っていると、「コンパイルが遅くて動作が重い」「コンパイル不要な外部ライブラリ（Bootstrapなど）まで出力されてしまう」といった悩みに直面することがあります。

これらの問題は、特定のフォルダやファイルをコンパイルの監視対象から「除外」することで劇的に改善されます。

この記事では、Live Sass Compilerで不要なファイルを除外する具体的な設定手順から、設定したのに除外されない（効かない）場合のトラブルシューティングまでを分かりやすく解説します。

※Live Sass Compilerのインストールはこちら

Live Sass Compiler – Visual Studio Marketplace

Extension for Visual Studio Code – Compile Sass or Scss to CSS at realtime with live browser reload.

Live Sass Compilerで特定のフォルダを除外する設定手順

特定のフォルダを監視対象から外すには、VS Codeの設定ファイルである settings.json に追記を行います。個人的な環境だけでなく、チーム開発でも設定を共有できるよう、今回はワークスペース設定（プロジェクト限定の設定）で行う方法を推奨します。

ステップ1：プロジェクト内に `.vscode` フォルダを作成する

VS Codeで対象のプロジェクト（フォルダ）を開きます。
プロジェクトの一番上の階層（ルートディレクトリ）に、.vscode という名前の新しいフォルダを作成します。
その中に settings.json というファイルを作成します。

ステップ2：`excludeList` に除外パスを記述する

作成した settings.json に、以下のコードを記述します。すでに他の設定が書かれている場合は、波括弧 {} の中に追記してください。

{
  "liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    "**/vendor/**",
    "**/src/assets/scss/ignored-folder/**"
  ]
}

上記の例では、node_modules フォルダ、vendor フォルダ、そして特定の ignored-folder を丸ごとコンパイルの対象から除外しています。ご自身のプロジェクト構造に合わせてパスを書き換えてください。

記述における重要な注意点（ワイルドカードの意味）

パスの書き方には独自のルールがあります。アスタリスク（*）の使い方を間違えると正常に機能しません。

/（冒頭）：プロジェクト内の「任意の階層」を意味します。これがないと、ルート直下にあるフォルダしか認識されません。
/（末尾）：そのフォルダ内の「すべてのファイルとサブフォルダ」を対象とします。これを付け忘れると、フォルダ自体は除外されても中のファイルが監視対象に残ってしまいます。

特定の「ファイル」だけを除外したい場合

フォルダ丸ごとではなく、「特定のSass/SCSSファイルだけ」を除外したい場合は、以下のようにファイル名を直接指定します。

{
  "liveSassCompile.settings.excludeList": [
    "**/src/scss/reset.scss",
    "**/src/scss/config.scss"
  ]
}

※ただし、Sassの仕様上、ファイル名の先頭にアンダースコア（_）がついているファイル（例：_variables.scss）は、自動的にパーシャル（部分ファイル）とみなされ、単体ではコンパイルされません。

そのため、わざわざ excludeList に記述する必要はありません。

設定が反映されない・効かない時のチェックリスト

設定を書いたのに除外されない場合は、以下の3点を確認してください。

1. JSONの構文エラー（カンマ忘れ）

settings.json 内に複数の設定を書いている場合、行末のカンマ（,）を忘れると構文エラーとなり、設定全体が無効化されます。ファイル内で赤線のエラーが出ていないか確認してください。

2. パス区切り文字のミス

Windows環境であっても、settings.json 内でのパス区切り文字はバックスラッシュ（\）ではなく、スラッシュ（/）を使用するのが原則です。

3. プロセスの再起動

設定を変更した直後は、古い監視プロセスが動いたままになっていることがあります。VS Code下部のステータスバーにある 「Watching…」 を一度クリックして監視を停止し、再度 「Watch Sass」 をクリックして再起動してください。

なぜ除外設定が必要なのか？（開発効率とチーム共有）

わざわざ除外設定を行う最大の理由は、開発環境のパフォーマンス低下を防ぐためです。

例えば、UIコンポーネントライブラリや他社製の巨大なCSS資産をプロジェクトに含めている場合、ファイルを保存するたびに数千行のコードが再コンパイルされます。これによりブラウザのプレビュー更新にラグが発生し、コーディングのテンポが悪化します。

今回紹介した .vscode/settings.json を使用したワークスペース設定は、Gitなどのバージョン管理でチーム内に共有できます。新しくプロジェクトに参画したメンバーも、最初から「不要なコンパイルが発生しない快適な環境」で作業を始めることが可能になります。

不要なファイルはしっかり除外して、サクサク動く快適なコーディング環境を構築しましょう！

VScodeでfutureshopパーツ管理を劇的に効率化！ローカル擬似プレビュー環境構築ガイド

Posted on 2025.11.032026.05.11 by mimihokuro

futureshop（特にコマースクリエイター）でのサイト構築・運用において、「共通ヘッダー」「フッター」「おすすめ商品リスト」といった「パーツ」の管理は頻繁に発生する業務です。

futureshopには、そんなときに便利な「パーツ」管理機能が存在し、一つ作れば様々なところで再利用することができます。

しかし、これらのHTMLパーツを修正するたびに、管理画面から編集して、ブラウザでリロードして表示確認する…という従来のフローは、非常に時間がかかり、非効率的です。

この記事では、高機能コードエディタ「Visual Studio Code (VScode)」と、いくつかの標準的なWeb技術（JavaScript）を使い、Futureshopのパーツ管理をローカル環境で擬似的に再現・プレビューする開発環境の構築方法を解説します。

この手法を採用することで、サーバーにアップロードする前に、自分のPC上でパーツの変更をリアルタイムに確認しながら、コンポーネントベースの効率的な開発フローを実現できます。

こんな方にオススメ！

Futureshopのサイト更新・デザインカスタマイズを担当するWeb制作者
パーツ修正のたびにFTPでアップロードする作業を非効率だと感じている方
ローカル環境で効率的にコーディングとプレビューを完結させたい方
VScodeをメインのエディタとして使用している方

提案する開発フローの全体像：ローカル擬似プレビューとは？

本記事で提案するのは、Futureshopの本番環境と全く同じものをローカルに構築するものではありません。そうではなく、VScodeとブラウザさえあれば実現できる、シンプルかつ効率的な「擬似プレビュー環境」です。

パーツのコンポーネント化: Futureshopで管理しているヘッダー、フッター、商品リストなどの各パーツを、個別のHTMLファイル（例: _header.html, _footer.html）としてローカルPCに保存します。
JSによるインクルード: プレビュー用のindex.html（ダミーのトップページなど）を用意し、JavaScript（fetch API）を使って、上記1の各HTMLパーツを非同期で読み込み、指定した場所に挿入（インクルード）します。
リアルタイムプレビュー: VScodeの拡張機能「Live Server」を使ってindex.htmlをブラウザで開きます。これにより、_header.htmlなどのパーツファイルを編集して保存するだけで、ブラウザが自動的にリロードされ、変更が即座に反映されます。

この環境により、本番サーバーのパスや独自タグ（例: %SHOP_URL%）を気にすることなく、純粋なHTML/CSSのコーディングに集中できます。（※本番反映時にパスの調整が必要な場合があります）

構築に必要なツール

Visual Studio Code (VScode): メインとなるコードエディタ。
VScode拡張機能: Live Server: ローカル開発用サーバーを起動し、ファイル保存時にブラウザを自動リロードさせるための必須拡張機能。

ステップ別！ローカル擬似プレビュー環境の構築

Step 1: 開発用フォルダと「パーツ」HTMLファイルの準備

まず、ローカルPCにプロジェクト用のフォルダを作成します。ここでは futureshop-local-dev という名前のフォルダを作成する例で進めます。その中に、プレビュー用のページ index.html、パーツをまとめる parts フォルダ、スクリプトを置く js フォルダ、スタイルを置く css フォルダを作成します。

フォルダ構成例

futureshop-local-dev/
│
├── index.html          # プレビュー用のメインページ
│
├── css/
│   └── style.css       # スタイルシート
│
├── js/
│   └── main.js         # パーツ読み込み用スクリプト
│
└── parts/
    ├── _header.html    # ヘッダーパーツ
    └── _footer.html    # フッターパーツ

次に、parts フォルダ内に、コンポーネントとなるHTMLファイルを作成します。ファイル名の先頭にアンダースコア _ をつけると、部分的なファイル（パーツ）であることが視覚的に分かりやすくなります。

<header style="background-color: #f0f0f0; padding: 20px; text-align: center; border-bottom: 2px solid #ccc;">
    <h1><a href="/">My Futureshop Site (Local Preview)</a></h1>
    <nav>
        <ul style="list-style: none; display: flex; justify-content: center; gap: 15px; padding: 0;">
            <li><a href="#">カテゴリ1</a></li>
            <li><a href="#">カテゴリ2</a></li>
            <li><a href="#">お問い合わせ</a></li>
        </ul>
    </nav>
</header>

<footer style="background-color: #333; color: white; padding: 30px; text-align: center; margin-top: 50px;">
    <nav>
        <ul style="list-style: none; display: flex; justify-content: center; gap: 15px; padding: 0;">
            <li><a href="#" style="color: white;">会社概要</a></li>
            <li><a href="#" style="color: white;">プライバシーポリシー</a></li>
        </ul>
    </nav>
    <p style="margin-top: 20px; font-size: 0.9em;">© 2025 My Shop. (Local Preview)</p>
</footer>

Step 2: パーツを呼び出す「プレビュー用ページ」の作成

次に、これらのパーツを読み込んで表示するための「親」となる index.html を作成します。

ポイントは、パーツを挿入したい場所に、目印となる id を持つ <div> タグ（コンテナ）を配置することです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futureshop ローカルプレビュー</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    
    <!-- ヘッダーパーツの挿入場所 -->
    <div id="header-container"></div>

    <!-- メインコンテンツ (プレビュー用のダミー) -->
    <main style="padding: 20px; max-width: 960px; margin: 20px auto; border: 1px solid #eee;">
        <h2>メインコンテンツエリア</h2>
        <p>ここはプレビュー用のダミーコンテンツです。</p>
        <p>ローカルで `_header.html` や `_footer.html` を編集・保存すると、このページのヘッダーとフッターが自動で更新されます。</p>
        
    </main>

    <!-- フッターパーツの挿入場所 -->
    <div id="footer-container"></div>

    <!-- パーツを読み込むためのスクリプト -->
    <script src="js/main.js"></script>
</body>
</html>

Step 3: JavaScriptによるHTMLインクルード処理の実装

ここがこの環境の核となる部分です。js/main.js ファイルを作成し、標準技術である fetch API を使って、各パーツHTMLを非同期で読み込み、index.html の指定コンテナに挿入する処理を記述します。

// DOM（HTML）の読み込みが完了したら実行
document.addEventListener('DOMContentLoaded', () => {

    // ヘッダーを読み込んで挿入する関数
    const loadHeader = async () => {
        try {
            // parts/_header.htmlを非同期で取得
            const response = await fetch('parts/_header.html');
            if (!response.ok) { // 読み込み失敗時はエラー
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const html = await response.text(); // 取得した内容をテキストとして読み込む
            const container = document.getElementById('header-container');
            if (container) {
                container.innerHTML = html; // コンテナにHTMLを挿入
            } else {
                console.warn('header-container が見つかりません。');
            }
        } catch (error) {
            console.error('ヘッダーの読み込みに失敗しました:', error);
        }
    };

    // フッターを読み込んで挿入する関数
    const loadFooter = async () => {
        try {
            const response = await fetch('parts/_footer.html');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const html = await response.text();
            const container = document.getElementById('footer-container');
            if (container) {
                container.innerHTML = html;
            } else {
                console.warn('footer-container が見つかりません。');
            }
        } catch (error) {
            console.error('フッターの読み込みに失敗しました:', error);
        }
    };

    // 複数のパーツ読み込みを並行して実行
    Promise.all([
        loadHeader(),
        loadFooter()
        // 他にも読み込みたいパーツがあればここに追加
        //例: loadRecommendList()
    ]);

});

このスクリプトは、index.html が読み込まれた直後に parts/_header.html と parts/_footer.html の内容を取得し、それぞれ id="header-container" と id="footer-container" の中に流し込みます。

Step 4: VScode「Live Server」でリアルタイムプレビューを実行

環境の準備は整いました。最後に、VScodeの拡張機能「Live Server」を使って、これをリアルタイムでプレビューします。

VScodeの拡張機能タブ（左側のアクティビティバー）を開きます。
検索ボックスに「Live Server」と入力し、Ritwick Deyさんが作成した拡張機能をインストールします。
インストールが完了したら、index.html ファイルを開いた状態で、VScodeの右下にあるステータスバーの「Go Live」ボタンをクリックします。
自動的にデフォルトブラウザが起動し、http://127.0.0.1:5500/index.html のようなローカルサーバーのアドレスで index.html が表示されます。

ブラウザには、index.html のメインコンテンツに加え、main.js によって読み込まれた _header.html と _footer.html の内容が組み合わさって表示されているはずです。

この状態で、VScodeに戻って parts/_header.html の内容を少し変更（例: 「カテゴリ1」を「新着アイテム」に変更）して保存してみてください。ブラウザが自動的にリロードされ、変更が即座にプレビューに反映されます。

ローカル開発の効率化と、本番環境への反映フロー

ローカルでの効率的な開発サイクル

この環境が真価を発揮するのは、CSSの調整やHTMLの構造変更を繰り返す時です。

CSSの変更: css/style.css を編集して保存すれば、即座にプレビューに反映されます。
HTMLパーツの変更: parts/_header.html のリンク構造を変更したり、新しい <div> を追加したりする作業も、保存するたびに結果を確認できます。
確認の高速化: Futureshopの管理画面を開く必要も、FTPでアップロードする待ち時間もありません。VScodeとブラウザだけで開発サイクルが完結します。

ローカルからFutureshop本番環境への反映

このローカル環境は、あくまで開発とプレビューを高速化するための「下書き・検証用」です。ローカルで作業が完了したら、その成果をFutureshopの本番環境に反映させる必要があります。

管理画面へコピー＆ペースト

ローカルのVScodeで、完成したパーツファイル（例: parts/_header.html）を開きます。
その中の HTMLコード全体をコピー します。
Futureshopの管理画面（コマースクリエイター）にログインします。
該当するパーツ（例: 「共通ヘッダー」）の編集画面を開き、コピーしたHTMLコードを貼り付けて保存します。

注意点: ローカルで img/logo.png のように記述していたパスは、Futureshopの正しいパス（例: https://.../images/logo.png や %TEMPLATES_URL%/images/logo.png といった独自タグ）に適宜修正する必要があるか確認してください。

さいごに

今回紹介した「ローカル擬似プレビュー環境」は、VScode、Live Server、そしてJavaScriptのfetch APIという標準的な技術だけで構築できます。

この環境を導入することで、開発中のトライ＆エラーを安全かつ高速なローカル環境で完結させ、完成したコードだけを本番に反映する、というモダンで安全な開発フローを実現できます。

Futureshopのパーツ管理・デザインカスタマイズの効率化に、ぜひお役立てください。

Live Serverを使ってPCブラウザだけじゃなくスマホ実機で簡単にライブプレビューする方法

Posted on 2023.07.192026.05.11 by mimihokuro

WebサイトのコーディングでVScodeを使っている方、表示確認は何を使っていますか？

おそらくLive Serverを使っている方が多いんじゃないでしょうか。

ただ、Live Serverをインストールしただけの状態で使っているとPCでしか表示確認ができなくて、スマホでの表示はブラウザのデベロッパーツールでスマホモードを使うことでしか確認できません。

スマホでの表示はデベロッパーツールだけだと不十分で、実機を使って確認しないと思わぬ表示崩れが起きていることもしばしば。

だからといって、サーバーにアップロードしてスマホ実機で確認して、問題があったら修正してまたアップロードして・・・と繰り返すのは何とも手間ですよね。

今回は、Live Serverを使ったPCもスマホ（実機）も同時に確認できる方法のご紹介です。

まずはLive Serverをインストール

初めに、Live Serverをまだインストールしていない方は下のリンクからアクセスするか、VScodeの拡張機能検索で「Live Server」と検索してインストールしてください。

[

Live Server – Visual Studio Marketplace

Extension for Visual Studio Code – Launch a development local Server with live reload feature for static & dynamic pages

marketplace.visualstudio.com

](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer "Live Server – Visual Studio Marketplace")

スマホ実機で見るための設定

インストールができたら、設定の検索から「live server use local ip」と入力して、出てきた項目にチェックを入れてください。

設定はたったこれだけです。

設定が上手くいっているか確認

表示を確認したいページでLive Serverを使って表示します。

右下の「Go Live」をクリックするか、ショートカットキー「Alt＋L→Alt＋O」でライブプレビュー開始です。

スマホで表示

PCでプレビューしたページのURLをスマホのブラウザに入力して表示確認をします。

ただ、URLをスマホのブラウザで直接打ち込んだりするのは非常に面倒くさいので、ページのQRコードを表示してスマホで読み込んでしまいましょう。

PCでのブラウザはChromeを使います。表示確認自体はChrome以外でもいいのですが、スマホとページの共有するのが簡単なので今回はChromeで進めています。
Chrome以外でもQRコード出力機能があればお好みのブラウザでOKです。

Chromeのアドレスバー（URLが表示されるところ）の右側に共有ボタンがあります。

クリックすると「QRコードを作成」という項目があるので選択します。

するとQRコードが表示されるので、スマホのQRコードリーダーで読み込むだけでスマホ実機での表示確認できるようになります。

VScodeで変更を保存した瞬間にPCとスマホの両方で変更が反映されるのが素晴らしいところですね！

スマホ対応は当たり前の時代になっているので、スマホ表示確認でお困りの方はぜひこの機能使ってみてください。

登録しておいて損なし！VScodeで開始タグから終了タグまでをパッと簡単に選択する時短ショートカットキー設定

Posted on 2023.06.152026.05.11 by mimihokuro

HTMLを編集していると開始タグから終了タグまでをパッと選択したいとき、ありませんか？

こんな感じ！

コーディング中にキーボードから手を放してマウス使って選択とか、Shift+矢印キーで小まめに選択とか地味にめんどくさい・・・。

今回はHTMLタグをショートカットキー1つで簡単に選択できる設定をご紹介します。

ショートカットキーの登録

まず設定ボタン（歯車マーク）から「キーボードショートカット」を選択します。

検索窓で「editor.emmet.action.balanceOut」と入力します。（balanceOutだけでも出てきます）

Balance (outward)横の編集ボタンをクリック

任意のキーを登録します

私はCtrl+Shift+Aで設定しています

これでキーボードから手を離さなくてもいいですし、地道に選択する必要もなくなりました！

マークアップの効率アップをしたい方はぜひとも実践してみてください。

『Code Spell Checker』でUnknown word（スペルミス）判定されないために単語を除外する方法と解除方法

Posted on 2023.04.102026.06.25 by mimihokuro

この記事はエディターにVScodeを使っている方向けとなります。

プログラミングをする上で関数や変数の命名って難しいですよねぇ😵

会社やチームで決めた命名規則に則って考えるにしても、いかに伝わりやすい名前にするか悩みやすいポイントですが、最低限タイポはなくしたいところです・・・！

タイポやスペルミスは、呼び出しのときにnot foundエラーで呼び出せなかったり、名前から何を処理するのか判断しにくくなる可能性がありますし、何より恥ずかしい・・・。

そこで便利なのが、「Code Spell Checker」です！

Code Spell Checkerとは？

その名の通りコードを監視してスペルミスがあればエラーで教えてくれるVScodeの拡張機能です。

Code Spell Checker – Visual Studio Marketplace

Extension for Visual Studio Code – Spelling checker for source code

コードでスペルミスがあれば、該当の文字に波線で教えてくれます。

「example」が「exaample」とスペルミスしているとそんな単語はありませんとエラーで教えてくれます。

【小話】Code Spell Checkerとセットで使いたい拡張機能

ちなみに上の画像のエラー箇所の右側に表示されている青い文字のエラーメッセージは「Error Lens」という拡張機能による表示です。

通常では画面下のパネルにエラー内容が表示されるので、どこの列・行でどんなエラーなのか照らし合わせするのが面倒ですが、この拡張機能を使えばどこでエラーが起きているのかが分かりやすいので「Code Spell Checker」と一緒に使うのがオススメです。

Error Lens – Visual Studio Marketplace

Extension for Visual Studio Code – Improve highlighting of errors, warnings and other language diagnostics.

スペルミスじゃないのにエラー扱いされてしまうケースも

「Code Spell Checker」はインストールするだけでもコード内のスペルミスをチェックしてくれる便利な拡張機能ですが、スペルミスじゃないのにエラー扱いされてしまうこともあります。

よくあるのが、「Qiita」や「Tailwind CSS」といった固有名詞がエラーとして引っかかってしまうケースや二つ以上の単語をキャメルケースで繋げなかったケース（「Tailwind CSS」だったら「tailwindcss」）です。

キャメルケースは自身で関数や変数の名前を設定する場合には書き換えればいいだけなのですが、インストールしたパッケージなど変更ができない場合があります。

Tailwind CSSはtailwindcssとキャメルケースでは出力されない

エラー扱いさせないために特定ワードを除外登録

処理させる上では無視しても大丈夫なのですが、いつまでもエラー判定されるのも気持ち悪いですよね。

そこでエラー判定を回避するための簡単な設定をしておきましょう！

まずエラーのあるワードにマウスホバーして、表示されたウインドウから「Quick Fix（クイックフィックス）」を選択します。（「Ctrl+.」でも表示できます）

修正候補が表示されるので、「Add～」から始まる項目を選択します。

たったこれだけです！とても簡単ですね。

「ワークスペース設定」か、「ユーザー設定」かによって登録による設定記載場所が違うので、後述する解除方法の参照先も変わってきます。

登録したワードの解除方法

間違えて登録した、一度は除外登録したけどまたエラーで返してほしいといった登録した除外ワードを解除したい場面もあると思います。

登録ワードの解除には、ユーザー単位で登録したかワークスペース単位で登録したかで設定記載場所が変わります。

ユーザー設定の場合

ユーザー設定で登録した場合は、設定画面（Ctrl+,）のsetting.jsonから登録を解除していきます。

setting.jsonを開いたら「cSpell.userWords」から登録解除したいワードを削除します。

画像では「tailwindcss」がエラー扱いしないように登録しています

ワークスペース設定の場合

ワークスペース設定の場合は、ユーザー設定と同様に設定画面からも設定できますが、エクスプローラーツリーからでも参照することができます。

除外ワードの登録でワークスペースを選択した場合はエクスプローラーツリーの「.vscode」フォルダ直下に「setting.json」が作られています。

ファイルを開いて「cSpell.userWords」から登録解除したいワードを削除するだけでOKです。

最後に

いかがでしたか？「Code Spell Checker」はプログラミングだけでなくドキュメント作成時にも使えて、しかも導入も登録・解除も簡単なので、これからVScodeを始める方もすでにバリバリVScode使ってたけど入れてなかった！という方にはぜひ一緒に入れてほしい拡張機能です。

VScodeをこれから使ってみる、という方はオススメの設定や拡張機能をこちらの記事で紹介しているので参考にしてみてください。

Webデザイン始めるならVScodeイチオシ！VScodeを使うための設定手順とオススメ拡張機能

こんにちは！みみほくろです。近年のWebデザイン人気は勢いを増すばかりで、手軽に始められるのが魅力的ですよね。 Progateのような教材で学習を終えて、「さあ、自分だけのWebサイトを作るぞ！」と意気込んだものの開発環境で躓くことも少な…

それでは「Code Spell Checker」で快適なプログラミング生活をお過ごしください！

Webデザイン始めるならVScodeイチオシ！VScodeを使うための設定手順とオススメ拡張機能

Posted on 2023.02.112026.06.25 by mimihokuro

こんにちは！みみほくろです。

近年のWebデザイン人気は勢いを増すばかりで、手軽に始められるのが魅力的ですよね。

Progateのような教材で学習を終えて、「さあ、自分だけのWebサイトを作るぞ！」と意気込んだものの開発環境で躓くことも少なくありません。

そんなWebデザインをこれから始める人にはVScodeがオススメです。

VScodeとは

VScodeはVisual Studio Codeの略称で、Microsoftによって提供され初心者からベテランまで幅広く支持されている無料エディターです。

その人気の秘密は大まかに挙げると以下のようになります。

拡張機能が豊富
サクサク動く
見た目を自分好みにカスタマイズできる
補完機能が様々なプログラミング言語に標準対応している
便利なショートカットキー
何より高機能なのに無料！

こんな感じでメリット盛りだくさんです。

VScodeはインストールしてすぐに使い始められますが、初めは必要最低限の機能しか持っていません。逆に言えば不要なパッケージみたいなものが入っていないのでカスタマイズしやすく、必要な拡張機能や設定を追加して自分だけの環境を作り上げることができます。

例えばPHPに特化した環境を作りたい場合は「PHP Debug」や「PHP Intelephense」、JavaScriptだったら「ESLint」や「Nextjs snippets」といった具合に、使うプログラミング言語や分野に合わせて組み立てができるところがVScodeのいいところです。

VScodeを使うための事前準備

さてVScodeの魅力は伝わったでしょうか？

それでは実際にインストールして使えるように設定していきましょう！

まずはインストール

インストーラーはこちらからダウンロードできます。

Visual Studio Code – The open source AI code editor | Your home for multi-agent development

Visual Studio Code is a free, open source AI code editor. Build with AI agents that plan, code, and debug for you. Manage multi-agent workflows across environments on Linux, macOS, and Windows.

code.visualstudio.com

https://code.visualstudio.com/Download

それぞれお使いのOSのものを選んでください。

クリックするとインストーラーがダウンロードされるので起動し、基本的に何も変更なしで進めていただいて構いません。

インストールが完了したらすぐにでも使い始めることができますが、より使いやすくするために、これだけは入れておくといい！という拡張機能をいくつか入れていきましょう。

日本語設定

インストールが完了してVScodeを開くとすべて英語表記になっているので、日本語がいいという場合は日本語に設定していきましょう。（英語表記で問題ない方は設定する必要はありませんのでスキップ）

といってもデフォルトでは日本語に対応しておらず、日本語に設定するためには拡張機能をインストールする必要があります。

左のメニューから拡張機能を選択して、検索窓から「japanese」と検索するか、下記のリンク先からインストールボタンを押すとブラウザが開きますので、インストールボタンをクリックしVScodeを開くかどうか聞かれるので許可してインストールしましょう。

左メニューの拡張機能を選択し、検索窓に「japanese」と入力。検索結果に出てきた「Japanese Language Pack for Visual Studio Code」をインストールする

キャプチャーではすでにインストールされているのでインストールボタンは表示されていません。

Japanese Language Pack for Visual Studio Code – Visual Studio Marketplace

Extension for Visual Studio Code – Language pack extension for Japanese

VScodeではボタン一つでインストールもアンインストールもできて手軽に拡張機能を選択できるのもメリットの一つです。

今は使わないけどアンインストールするほどでもないって時にもボタン一つで無効化できるのもいいですね！

フォーマッター設定

フォーマッターとはコマンド一つでコードを見やすく整形してくれる大変便利な機能です。

フォーマッターのいいところは、過去に自分で書いたコードを見返すときはもちろん、他者のコードレビューのときでも可読性を高く保ってくれることだけでなく、複数人で行うチーム開発で共通のフォーマッターを使えば、誰でも同じルールでコーディングができるので、インデントやスペースなど書き方のクセを少なくできてソース管理がしやすくなるメリットもあります。

Prettierインストール

それでは、フォーマッターをインストールしましょう。

VScodeにはデフォルトでフォーマッターが入っていますが必要最低限の整形しかしないので、より効率的に整形してくれるフォーマッターを別でインストールすることをオススメします。

よく使われているのは『Prettier』です。

[

Prettier – Code formatter – Visual Studio Marketplace

Extension for Visual Studio Code – Code formatter using prettier

上記のリンク先からインストールでも、VScode上で検索してもOKです。

インストール後は使用できるように設定

インストールできたら使える状態にするための前設定を忘れずにしておきましょう。

インストールした時点ではVScodeのデフォルトのフォーマッターが設定されているので、以下の手順でPrettierに設定してください。

VScode画面左下の管理から設定を選択（ショートカットキーならCtrl+,）して設定画面を開く。
検索窓に「default formatter」と入力する。（「formatter」でも出てきます）
「Default Formatter」欄のプルダウンから「Prettier」を選択する。

これでPrettierが使えるようになりました！

保存時に自動でフォーマットされるように設定も

ついでに保存したとき同時にフォーマットされるようにも設定しておきましょう。以下手順です。

設定画面の検索窓に「Format On Save」と入力する。（「save」とかでもOK）
「Format On Save」欄のチェックボックスにチェックを入れる。

これだけです！

保存時だけでなくショートカットキー（Shift+Alt+F）でフォーマットすることもできます。

PrettierはJsonファイルを使って他にも細かい設定ができるので、自分の使いやすいように調整も可能です。

Prettier以外のフォーマッター

他にも「Beautify」というフォーマッターがあります。

Beautify – Visual Studio Marketplace

Extension for Visual Studio Code – Beautify code in place for VS Code

HTMLではタグ内の属性ごとに改行したりガッツリ整形してくれるPrettierに比べて、Beuatifyは最低限のフォーマットをしてくれます。

私はこちらの方がHTMLの整形が好みなのでHTMLだけBeautifyを適用しています。

残念なことにこちらの拡張機能はメンテナンスされなくなって非推奨になっているので注意が必要です。今のところはバグや不具合に遭遇していないので、削除されない限りは問題なく使い続けられます・・・！

拡張子によって適用するフォーマッターを設定する

先ほど軽く触れましたが、デフォルトのフォーマッターを設定して特定の拡張子にだけ別のフォーマッターを適用させることもできます。

その場合、設定用ファイル（setting.json）に追記する必要があります。

下記コードはHTMLはBeautify、CSSとJavaScriptはPrettierを適用させたい場合の書き方になります。

"": {
    "editor.defaultFormatter": "HookyQR.beautify"
},
"[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

これでVScodeを使う準備ができました！

あとは扱う言語によって拡張機能を随時追加していく形になりますので、気になる拡張機能があればどんどん試してみてください。

ただし入れすぎるとVScode自体の処理が重くなってしまうので、不要になった拡張機能は適宜アンインストールしましょう。

テーマ

エディターを使う上で「見た目をもうちょっと自分好みにできないかな？」と思うことはありませんか？

VScodeはテーマによって好きなカラーリングにすることができます。

VS Code Themes

Search themes for Visual Studio Code

PrettierやBeautifyなどのコード整形によって可読性が上がることをお話ししましたが、まずは自分がコードを見やすくないと生産性が下がりますよね。VScodeテーマは変数や関数などコードを見やすく色分けしてくれます。

また、チーム開発していたとしてもテーマは自分だけにしか影響はないため、好みのテーマにすることでモチベーションを保つメリットもあるので、ぜひ自分に合ったテーマを探してみてください。（テーマを全部見るだけで何日かかるかわからないほど、有志によってたくさんのテーマが作られています。）

さいごに

この記事ではHTMLやCSSといったフロントエンド関連の話がメインでしたが、VScodeはC言語やPythonなどの幅広いプログラミング言語に対応しているので言語によってエディターを変える必要がなく、エディターによる学習コストが少ないこともメリットだと思います。

この記事がVScodeを使い始めるきっかけになれば幸いです。

indent-rainbow	インデントに色を付けて階層を分かりやすくします。
zenkaku	コード内に含まれている全角に色を付けます。
Path Autocomplete	ファイルパス補完
Bracket Select	`{}`や`""`といった囲み内をショートカットキー1つで選択できるようにします。
Code Spell Checker	コード内のスペルミスをエラーで教えてくれます。
Error Lens	エラーをインラインで表示します。 Code Spell Checkerと一緒に使うのがおすすめです。

Live Preview	ボタン一つでコーディング中のHTMLをブラウザでプレビューできるようにします。
HTML Hint	HTMLの記法や対のタグの不足など教えてくれます。
HTML End Tag Labels	クラスが付与されているタグの終了タグにクラス名を表示します。
Highlight Matching Tag	タグにフォーカスすると対のタグを教えてくれます。
Auto Rename Tag	タグを変更したときに自動で対のタグも変更します。
Image preview	imgタグで画像を指定したとき、行ナンバーの横に小さく画像イメージを表示します。
CSS Peek	タグに付与されているクラスやIDにフォーカスしてF12を押すと対応するスタイルをポップアップで表示します。

Live Sass Compiler	SASS/SCSSをCSSにコンパイルします。（起動後は保存するたびにコンパイル）
CSSTree validator	CSSプロパティのスペルミスを教えてくれます。
Color Info	色コードをホバーすると色イメージが表示されます。

Git Graph	GitをGUI操作できて、コミットやブランチ管理がしやすいです。
Gitmoji	コミットメッセージに絵文字をつけることができます。

Live Sass Compilerで特定のフォルダを除外する設定手順

ステップ1：プロジェクト内に .vscode フォルダを作成する

ステップ2：excludeList に除外パスを記述する

記述における重要な注意点（ワイルドカードの意味）

特定の「ファイル」だけを除外したい場合

設定が反映されない・効かない時のチェックリスト

1. JSONの構文エラー（カンマ忘れ）

2. パス区切り文字のミス

3. プロセスの再起動

なぜ除外設定が必要なのか？（開発効率とチーム共有）

提案する開発フローの全体像：ローカル擬似プレビューとは？

構築に必要なツール

ステップ別！ローカル擬似プレビュー環境の構築

Step 1: 開発用フォルダと「パーツ」HTMLファイルの準備

Step 2: パーツを呼び出す「プレビュー用ページ」の作成

Step 3: JavaScriptによるHTMLインクルード処理の実装

Step 4: VScode「Live Server」でリアルタイムプレビューを実行

ローカル開発の効率化と、本番環境への反映フロー

ローカルでの効率的な開発サイクル

ローカルからFutureshop本番環境への反映

管理画面へコピー＆ペースト

さいごに

まずはLive Serverをインストール

スマホ実機で見るための設定

設定が上手くいっているか確認

スマホで表示

ショートカットキーの登録

Code Spell Checkerとは？

【小話】Code Spell Checkerとセットで使いたい拡張機能

スペルミスじゃないのにエラー扱いされてしまうケースも

エラー扱いさせないために特定ワードを除外登録

登録したワードの解除方法

ユーザー設定の場合

ワークスペース設定の場合

最後に

VScodeとは

VScodeを使うための事前準備

まずはインストール

日本語設定

フォーマッター設定

Prettierインストール

インストール後は使用できるように設定

保存時に自動でフォーマットされるように設定も

Prettier以外のフォーマッター

拡張子によって適用するフォーマッターを設定する

おすすめ拡張機能

汎用

HTML

CSS/SASS/SCSS

Git

テーマ

さいごに

ステップ1：プロジェクト内に `.vscode` フォルダを作成する

ステップ2：`excludeList` に除外パスを記述する