Kaizu-Blog: VS Code

ラベル VS Code の投稿を表示しています。すべての投稿を表示

ラベル VS Code の投稿を表示しています。すべての投稿を表示

土曜日, 3月 07, 2026

VS Codeで正規表現による検索置換

VS Codeで正規表現による検索置換について整理しました。

まず検索or置換のパレット表示のショートカットキーは次のようになります。

検索

Windows：control F

macOS：command F

置換

Windows：control H

macOS：command option F

ここで表示されたパレットのオプションは次のようになります。クリックすることでそれぞれの機能に関してオンorオフの切替になります。

A：大文字小文字を区別

B：単語単位での検索

C：正規表現を使用する

D：頭文字を大文字にする

E：最初の1個or選択した1個を置換

F：全てを置換

正規表現についてはInDesignやWordと大きな違いはありません（※）が・・・

※全ての処理を確認しているわけではありませんが基本的な処理は同じだと思います。

Window環境であればキーボードが対応してくれますが、問題はmacOS環境でのバックスペースキーの入力です。

バックスラッシュの入力（英数字モードで）

Windows：「ろ」のキー

macOS：option ¥

VS Codeの検索置換上であれば表示が［¥］となっていてもバックスラッシュとなっています。

日曜日, 11月 30, 2025

VS Codeで文字化けしているファイル修正

VS Codeで文字化けしているファイル修正手順を整理しました。

発端はサイトのリニューアルで20年も前のHTMLファイルが文字化けしてしまい、その修正を迫られたからです。いや、気がつかなかった私が悪いのですが・・・

まず文字コード指定といらない部分を削除し・・・

新たに文字コード（UTF-8）を指定します。

ただし、このまま保存しても文字化けは解消されません。

編集が面したの文字コードが指定と異なっているからです。、そこで、この部分をクリックして・・・

表示されたパレットから［エンコード付きで保存］をクリックし・・・

文字コードを指定して保存すれば・・・

文字化けは解消されます。

該当ページはExpressionというDrawソフトでのイラスト作成手順ですが、Illustratorなｄｐ、他のDraw系ツールにも応用できるので公開しています。

kaizu.comのNewsにリンクしています。

Expression 3J Pure Tour

金曜日, 8月 22, 2025

VS CodeでHTMLプレビューを表示させる

質問がありましたので・・・

VS Codeならブラウザーを使うことなくVS Code上に表示かつサブモニターに配置することもできるので、その手順を整理しました。

まず、編集したいファイルを読み込みます。個々で拡張機能を開きます。

Windows版

［ファイル］＞［ユーザー設定］＞［拡張機能］

macOS版

［Code］＞［基本設定］＞［拡張機能］

または、

［表示］＞［拡張機能］

拡張機能が表示されたら［Live Preview］を検索&インストールします。

インストールが完了したら・・・

画面右上の［Show Preview］をクリックすれば・・・

プレビュー画面が表示されます。

通常のファイルと同様に切り離すことも出来るので、サブモニターに移動させることも出来ます。もちろん修正箇所はライブで反映されます。

日曜日, 12月 15, 2024

VS Codeで折り返しが効かない場合の対処方法（完全版）

VS Codeで折り返しが効かない場合の対処方法は環境設定にありました。猛省。

Windowsなら・・・

［ファイル］＞［ユーザー設定］＞［設定］

macOSなら・・・

［Code］＞［基本設定］＞［設定］

で、［editor:wordwrap］で検索し・・・

［off］以外を選択します。

ちなみにそれぞれの意味は・・・

off ＞行を折り返さない。

on ＞行をビューポートの幅で折り返す。

wordWrapColumn ＞ "Editor: Word Wrap Column"で行を折り返す。

bounded ＞ビューポートと"Editor: Word Wrap Column"の最小値で行を折り返す。

金曜日, 8月 16, 2024

VS Codeで行頭行末のスペース&タブ削除

VS Codeで行頭行末のスペース&タブ削除の手順を整理してみました。

ここではサンプルとしてHTMLファイルを開きます。

全体を選択して［Shift + Tab］とすると・・・

行頭のタブ、スペースが1つ削除されます。Tabを1つ減らすといった使い方が可能です。

コレを数回繰り返せば完全に削除出来ます。

行末のスペース&タブ削除に関しては行毎の処理になります。処理したい行のスペース&タブの手前にカーソルを入れて・・・

［Control K］をすれば一発で削除出来ます。

Windows、macOSともに［Control K］です。

木曜日, 4月 06, 2023

