「ファイルを保存する前にシンタックスハイライトを適用したい…」
「デフォルトの言語モードをプレーンテキストから変更したい…」
VS Codeでコードを書いていると、言語モードを変更したくなる場面がありますよね。
この記事では、VS Codeの言語モードを切り替える方法から、デフォルト言語の設定、ファイル拡張子との関連付けまで、分かりやすく解説していきます。
言語モードとは？
まず、VS Codeの「言語モード」について理解しましょう。
言語モードの役割
言語モードとは、VS Codeが現在開いているファイルをどのプログラミング言語として扱うかを決める設定です。
言語モードが影響する機能：
- シンタックスハイライト：キーワードや変数などの色分け表示
- IntelliSense：コード補完機能
- コードスニペット：よく使うコードの雛形挿入
- フォーマット：コード整形機能
- リンティング：エラーや警告の表示
- デバッグ：デバッグ機能
言語モードの自動判定
通常、VS Codeはファイルの拡張子から言語モードを自動的に判定します。
例：
.js→ JavaScript.py→ Python.html→ HTML.css→ CSS.md→ Markdown
現在の言語モードの確認方法
画面右下のステータスバーを見てください。
現在の言語モードが表示されています（例：「JavaScript」「Python」「プレーンテキスト」など）。
言語モードを一時的に変更する方法
ファイルを保存せずに、現在のファイルの言語モードを変更できます。
方法1: ステータスバーから変更
最も簡単で直感的な方法です。
手順：
- 画面右下のステータスバーにある言語モード表示をクリック
- 例：「プレーンテキスト」「JavaScript」など
- 画面上部に言語モードの選択ダイアログが表示される
- 一覧から希望の言語を選択
- 検索ボックスに言語名を入力すると絞り込める
- 例：「python」と入力してPythonを選択
- 選択すると、すぐにシンタックスハイライトが適用される
方法2: コマンドパレットから変更
キーボード操作で素早く変更できます。
手順：
- Ctrl + Shift + P（Mac: Cmd + Shift + P）でコマンドパレットを開く
- 「言語」または「language」と入力
- 「言語モードの変更」（Change Language Mode）を選択
- 言語の一覧から希望の言語を選択
方法3: ショートカットキーで変更
さらに素早く変更したい場合は、専用のショートカットキーを使います。
デフォルトのショートカット：
- Windows/Linux： Ctrl + K → M
- Mac： Cmd + K → M
操作方法：
- Ctrl + K（Mac: Cmd + K）を押す
- キーを離す
- Mを押す
- 言語モードの選択ダイアログが表示される
- 希望の言語を選択
重要：
- Ctrl + K（またはCmd + K）を押した後、一度キーを離してからMを押す
- 同時に押すと、別の機能が動作する可能性がある
よく使う言語モード一覧
VS Codeでよく使う言語モードと、その識別子（Language ID）をご紹介します。
主要な言語
| 言語名 | 言語識別子 | 拡張子 |
|---|---|---|
| JavaScript | javascript | .js |
| TypeScript | typescript | .ts |
| Python | python | .py |
| Java | java | .java |
| C++ | cpp | .cpp, .cc, .cxx |
| C# | csharp | .cs |
| PHP | php | .php |
| Ruby | ruby | .rb |
| Go | go | .go |
| Rust | rust | .rs |
| Swift | swift | .swift |
Web関連
| 言語名 | 言語識別子 | 拡張子 |
|---|---|---|
| HTML | html | .html, .htm |
| CSS | css | .css |
| SCSS | scss | .scss |
| Less | less | .less |
| JSON | json | .json |
| XML | xml | .xml |
| YAML | yaml | .yml, .yaml |
| Markdown | markdown | .md |
その他
| 言語名 | 言語識別子 | 拡張子 |
|---|---|---|
| SQL | sql | .sql |
| Shell Script | shellscript | .sh, .bash |
| PowerShell | powershell | .ps1 |
| Dockerfile | dockerfile | Dockerfile |
| プレーンテキスト | plaintext | .txt |
言語識別子の確認方法：
- コマンドパレット（Ctrl + Shift + P）を開く
- 「Change Language Mode」と入力
- 言語の一覧で、各言語にカーソルを合わせると識別子が表示される
デフォルトの言語モードを設定する
新規ファイルを作成したときのデフォルト言語モードを変更できます。
設定方法
手順：
- Ctrl + ,（Mac: Cmd + ,）で設定を開く
- 検索ボックスに「defaultLanguage」と入力
- 「Files: Default Language」の設定が表示される
- 入力ボックスに希望の言語識別子を入力
- 例：
markdown、javascript、htmlなど
- 設定は自動的に保存される
settings.jsonでの設定
直接settings.jsonを編集することもできます。
手順：
- コマンドパレット（Ctrl + Shift + P）を開く
- 「settings.json」と入力
- 「基本設定: 設定を開く（JSON）」を選択
- 以下を追加：
{
"files.defaultLanguage": "markdown"
}よく使うデフォルト設定例
Markdownをデフォルトにする：
{
"files.defaultLanguage": "markdown"
}HTMLをデフォルトにする：
{
"files.defaultLanguage": "html"
}JavaScriptをデフォルトにする：
{
"files.defaultLanguage": "javascript"
}プレーンテキストに戻す：
{
"files.defaultLanguage": "plaintext"
}ファイル拡張子と言語モードを関連付ける
特定の拡張子のファイルを常に特定の言語モードで開くように設定できます。
基本的な関連付け
使用例：
.incファイルをPHPとして扱いたい.configファイルをXMLとして扱いたい.logファイルをプレーンテキストとして扱いたい
設定方法
方法1: ファイルを開いてから設定
- 関連付けたい拡張子のファイルを開く
- 画面右下の言語モード表示をクリック
- 言語モードの選択ダイアログで、下にスクロール
- 「’（拡張子）’に対するファイルの関連付けの構成」を選択
- 例：「’.inc’に対するファイルの関連付けの構成」
- 関連付けたい言語を選択
- 設定が自動的に保存される
方法2: settings.jsonで直接設定
手順：
- settings.jsonを開く
files.associationsを追加または編集：
{
"files.associations": {
"*.inc": "php",
"*.config": "xml",
"*.log": "plaintext"
}
}関連付けの例
例1: .incファイルをPHPとして扱う
{
"files.associations": {
"*.inc": "php"
}
}例2: .envファイルをShell Scriptとして扱う
{
"files.associations": {
".env": "shellscript",
".env.*": "shellscript"
}
}例3: 複数の拡張子を一度に設定
{
"files.associations": {
"*.inc": "php",
"*.tpl": "html",
"*.conf": "ini",
"Dockerfile*": "dockerfile"
}
}例4: 特定のファイル名を設定
{
"files.associations": {
"Jenkinsfile": "groovy",
".gitignore": "ignore",
".dockerignore": "ignore"
}
}言語モードの自動検出
VS Code 1.60以降では、ファイルの内容から言語を自動的に検出する機能があります。
自動検出機能とは
ファイルを開いたとき、VS Codeが内容を分析して最適な言語モードを提案します。
例：
- 拡張子のないファイルにPythonのコードが書かれている
- VS Codeが内容を分析して「Python」を提案
自動検出の有効化・無効化
設定手順：
- Ctrl + ,（Mac: Cmd + ,）で設定を開く
- 検索ボックスに「language detection」と入力
- 「Workbench › Editor: Language Detection」のチェックボックスで設定
- チェックあり：自動検出が有効
- チェックなし：自動検出が無効
settings.jsonでの設定
{
"workbench.editor.languageDetection": true
}無効にする場合：
{
"workbench.editor.languageDetection": false
}自動検出が不要な場合
以下のような場合は、自動検出を無効にすると便利です。
- Markdownファイルで作業中、コードブロックをコピー&ペーストすると勝手に言語モードが変わってしまう
- 常に特定の言語モードで作業したい
- ファイルの内容が混在していて、誤検出が多い
よくある質問
Q1: 言語モードを変更してもハイライトが効かない
A: 以下を確認してください。
- 拡張機能がインストールされているか
- 一部の言語は拡張機能が必要
- 拡張機能ビュー（Ctrl + Shift + X）で言語名を検索
- ファイルの保存
- 一度ファイルを保存してみる
- VS Codeの再起動
- VS Codeを再起動してみる
Q2: ショートカットキーCtrl + K → Mが動作しない
A: よくある間違いは以下です。
間違い：
- Ctrl + K + M を同時に押している
正しい操作：
- Ctrl + K を押す
- キーを離す
- M を押す
Q3: デフォルト言語を設定したのに反映されない
A: 以下を確認してください。
- settings.jsonの構文エラー
- カンマやカッコの位置を確認
- JSONとして正しい形式か確認
- 言語識別子のスペルミス
javascript（正しい）JavaScript（間違い：大文字小文字に注意）
- VS Codeの再起動
- 設定を変更後、VS Codeを再起動
Q4: 拡張子のないファイルの言語モードを設定したい
A: ファイル名で関連付けできます。
例：
{
"files.associations": {
"Dockerfile": "dockerfile",
"Jenkinsfile": "groovy",
"Makefile": "makefile"
}
}Q5: 一時的に変更した言語モードは保存される？
A: いいえ、保存されません。
- ステータスバーやショートカットで変更した言語モードは、そのファイルを閉じるとリセットされます
- 永続的に設定したい場合は、
files.associationsを使用してください
Q6: 複数の拡張子を同じ言語モードに設定できる？
A: はい、できます。
例：
{
"files.associations": {
"*.jsx": "javascriptreact",
"*.tsx": "typescriptreact"
}
}Q7: 言語モードと表示言語（UI）の違いは？
A: 全く異なるものです。
言語モード：
- ファイルのプログラミング言語を指定
- シンタックスハイライトに影響
- 例：JavaScript、Python、Markdown
表示言語（Display Language）：
- VS CodeのUI（メニュー、ボタンなど）の言語
- 例：日本語、英語、中国語
実用的な活用例
言語モードの便利な使い方をご紹介します。
活用例1: メモをMarkdownで書く
シナリオ：
- 新規ファイルでメモをとりたい
- Markdownフォーマットで書きたい
設定：
{
"files.defaultLanguage": "markdown"
}結果：
- 新規ファイルを開くと自動的にMarkdownモードになる
- すぐに見出しやリストが色分け表示される
活用例2: HTMLのスニペットを素早く編集
シナリオ：
- CMSからHTMLをコピー
- VS Codeで編集してからCMSに戻す
方法：
- 新規ファイルを開く（Ctrl + N）
- Ctrl + K → M でHTMLを選択
- HTMLコードを貼り付け
- 編集してコピー
または、デフォルト言語をHTMLに設定：
{
"files.defaultLanguage": "html"
}活用例3: ログファイルを見やすく
シナリオ：
- .logファイルを開くと、変な色付けになる
- プレーンテキストとして表示したい
設定：
{
"files.associations": {
"*.log": "plaintext"
}
}活用例4: 設定ファイルをJSONとして扱う
シナリオ：
- .configや.settingsファイルがJSON形式
- JSON補完機能を使いたい
設定：
{
"files.associations": {
"*.config": "jsonc",
"*.settings": "jsonc"
}
}注意：
jsonc= JSON with Comments（コメント付きJSON）- JSONでコメントを使いたい場合に便利
活用例5: Dockerfileの派生ファイル
シナリオ：
Dockerfile.dev、Dockerfile.prodなどのファイルがある- すべてDockerfileとして認識させたい
設定：
{
"files.associations": {
"Dockerfile*": "dockerfile"
}
}結果：
Dockerfile.devDockerfile.prodDockerfile.test
すべてがDockerfileとして認識される
トラブルシューティング
よくある問題と解決方法です。
問題1: 言語モードを変更しても色が変わらない
原因：
- テーマが対応していない
- 拡張機能が必要
対処法：
- 別のテーマを試す
- Ctrl + K → Ctrl + T でテーマを変更
- 「Dark+」や「Light+」など標準テーマを試す
- 拡張機能をインストール
- Ctrl + Shift + X で拡張機能ビューを開く
- 言語名で検索
- 公式または人気の拡張機能をインストール
問題2: 設定が反映されない
原因：
- ワークスペース設定が優先されている
- settings.jsonに構文エラーがある
対処法：
- 設定のスコープを確認
- 設定画面で「ユーザー」タブと「ワークスペース」タブを切り替え
- ワークスペース設定が優先される
- settings.jsonのエラーチェック
- settings.jsonを開く
- 赤い波線がないか確認
- JSONリンターでチェック
問題3: 特定のファイルだけ言語モードが変
原因：
.vscode/settings.json（ワークスペース設定）で上書きされている
対処法：
- ワークスペースのルートフォルダを確認
.vscode/settings.jsonを開く- 該当する設定を削除または修正
問題4: 自動検出が邪魔
原因：
- VS Code 1.60以降で自動検出機能が有効
対処法：
{
"workbench.editor.languageDetection": false
}まとめ
VS Codeの言語モード切り替えについてご紹介しました。
一時的な変更方法：
- ステータスバーの言語モード表示をクリック
- コマンドパレット → 「言語モードの変更」
- ショートカットキー：Ctrl + K → M（Mac: Cmd + K → M）
デフォルト言語の設定：
{
"files.defaultLanguage": "markdown"
}拡張子の関連付け：
{
"files.associations": {
"*.inc": "php",
"Dockerfile*": "dockerfile"
}
}自動検出の制御：
{
"workbench.editor.languageDetection": false
}よく使う言語識別子：
javascript,typescript,python,javahtml,css,markdown,jsonplaintext（プレーンテキスト）
重要なポイント：
- 言語モードはシンタックスハイライトやIntelliSenseに影響
- 一時的な変更は保存されない
- 永続的な設定は
files.associationsを使用 - 言語識別子は小文字で記述
- ショートカットは「Ctrl + K を押して離してから M」
言語モードを適切に設定すれば、VS Codeでの作業効率が大幅に向上します。
特にデフォルト言語の設定や拡張子の関連付けは、一度設定すれば毎回の手間が省けるので、ぜひ活用してみてください！
コメント