VS Codeでソースコードの自動インデント

VS Codeはデフォルトでソースコードの自動インデントが出来ます。

こんなソースも以下のショートカットで・・・

mac_OS版は

［command A］＞［shift option F］

Windows版は

［controlA］＞［shift alt F］

綺麗に書き換えてくれます。

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の検索置換上であれば表示が［¥］となっていてもバックスラッシュとなっています。

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

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

 

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

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

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

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

 

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

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

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

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

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

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

Expression 3J Pure Tour

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

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

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

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

Windows版

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

macOS版

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

または、

［表示］＞［拡張機能］

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

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

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

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

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

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

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

Windowsなら・・・

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

macOSなら・・・

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

 

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

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

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

off ＞ 行を折り返さない。

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

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

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

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

EmEditorで行頭行末のスペース&タブ削除するのはとても簡単です。

メインではVS Codeを利用しているので気がつかなかったのですが・・・

テキストを全選択し［変換］＞［先頭の空白を削除］または［最後の空白を削除］で一発完了でした。

上は［先頭の空白を削除］を処理した結果です。VS Codeのようにデリケートに詰めることは出来ませんが、簡単です。

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

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

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

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

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

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

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

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

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

EmEditorで制御文字を表示させる（2）＆ 変換

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

バージョンが上がって少しメニューに変更があったようなので、制御文字を表示させる絵順を再整理しました。

EmEditorで制御文字を表示させる 2022/12/17

デフォルト環境では全角、半角のスペースとTABキーの区別が付きません。

確認したいときは［表示］＞［記号］で表示したい記号にチェックを入れます。

これで全角、半角のスペースとTABキーを目視することがで来ます。

→がTAB、□が全角スペース、Πの逆さまが半角スペース。

変換したいときは変換したいエリアをザックリ選択し［変換］＞［半角／全角変換］で［半角に変換］を実行するだけです。

EmEditor（Free版） 22.5.2

オンラインエディターliveweaveは押さえておきたい必須サイトです

普段、HTML関連はWindowsでもmacOSでも利用可能なVisual Studio Codeを愛用していますが、同様にどちらでも利用可能なエディターを探していて、オンラインエディターliveweaveを見つけて仰天してしまいました。ビギナーの方には余計なことを考えずにHTMLが作成出来ます。

liveweave

上はサイトに入った直後の状態は［Web Editor］です。左上がHTML、左下がCSS。右上がJavaScript、右下がプレビュー画面です。

左端のアイコンで2番目を選ぶと［CSS Explorer］が新しいタグで表示され、CSSの検証が行えます。

左端のアイコンで3番目を選ぶと［Color Explorer］が新しいタグで表示され、カラー編集が行えます。

左端のアイコンで4番目を選ぶと［Vector Editor］が新しいタグで表示され、ベクターデータの作成が行えます。Webデータの作成で必要不可欠の機能が組み込まれています。

日本語も入ります。

試しに以下のソースを入れてみた結果が上の状態です。コレは便利です。

Let's start JavaScript 08　入力した10進数を2進数、8進数、16進数に変換 2023/06/04

ところでデータの保存ですが・・・

［DOWNLOAD］をクリックすれば1セットとなってzipファイルがダウンロードフォルダーに保存されます。［SAVE］をクリックすると臨時のサーバーに保存されます。URLをメモすれば問題ないですが、ユーザー登録するとデータの［無制限保存］［共有］［非公開化］が設定できます。ユーザー登録も無料です。

ユーザー登録は［LOGIN］をクリックし、切り替わった画面の［Sign up for  new account］をクリックし・・・

必要事項を入力すれば完了です。

ログインを完了したら［Dashbord］でデータの［無制限保存］［共有］［非公開化］をチェックしておきます。

なお、退会はメールで申請する必要があります。