VS Codeで全角文字の周りに付くお邪魔な黄色い枠を消す

VS Codeで全角文字の周りに付くお邪魔な黄色い枠を消す手順を整理しました。

今回は私のmacOS版で新規作成したファイルから変更になってしまったデータを元に整理しますがWindows版でも同様です。ちなみにこれはバージョン1.6x？あたりからの仕様変更だそうです。

Codeメニュー＞［基本設定］＞［設定］を開きます。

Windows版は、ファイルメニュー＞［ユーザー設定］＞［設定］を開きます。

続いて検索ボックスに［Unicode Highlight］とタイピングして検索します。

最初に［Unicode Highlight: Include Comments］を［false］にします。

もし上の様なパレットが表示されたら指示に従ってください。私のが愛は24行目の赤い括弧を削除して問題解決しました。

続いて［Unicode Highlight: Non Basic ASCII］を［false］にします。

これで問題は解決です・・・多分。

VS Code 1.77.0（macOS）

日曜日, 1月 16, 2022

Visual Studio Codeでの矩形選択と矩形貼付の手順

Word等では・・・

［control］［alt］（windows）

［command］［option］（macOS）

キーを併用して選択する矩形選択が便利ですが、VS Codeの場合も矩形選択が出来ます。

処理としては上図のような流れとなります。

まず矩形選択を行います。

選択したい部分の先頭にカーソルを入れ・・・

［shift］［alt］（windows）

［shift］［option］（macOS）

を押しっぱなしでカーソルキーを使って選択範囲を選びます。

選択範囲を選んだら、

［control］［C］（windows）

［command］［C］（macOS）

でメモリーに読み込み、挿入したい部分の先頭にカーソルを入れ・・・

［shift］［alt］（windows）

［shift］［option］（macOS）

を押しっぱなしでカーソルキーを下に同じ行数分移動してから・・・

［control］［V］（windows）

［command］［V］（macOS）

で貼付が出来ます。

意外と重宝するので覚えておくと便利です。

※タイプミス修正（2023/03/31）

水曜日, 11月 10, 2021

macOS版 VS Codeと読み上げコンテンツ併用時の注意点

macOS版のVisual Studio Codeで、選択したテキストを読み上げコンテンツで読み上げるときの注意点です。

を読み上げコンテンツは特別な設定はしていません。

任意テキストを選択し、初めてOption ESCのショートカットを実行すると上の様なアラートが表示されます。これが出たら必ず「いいえ」をクリックします。「はい」を選択するとVisual Studio Codeの折り返し処理が機能しなくなってしまいます。

もちろん環境設定で確認しても問題の無い状態であっても、ショートカットキーのoption Zでも折り返しは出来なくなってしまいます。この状態になったら以下のページに手順でVisual Studio Codeを完全削除し、マシンを再起動してからVisual Studio Codeを際インストールするしか解決できませんでした。

VS Codeで折り返しが効かない場合の対処方法 2021/05/29

VS Code 1.6.1

月曜日, 10月 18, 2021

VS CodeでAuto Closing Tagsを無効にする手順

Visual Studio CodeでAuto Closing Tagsを無効にする手順を整理しました。

<body>とタイプすれば

<body></body>

と自動的に入力されるのはとても便利ですが、時として余計なお世話的なことがあります。そんな場合・・・

Windowsではファイルメニュー＞ユーザー設定＞設定

macOSの場合はCodeメニュー＞基本設定＞設定

にて

HTMLと検索して表示される「HTML Auto Closing Tags」のチェックを外せばOKです。

土曜日, 6月 19, 2021

VS Codeの予測変換入力をオフにする

Visual Studio Code でテキストデータを作成していると、プログラムソース作成時には便利な予測変換入力が邪魔になります。そこでこの機能をオフにする。手順を整理しました。

まず、設定を開きます。

Windows版：ファイル＞ユーザー設定＞設定

macOS版：Code>基本設定＞設定

設定が開いたら、検索タブで「accept」と検索します。

「Editor: Accept Suggestion On Enter」を見つけたら「off」に設定。

コレで入力時の予測変換入力を行わなくなります。ただし、予測変換入力リストは表示されるので、

設定の検索タブで「Suggestion」と検索します。

「Editor: Quick Suggestions」を見つけたら、「Suggestionsで編集」をクリックして設定ファイル「settings.json」が表示されるので、最後の行に「”editor.quickSuggestions”: null」を「”editor.quickSuggestions”: false」に変更します。あとは編集後に保存して完了です。

登録: 投稿 (Atom)