VSCodeのデフォルトor保存時の拡張子をカスタマイズする方法

VSCode（ビジュアルスタジオコード）は、使いやすく柔軟な設定が可能なエディタです。

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

この記事では、

• デフォルト拡張子を変更する方法
• 保存時のデフォルト拡張子を変更する方法

をご紹介します。

VSCodeのデフォルト拡張子の変更方法

VSCodeの基本設定ファイルの場所

設定ファイルを編集することで自分好みにカスタマイズできます。まず、基本設定ファイルの場所とアクセス方法について説明します。

設定ファイルの場所

VSCodeの設定ファイルは、settings.jsonという名前で保存されています。このファイルは、以下の場所にあります：

• Windows: C:\Users\<ユーザー名>\AppData\Roaming\Code\User\settings.json
• Mac: /Users/<ユーザー名>/Library/Application Support/Code/User/settings.json
• Linux: /home/<ユーザー名>/.config/Code/User/settings.json

設定ファイルへのアクセス方法

1. VSCodeを開く：まず、VSCodeを開きます。
2. 設定画面にアクセスする：画面の左下にある歯車アイコン（設定アイコン）をクリックし、「設定」を選択します。
3. 設定の検索：設定画面が開いたら、右上の検索バーに「settings.json」と入力し、「設定（JSON）」を選択します。
4. 設定ファイルの編集：settings.jsonが表示されるので、ここで必要な設定を行います。

次は、実際に拡張子を変更する方法について説明します。

拡張機能を使わないデフォルト拡張子の変更方法

設定ファイルの編集手順

拡張機能を使わずにVSCodeのデフォルト拡張子を変更することもできます。この方法では、settings.json ファイルを直接編集します。

settings.json ファイルの編集方法

1. VSCodeを開く
   まず、VSCodeを起動します。
2. 設定画面にアクセスする
   画面の左下にある歯車アイコン（設定アイコン）をクリックし、「設定」を選択します。
3. 設定の検索
   設定画面が開いたら、右上の検索バーに「settings.json」と入力し、「設定（JSON）」を選択します。
4. 設定ファイルの編集
   settings.json ファイルが表示されるので、ここで必要な設定を追加します。

デフォルト拡張子を変更するためのキーと値の説明

VSCodeの settings.json ファイルでは、ファイルのデフォルト拡張子を変更するために以下のようなキーと値を使用します：

• キー: "files.associations"
• ファイル拡張子の関連付けを定義するためのキーです。
• 値: 拡張子とファイルタイプのペア
• 拡張子とその拡張子が指すファイルタイプを指定します。

以下に具体例を示します：

{
    "files.associations": {
        "*.html": "html",
        "*.js": "javascript",
        "*.py": "python",
        "*.css": "css",
        "*.json": "json"
    }
}

設定例の説明

この設定では、以下のようにファイル拡張子が自動的に対応するファイルタイプとして認識されます：

• *.html: HTMLファイルとして認識
• *.js: JavaScriptファイルとして認識
• *.py: Pythonファイルとして認識
• *.css: CSSファイルとして認識
• *.json: JSONファイルとして認識

次に、保存時の拡張子自動設定方法について説明します。

保存時の拡張子自動設定方法

拡張機能を使わない方法で保存時の拡張子を自動設定する方法について説明します。

拡張機能を使わない保存時の拡張子自動設定方法

VSCode内での設定変更方法

拡張機能を使わずに保存時の拡張子を自動設定するためには、VSCodeの設定ファイルを直接編集する方法があります。ここでは、tasks.json や launch.json を使用した保存時の動作カスタマイズと、ワークスペース設定を活用する方法を紹介します。

tasks.json を使用した保存時の動作カスタマイズ

tasks.json を使うと、ファイルを保存する際の動作をカスタマイズできます。以下に、ファイル保存時に拡張子を自動設定するタスクの例を示します。

1. VSCodeを開く
   VSCodeを起動します。
2. ターミナルパネルを開く
   画面上部のメニューから「ターミナル」→「新しいタスクを構成する」を選択します。
3. タスク定義を作成する
   以下のような tasks.json ファイルを作成します：

   {
       "version": "2.0.0",
       "tasks": [
           {
               "label": "Save as HTML",
               "type": "shell",
               "command": "mv ${file} ${file}.html",
               "problemMatcher": []
           },
           {
               "label": "Save as JS",
               "type": "shell",
               "command": "mv ${file} ${file}.js",
               "problemMatcher": []
           },
           {
               "label": "Save as Python",
               "type": "shell",
               "command": "mv ${file} ${file}.py",
               "problemMatcher": []
           }
       ]
   }

launch.json を使用したカスタマイズ

launch.json を使ってデバッガーの動作をカスタマイズすることで、ファイル保存時に特定の拡張子を自動で設定することもできます。以下に、簡単な例を示します：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Save and Debug HTML",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/${fileBasenameNoExtension}.html"
        },
        {
            "name": "Save and Debug JS",
            "type": "node",
            "request": "launch",
            "program": "${workspaceFolder}/${fileBasenameNoExtension}.js"
        },
        {
            "name": "Save and Debug Python",
            "type": "python",
            "request": "launch",
            "program": "${workspaceFolder}/${fileBasenameNoExtension}.py"
        }
    ]
}

ワークスペース設定を活用する方法

ワークスペース設定を使うと、特定のプロジェクトに対してカスタマイズした設定を適用できます。以下に例を示します：

1. ワークスペース設定ファイルを開く
   VSCodeの左下にあるワークスペース名をクリックし、「ワークスペース設定」を選択します。
2. 設定ファイルにカスタマイズを追加
   settings.json に以下の設定を追加します：

   {
       "files.associations": {
           "*.html": "html",
           "*.js": "javascript",
           "*.py": "python"
       },
       "editor.defaultFormatter": "esbenp.prettier-vscode"
   }

これらの方法を使うことで、拡張機能を使わずにVSCodeの保存時の拡張子を自動設定することができます。

まとめ

この記事では、拡張機能を使った方法と使わない方法の両方を紹介しましたが、どちらも初心者でも簡単に実践できる内容となっています。

デフォルト拡張子のカスタマイズ

• 拡張機能を使う方法: 「File Associations」などの拡張機能をインストールし、設定することで、特定の拡張子を持つファイルを自動的に対応する言語として認識させることができます。
• 拡張機能を使わない方法: settings.json ファイルを直接編集し、デフォルト拡張子を手動で設定することができます。この方法でも十分にカスタマイズ可能です。

保存時の拡張子自動設定

• 拡張機能を使う方法: 「Save and Close」などの拡張機能を利用することで、ファイル保存時に自動的に適切な拡張子が付加されるように設定できます。
• 拡張機能を使わない方法: tasks.json や launch.json を編集し、保存時の動作をカスタマイズすることで、同様の効果を得ることができます。

VSCodeを自分好みにカスタマイズし、効率的なコーディングライフを送りましょう。