質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.37%
Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

Q&A

解決済

2回答

224閲覧

Visual Studio Codeの日本語フォントの文字幅を直したい。

komurojun

総合スコア17

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

1グッド

0クリップ

投稿2024/10/31 12:03

実現したいこと

Visual Studio Codeの日本語フォントの文字幅を直したい。

前提

開いたら何故か画像のような感じで日本語の文字幅が広くなってしまいました。

イメージ説明

特に何か操作したなど覚えはないですが、無意識のうちに何か設定を変更したのか不明です・・・

設定

settings.json

1{ 2 "workbench.iconTheme": "vscode-icons", 3 "workbench.colorTheme": "Monokai Dark Soda", 4 "php.validate.executablePath": "E:\\xampp\\php\\php.exe", 5 //カスタム 6 "editor.tokenColorCustomizations": {//コメントイタリック無効 7 "comments":{ 8 "fontStyle": "" 9 }, 10 }, 11 "extensions.ignoreRecommendations": true, // 拡張機能のおすすめを非表示 12 "window.restoreWindows": "one", // 起動時に前回開いていたワークスペースを開く 13 "workbench.startupEditor": "newUntitledFile", // 入力した行を自動でフォーマット 14 "workbench.editor.enablePreview": false, //インデント幅を設定 15 "editor.minimap.enabled": false, //ミニマップを非表示 16 "editor.hover.enabled": false, // ホバーしたときに出る解説を消す 17 "editor.renderControlCharacters": true, // 制御文字を表示 18 "editor.renderLineHighlight": "all", // 半角スペースを常に表示 19 "editor.wordWrap": "on", // エディターの幅で折り返し 20 "emmet.showSuggestionsAsSnippets": true, // Emmet の候補を表示 21 "emmet.triggerExpansionOnTab": true, // TAB キーで Emmet を展開できるようにする 22 "emmet.variables": { // Emmet で展開される HTML の言語を変更 23 "lang": "ja" 24 }, 25 "files.trimTrailingWhitespace": true, //ファイル保存時に自動で末尾の空白を削除 26 //color 27 "workbench.colorCustomizations": { 28 "editor.background": "#050505" //エディタの背景色 29 }, 30 "diffEditor.ignoreTrimWhitespace": true, 31 "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe", 32 "vsicons.dontShowNewVersionMessage": true, //phpパス指定 33 //edgeファイルをhtmlとしてハイライト 34 "files.associations": { 35 "*.edge": "html", 36 }, 37 //Liquidファイルでコード書くとき、Emmet機能 38 "emmet.includeLanguages": { 39 "liquid":"html" 40 }, 41 "editor.formatOnType": true, 42 "liveServer.settings.donotShowInfoMsg": true, 43 "liveServer.settings.donotVerifyTags": true, 44 "security.workspace.trust.untrustedFiles": "open", 45 "bracket-pair-colorizer-2.depreciation-notice": false, 46 "git.confirmSync": false, 47 "files.autoGuessEncoding": true, 48 "editor.unicodeHighlight.nonBasicASCII": false, 49 "git.openRepositoryInParentFolders": "never", 50 "editor.fontSize": 22, 51 "editor.fontWeight": "normal", 52 "workbench.editor.empty.hint": "hidden", 53 "scm.showHistoryGraph": false, 54 "editor.renderWhitespace": "all", 55}

試したこと

  • VS Codeを完全にアンインストールしてから再インストール(Codeフォルダと.vscodeフォルダも削除)→初期状態で本語化拡張機能(Japanese Language Pack for Visual Studio Code)のみインストール→直らない。
  • 日本語化拡張機能(Japanese Language Pack for Visual Studio Code)を入れているのですがアンインストールすると何故か治ります。また、インストールすると画像のような状態に戻ります。
  • 設定同期をオンにして他のPCに設定を共有してみたところ他のPCでは再現出来ませんでした。正常に表示出来ました。自分のPCのみ起こるようです。

補足情報(FW/ツールのバージョンなど)

Version: 1.95.0 (user setup)
Commit: 912bb683695358a54ae0c670461738984cbb5b95
Date: 2024-10-28T20:16:24.561Z
Electron: 32.2.1
ElectronBuildId: 10427718
Chromium: 128.0.6613.186
Node.js: 20.18.0
V8: 12.8.374.38-electron.0
OS: Windows_NT x64 10.0.19045

■拡張機能
Japanese Language Pack for Visual Studio Code v1.95.2024103009

juner👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

たぶん日本語化拡張機能が原因で問題が起きることもありますね。他の日本語フォントの拡張機能やテーマが影響している可能性があるので、一時的に無効にして様子を見てください。

投稿2024/11/01 15:42

isai

総合スコア148

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

次の画面の通り,Windows版のVS Codeのデフォルトフォント設定はConsolas, 'Courier New', monospaceです。
Editor:Font Familyの項目になります。

デフォルト設定

これらの3つのフォントのうち前二つは日本語のグリフは持ってないので,monospace(等幅フォント)を何のフォントで表示するかがポイントになります。

ほとんどの場合は正常に表示されるのですが,
monospace(等幅)フォントが何も日本語フォントに紐づかない,あるいは変な結びつき方をすることがあります。(回答者個人の想像です)

そんな時質問者が遭遇した状況になる可能性がある訳です。(回答者個人の想像です)

これは,Windows UpdateでMS Gothic等がアップデートされ,この時にmonospaceとのリンクが外れることがあるのではと想像しています。
(回答者個人の感想です)

という訳なので,OSガチャでフォントが変わるのを防げば改善する可能性があります。(回答者個人の想像です)

Windows 10で真面目にWindows UpdateをしているとBIZ UDゴシックがインストールされているはずなので,
次のように設定を変更します。

設定変更例

半角英数はConsolasで,そこで表示できない時はBIZ UDゴシックを見る設定になります。

投稿2024/11/01 10:59

ujimushi_sradjp

総合スコア2150

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

komurojun

2024/11/01 14:21

回答ありがとうございます。 試したところ問題が解決しました! 確かに、Windowsアップデート直後におかしくなったような気がします・・・ 自分の環境だと【BIZ UDゴシック】でも改善しなかったので、代わりに【源ノ角ゴシック jp】を追加したら元に戻りました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.37%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問