mieki256's diary

一応、拡張もインストールしておいた。

• Add HTML template ... HTMLのテンプレートを挿入
• Beautify ... HTMLソース、Javascript、CSSを整形
• Brackets CSS Class Code hint ... CSS関係の入力候補を表示
• Brackets Css Color Preview ... CSSの色指定を表示
• Brackets Icons ... ファイルの種類別でアイコンを表示
• Brackets Key Remapper ... ショートカットキー割り当てを設定ファイルに列挙
• Brackets Markdown Preview ... Markdownファイルをプレビュー
• Brackets Tools ... 大文字小文字変換その他の各種変換機能
• colorHints ... 色指定を表示
• Display Shortcuts ... ショートカットキー割り当てを表示
• Documents Toolbar ... タブバーを表示
• Emmet ... HTMLやCSSの省エネ入力を追加
• HTML Block Selector ... タグ単位で選択
• Indent Guides ... インデントガイドを表示
• Markdown Preview ... Markdownファイルをプレビュー
• Minimap ... ミニマップを表示
• Paste and Indent ... 貼り付け時にインデントを自動付加
• SVG Preview ... SVGをプレビュー
• ファイル参照し太郎 ... ファイルパスの挿入時に候補を表示

_GitHub - brackets-beautify/brackets-beautify
_GitHub - cmgddd/Brackets-css-color-preview
_GitHub - ivogabe/Brackets-Icons
_begue / brackets-markdown-preview - Bitbucket
_GitHub - yasinkuyu/brackets-tools
_GitHub - konstantinkobs/brackets-colorHints
_GitHub - redmunds/brackets-display-shortcuts
_GitHub - dnbard/brackets-documents-toolbar
_Emmet - the essential toolkit for web-developers
_GitHub - sathyamoorthi/html-block-selector
_GitHub - lkcampbell/brackets-indent-guides
_GitHub - gruehle/MarkdownPreview
_GitHub - zorgzerg/brackets-minimap
_GitHub - ahuth/brackets-paste-and-indent
_GitHub - peterflynn/svg-preview
_GitHub - jzmstrjp/brackets-drop-includer

ただ、こんなに入れると、かなりの数のショートカットが衝突してしまう。ステータスバーに「エラー: 61」と表示されていて、クリックして確認すると、定義済みのショートカットキーに別の機能を割り当てようとしてバッテンがついてるところが多々あるようで。

拡張をインストールした状態で、Adobe Brackets に追加したファイル群のバックアップを取りたい。ググってみたら以下のページに遭遇。

_Bracketsエディタの設定を複数PC環境で同期させる方法
_「Brackets」の設定を共有する | ゆんつてっく

Windowsの場合、C:\Users\(USERNAME)\AppData\Roaming\Brackets\ に、設定ファイルも拡張関係ファイルも入ってるらしい。

一応、zip にしてバックアップを取っておいた。これで、Brackets の再インストール時も、これらのファイルを書き戻せば、しばらくは使える…といいのだけど、さて、そう上手く行くのだろうか。

代替エディタとして Microsoft Visual Studio Code (VSCode) が挙げられてるので、そちらにも代替拡張をインストールしてみた。

_Microsoft、拡張機能で「Visual Studio Code」への移行を支援 〜「Brackets」のサポート終了により - 窓の杜

Windows10 x64 20H2 + VSCode 1.54.1上で、以下をインストール。

• Live Server 5.6.1
• CSS Peek 4.1.0
• IntelliSense for CSS class names in HTML 1.20.0

しかし、Shift_JIS で書いたHTMLを Live Server 経由で Google Chrome 上に表示すると文字化けしてしまう。HTML内で <meta charset="Shift_JIS"> を指定してあるのだけど、変だな…。何が何でも UTF-8 で書け、それ以外は認めん、ということだろうか…。Brackets なら表示されるのだけどなあ…。

Google Chrome に、テキストエンコーディングという拡張をインストールしてみたけれど。

_テキストエンコーディング - Chrome ウェブストア

Shift_JIS に変更してみても相変わらず文字化けする。変だなあ…。Live Server を経由する際に、おかしなことになってないか…。

ググってみたら以下のページが。

_VSCode の Live Server で文字コード Shift_JIS が文字化けしてしまう - Qiita
_文字コードがShift_JISの時の簡易開発環境（VSCode） │ JWS BLOG

なるほど。VScode + Live Server ではダメなんだな…。

issues を眺めてみたけど…。

_Issues - ritwickdey/vscode-live-server ・ GitHub
_language encoding is not preserved while serving - Issue #459 - ritwickdey/vscode-live-server - GitHub

2019年に報告されてるけど放置っぽい。というか、この拡張、2019/04から更新されてない…。

Preview on Web Server という拡張や、Live Server Preview という拡張も試してみたけど、これも Shift_JIS が文字化けする。

_Preview on Web Server - Visual Studio Marketplace
_Live Server Preview - Visual Studio Marketplace

どうもこの手の動作の基本となるパッケージ？が、色々な文字エンコーディングに対応してないのではと思えてきた。

「Brackets の代替は VScode でいいよね？」と言うけれど、ソレって現状では英語圏でのみ通用する話だったりしないか、という気分に…。 *1