Pugをvscodeで使用する場合の基本設定

Pugをvscodeで使用する場合の基本設定

PugをVS Codeで使用するための基本設定を説明します。

1. 必要な拡張機能をインストールする

1. Pug 拡張機能をインストールします。
VS Codeの拡張機能マーケットプレイスで「Pug」と検索し、「Pug」または「Pug (Jade)」を選んでインストールします。

2. Prettier 拡張機能も便利です。
Pugファイルのフォーマットを自動で整えてくれます。
マーケットプレイスで「Prettier」と検索し、インストールします。

2. 設定ファイルの作成

プロジェクトのルートディレクトリに .vscode フォルダーを作成し、その中に settings.json ファイルを作成します。
このファイルに以下の設定を追加します：

{
    "files.associations": {
        "*.pug": "pug"
    },
    "prettier.requireConfig": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

この設定で、Pugファイルが適切に認識され、Prettierがデフォルトのフォーマッターとして使用されます。

3. Snippetの設定（オプション）

Pugのスニペットを使うと、よく使うコードを簡単に挿入できます。
以下のように自分のスニペットを設定することができます：

1. コマンドパレット（Ctrl+Shift+P）を開き、「Preferences: Configure User Snippets」を選択します。

2. 「Pug」を選びます。
pug.json というファイルが開きます。

3. 例えば、以下のようにスニペットを追加します：

{
    "Pug Boilerplate": {
        "prefix": "pugboiler",
        "body": [
            "doctype html",
            "html(lang=\"ja\")",
            "  head",
            "    title Pug Sample",
            "  body",
            "    h1 Hello, World!",
            "    p これはPugのサンプルです。"
        ],
        "description": "Pugの基本的なボイラープレート"
    }
}

この設定で、pugboiler と入力すると、基本的なPugのテンプレートが自動的に挿入されます。