Visual Studio Codeをカスタマイズ-Brackets Extension Pack-

Brackets起動時のメッセージで知った人も多いかと思いますが、Adobe Bracketsは2021年9月1日をもってサポート終了になります。内容は以下のとおり。

Bracketsはライブビューで確認しながら作業ができたので、かなり重宝していた人も多いはず。そして何より軽い。

そんな使い慣れたエディターからの移行はすごく残念ですが、MicrosoftのVisual Studio CodeでもBracketsっぽくカスタマイズできるので、早速やっていきたいと思います。Let's Go( ´ ▽ ` )ﾉ

Bracketsユーザーの方のために、専用のダウンロードページが用意されています。Visual Studio Codeインストール

Visual Studio Codeをインストールしたら、右にある拡張機能Brackets Extension Packも続いてインストールします。見失った方はこちら→Brackets Extension Packインストール

Brackets Extension Packパッケージ内容

Settings.Jsonではさまざまな設定が出来ます。特に初期設定では識別しづらいハイライト表示の色設定などがカスタマイズ出来るので、JS Codeを好みのエディターに仕上げることが可能です。Settings.Jsonの場所は下記の手順で開けます。

1. 画面左下の歯車マークをクリック
2. 展開されたコマンドの設定をクリック
3. 画面右上の設定（JSON）を開くをクリック

{
  "workbench.colorCustomizations": {// カラーテーマに上書きする個別の設定
    "editor.selectionBackground": "#f861cbdc",// 選択領域の強調色
    "editor.selectionHighlightBackground": "#05c5f596",// 選択している行の強調色
    "editorBracketMatch.background": "#ffff0077",// 対応する括弧の背景色   
 }
 "highlight-matching-tag.styles": {
  "opening": {
      "full": {
          "custom": {
              "backgroundColor": "rgba(220,220,220,.5)",
              "color": "#ffffff"
          }
      }
  }
}
  "editor.wordWrap": "on", // 右端で折り返す
}
    

flexboxを選択領域の強調色（ピンク）、同語はライトブルー。開始終了タグは、薄いグレーで色付けし、50%透過設定です。

jsonに記載すれば初期設定から自分好みにアレンジできるので、Bracketsを越えたエディターに仕上げることが出来そうです。ただBracketsにあった編集箇所をライトブルーでハイライトする機能は今のところ見つけられてません。あると便利なんですけどね。

以上、最近までブランケットだと思っていたソクラテツがお送りしました( ´ ▽ ` )ﾉ